A hard fact of doing business online is that a slow-loading website is going to lose you a lot of customers, which is why website load time has become an essential part of onsite search engine optimisation. With the proliferation of high bandwidth and fast WiFi nearly everywhere, instant gratification is the order of the day and customers have come to expect that a page will take no more than a maximum of three seconds or so to load. Any longer than that, and you risk losing nearly half of your audience and thereby make it an uphill battle to achieve proper customer acquisition rates.
Here is what you will learn in this guide:
- How to write “pretty” HTML that Google LOVES
- That these simple image manipulation methods can reduce your loading times significantly
- Find out which plugins can become a pain for your visitors
- Most websites load images TWICE, without knowing – This is what you should do
- That compression sounds technical, but it’s actually easy and straight-forward
- How a CDN (Content Delivery Network) can be utilised for a 2x faster website
- How to fix the final and most essential loading factor… Your server connection
If you’re having problems with a slow-loading website, you’re not alone, however. While customer attention spans are on a downward arc, websites in general are actually taking longer to load on average. This is being driven at both the professional and amateur levels. To start things off, and before you continue reading this step-to-step guide, we highly advice you to check your website in the Google PageSpeed Insights tool or – Neil Patel’s popular Quicksprout – to get a basic understanding of some of the underlying issues your site might be having, in terms of technicalities, user-friendliness and website loading speed.
“On Average, more than 30 % of visitors leave a site that takes 3 seconds or longer to load”
The trend in professional web design has simply been towards more bloat in recent years, with complex pages that consume tons of resources being seen as necessary to respond to every possible device a user might browse them on. On the amateur side of the coin, all sorts of WYSIWYG editors have made it possible for people who don’t know the first thing about HTML or Java to design their own pages, but these automated tools often produce sloppy and even broken code that bogs a site down, and do not help in following the best practice guidelines of onsite search engine optimisation.
Put simply, the slower your site loads, the more customers you’re losing. But if your site is struggling, there are a number of primary culprits you can look at, and often they are issues you can fix yourself with very little technical web design know-how. We’ll take a look at some of the most common ones below.
1) Sloppy HTML is Bad, both for SEO and Loading Times
As mentioned, if you use a WYSIWYG editor and don’t really know anything about your site’s underlying HTML code, odds are it’s poorly optimized and loading slower than it needs to. One simple fix that you can do yourself is to remove any unneeded line breaks or large blank spaces that are not necessary. These bloat up the overall size of the page.
If you don’t know how to optimize HTML and don’t have time to learn, there are some tools that can help you. The simplest option is an extension for your favorite Web browser. For Firefox, try YSlow. For Internet Explorer, give Web Development Helper a try — it’s a little more technical than the other options, but also powerful and worth learning. Safari actually has a built-in tool for this called Web Inspector, and it can be enabled by going to the “Advanced menu” in Safari and enabling the “Development” menu. And for Google’s Chrome, there’s the PageSpeed Insights extension.
If a browser extension isn’t getting the job done for you, then it’s time to consider hiring a freelance Web development professional on a contract basis and having them tune up your code for you.
2) Oversized Images Takes Up Space and Bandwidth
Images should be as small as possible without ruining the visual style of your site. But it takes more than just re-sizing the image in a WYSIWYG editor. The actual file size of the image and its internal resolution settings need to be manually changed so that it is as lean as possible.
If you are happy with the display size of the images on your site, check to make sure that they are not actually bigger than they need to be. This can be done by opening the image with editing software such as Adobe Photoshop or even something as old-school as MS Paint. The parameters of the image file such as height, width and color depth should be the same as the display settings in the Web page. If the source image file is larger than the display settings, then bandwidth is being wasted.
“When in doubt, convert to .jpg”
The file type of the image file also affects its size. Files with the .jpg extension are usually the smallest and leanest. Files with a .png extension are a little larger, but offer improved color and transparency properties. However, not every .png will be taking advantage of that improved color, and these can be changed to a .jpg to save space with no detriment. Files with the .gif extension are usually needlessly large, unless you need the image to be animated. Any other file type is likely just wasting space.
A WP plugin to take care of image all your image optimisation struggles
While everything about image optimisation probably sounds good to you, we are aware that editing and optimising your images to be the correct sizes and have the correct compression, can be both a time struggle and a technical hassle. However, luckily there are WordPress plugins that can help with all of this automatically. One of the most prominent ones would be EWWW Image Optimizer, which takes care of optimising your images for quick load speed when you upload new media to your WP posts and pages, and can even do bulk optimisation of old images that you have uploaded throughout the years on your old blog. This alone can speed up your site for both new and old visitors drastically, especially if your website is heavy on pictures.
3) Too Many Plugins Slow Down OR Harm Your Site
Plugins are notorious for slowing down sites, especially those that use WordPress. They are also a very frequent source of security holes for hackers to exploit. If that’s the case, or you are simply worried, try installing the popular and efficient Wordfence plugin to find out if your current plugins pose a threat to your WP security. Wordfence also helps scan your visitors for potentially harmful bots and your files for damages that can then be automatically repaired (in most cases) by Wordfence.
Take a very hard look at how much benefit each plugin you’re using is providing to you. A common amateur mistake – that will most definitely hurt your site speed in the long run – is to just haphazardly throw in any plugin that looks “neat” or provides something that sounds like it might be useful down the road. If the plugin isn’t providing an immediate benefit to your site that can’t be replicated without it, however, it needs to go.
“Deactivating old or unused plugins can save a lot of struggles”
If you have a number of plugins in WordPress and aren’t sure which of them are causing loading speed issues, try P3 Plugin Profiler to narrow it down. You can often find out exactly what is causing your site to load slowly. Sometimes you can even find a single plugin that can do the same things as two of your other plugins. Some cache plugins for instance, also enable CDN or compression functionality, which means that you – in this case – can do more with less. And who wouldn’t step in to grab an opportunity to use a cliche phrase like that? 😉
4) Redundant Element Loading
Many of the basic elements of your site are fixed and do not change on a day-to-day basis. If you don’t have browser caching enabled, however, visitors will have to re-download all of those elements every time they visit. Not only does this slow things down, but visitors on limited mobile bandwidth plans who keep getting hit with big downloads every time they visit you are very likely to abandon your site altogether.
Ideally, the end user should only be downloading any new or changed text and new images you’ve uploaded in your page or post updates each time they visit. The static elements of your site will change at some point, however, so you generally don’t want to set your browser caching for most elements for longer than a few weeks. The exception is images, which should be set to cache for between six to twelve months, to achieve the most optimal loading speed for your visitors, which will greatly help improve your SEO performance and fulfil some of the essential guideslines to a well optimised website.
5) Uncompressed Pages
If you have larger pages with high-quality images or other large elements, you really need to have compression enabled. Web sites can be “zipped” and transmitted to the end user just like any other file, and the good news is that most servers and browsers these days have an automated process for this already built into place. You just have to make sure it is enabled, which you can do with this wonderfully simple WordPress plugin. Each server type has its own individual process for doing this, but it is usually a simple matter of enabling it in the settings. Visitors using any modern browser will then enjoy the benefits of faster transmission sight unseen.
To enable Gzip compression the old-school-FTP-geeky kind of way, simply add these lines to your .htaccess file (assuming your blog is running on a Linux/Apachemachine):
And finally, to test whether Gzip compression is working as it should, you can run this test to make sure that it is. Enjoy your speedy new blog! And pssst… It’s not just you and your visitors who will enjoy this, but actually Google too.
6) Multiple Calls For The Same Image
Using basic HTML, each page will have to call for each image individually each time it is displayed, which is an inefficient method. Using Cascading Style Sheets (CSS), images can be combined into much smaller files that reduce the number of calls and ultimately speed the loading time of your page. If you don’t know how to use CSS, it is very much worth taking the time to learn as it can drastically improve your onsite SEO by speeding up your web store or blog.
“Websites run on average two times faster with a CDN”
According to CloudFlare (a popular choice for many bloggers), websites will use 60 per cent less bandwidth, 65 % reduction in number of requests and load around twice as fast as before, after switching to a Content Delivery Network, which will definitely improve your overall customer acquisition rate. Here is the checklist/steps we always go through when choosing to go with a CDN:
- First, decide which CDN provider is best for you. Some may cost a lot, while others are cheaper at the expense of geografical reach. If you are running a local website, the cheaper ones will suit you fine. Our top picks would be Amazon CloudFront (largest network), KeyCDN (most affordable) and CloudFlare (fixed pricing model with no surprises).
- After signing up at your desired Content Delivery Network you will be given some URL paths that you need to replace your image source paths with (e.g. yourwebsite.com/images/logo.jpg will become abc.thecdnurl.com/images/logo.jpg) and the CDN will take care of the rest.
- The image paths for your content delivery network can either be set automatically with some coding in your files, with .htaccess media redirects or with a WordPress plugin such as WP Super Cache, W3 Total Cache (mentioned earlier in this post) or WP CDN Rewrite.
- Finally, almost all CDNs allow your own custom subdomain to be the host of your images, so that visitors will see (for instance) cdn.yourwebsite.com/images/logo.jpg rather than abc.thecdnurl.com/images/logo.jpg which could help improve your site’s trustworthiness and thereby help acquire more customers in the long run.
And of course also remember that if a good CDN solution equals a much faster website, then these steps will inevitably help your SEO rankings as well, as Google has shown more and more interest in website loading times over the years, especially since their introduction of the PageSpeed Insights.
This is a step that most website do wrong, especially if they use a WordPress template and haven’t checked if that template is set up particularly good for search engines, following the basic principles and guidelines of onsite SEO. However, once you are aware of the changes you can make and how a proper coding structure can help your Google rankings, it should be fairly simple to fix.
With CSS, you may want to take advantage of “folds” where appropriate for your page. You can have an upper fold that loads the most important information (read Google’s official guidelines here) that you want your visitors seeing first, with the rest of the page tucked away under an optional click-through fold that loads later. The Google PageSpeed Insights tool that was mentioned in the beginning of this guide, can quickly give you a good idea of how well your website is doing in this regard.
The HTML content that appears above the fold should be lean and mean text with as few images and plugin elements as possible. You want this to load instantly, keeping visitors engaged while the other elements of your page are loading in the background. To read more about how to identify and construct a website with good above-the-fold practices, Ben Edwards wrote a great guest post on css-tricks.com that goes into brief detail about how to approach this (click here to read it).
8) Network & Hosting Issues Can Be The Black Sheep Of Loading Times
Sometimes, you’ve done everything right with your site, and it ends up just being the network you’re connecting to it with that’s the problem.
To identify whether or not you have a network issue, you basically just need to load the site from other locations and compare the loading times. This can be as simple as asking people in different locations that are far from you to load the page up and tell you how fast it is. You can do this with some automated programs as well, that allow you to ping your website’s server from different locations.
We usually use the tool from pingdom.com as they also measure other speed related factors, that can have an impact on your SEO rankings and user experience for your site’s visitors. If you are running a multilingual ecommerce website, or otherwise have an international audience, you might want to try to ping your site from both Europe, Asia and the U.S. depending on where your main target group is and where your visitors come from.
You can also do it yourself by loading the site through a proxy server to see if there’s a difference in load time. Free proxy servers change constantly, but you can find sites that index them by searching for “free proxy servers” on Google.
Users who are a little more technically inclined can run a traceroute, which will show all the connections made between their local computer and the website server and how long each connection took. The traceroute process is different with each different operating system, but generally involves entering a command at the command prompt. If the network issue is on the server end, you may need to look into getting hosting from a different source or use a geographically load balanced solution, that will distribute your visitors to the nearest hub and reduce loading times for the respective visitor – it kind of works the same way as a CDN, so you should be familiar with the concept by now. However, geo-hosting solutions can get quite expensive and could end up costing you a lot of money, so it’s important that you really consider how much you actually need it. Most websites can run perfectly fine on standard server setups, even if they have an international audience.
Bottom line: “Be fast… And then try to be even faster. Your visitors will love you for it.”
While no more than three seconds is the target time for most of your pages, it is okay for larger pages that are heavy on images or have complex elements to take a bit longer. As a general rule of thumb, nothing on the site should be taking more than seven seconds to load, however. With a clean, lean and optimized site design, you’re certain to see an uptick in visitor retention and sales conversions.
What do you think? Did this guide help you or are we missing something? Please feel free to come with suggestions or feedback. 🙂