Site speed can be a perennial problem for website owners. You have a simple site and it all works fine, but then you get a new theme, new plugins, new products, or it grows over time and suddenly your users are complaining that it's slow and you're slipping down Google's rankings.
So, why does it happen?
Many things affect the speed of your site. Some can be fixed by changing settings or adding new plugins and features to speed things up, whereas some things will need bigger spanners in order to fix.
This blog doesn't claim to be an exhaustive list of everything that could possibly affect the speed of your site, but we'll cover some of the most common issues, particularly as they relate to WordPress sites.
What factors affect the speed of your WordPress site?
Your site's speed is determined, very broadly, by two key factors: the amount of stuff on your pages and the amount of work that has to be done to generate those pages and to display them to a site visitor.
Before any of your content can be sent to the user, it has to be generated somehow. In WordPress that means that the code has to find the content in the database, run the plugins and apply any themes before it can send the page down to the browser and display it to the user.
That can all take time, potentially a lot of time once your website has grown to a reasonable size.
What determines how quickly my page will load?
Hosting - Cheap hosting is cheap for a reason and if your site is running on a shared server with a slow database and limited available memory then the chances are that it's going to run slowly. See our blog on why it's sometimes worth paying more for hosting for more information about this.The plugins and choice of theme - On WordPress sites the choice of theme and the number of plugins installed will often have a significant influence on speed. A 'code-heavy' theme with many plugins means that WordPress just has to do too much in order to create each page and render it for the user, meaning the site is slow.Networking - As network speeds increase, pages are quicker to load but not all your users will be using super-fast broadband to access your site.The amount of stuff on the page - big, image-heavy pages will always be slow to download without some tweaking.
Design your page with speed in mind
To understand how to make a page quicker, you need to understand its constituent elements. Typically a web page is made up of four parts:
The source HTML - this contains the structure and the text content of the pageCSS - the CSS is the code which gives your web page its style, defining how the content is displayedScripts and other code - These run inside the browser once the page has downloaded and are often used to provide elements of the functionality of your page such as a pop up form or an interactive map.Additional media - materials such as images, videos and downloadable PDFs that you might have embedded within your pages.
Each of these elements needs to be downloaded in order to render your page, and there can be hundreds of elements that make up a single WordPress page.
One of the most frustrating types of thing that slows down a page is javascript which blocks parts of the page being shown. Javascript is often used to add functionality to a page, however if that takes a long time to run in the browser, whether that's on the phone or on a desktop, then it will slow down the experience of the page loading.
Worse still, you might think that the page is loading fine, and you don't mind a nifty slider or weather widget taking a few seconds to initialise. However, Google will probably take that as the page not finishing the load and will punish you accordingly.
What difference can optimising for speed make?
Consider this. The Amazon home page is 79,873 bytes when compressed. When I scroll down that page, approximately 520 images are downloaded, accounting for another 11MB. There is also about another 7MB of 'other' resources that need to be loaded to make the page work.
On an old modem it would have taken about an hour to download a home page of that size. These days on a UK broadband connection offering about 8Mbit/s it could take over a minute to download, faster connections like 4G and fibre will load it in around a second. However, as you know, Amazon's page loads much quicker than that. That's because the content that it delivers is optimised for speed.
So what can you do to speed up your site? To start with there are two main areas that you can focus on: hosting and caching. I'll talk about each in turn now.
The role of hosting in determining site speed
It's common to start a new venture with a website running on the cheapest hosting that you can get. However, you will start to bump into problems as soon as you add extra plugins and complex themes which require more work on the server. This is because your site will be sharing resources with many other sites, each looking up their data, each running their own plugins and each vying for resources.
You can take all the advice in the world regarding how to speed up your site but at the end of the day you may still need to improve your hosting. All the optimised images and minimised scripts in the world won't help you if your hosting isn't up to the job.
Look for hosting companies that are WordPress specialists. Longer term as you site grows aim to move away from shared hosting towards a dedicated service which will guarantee some resources specifically for your site.
Leverage caching to improve the speed of your site
One key metric when assessing the speed of your site is time to first byte (TTFB). That's the time between your browser sending a request for a page and the first character being returned from the server.
If your site has to do a lot of work to get the page content, then you'll find that you have a high TTFB. Getting that down as low as possible will mean that you can then focus your attention on other aspects, such as images and the work that the browser has to do.
Leveraging caching is probably the quickest and most effective change that you can make to a WordPress site to improve the TTFB performance.
Caching works on the basis that most of the content on most of the pages on your website won't change very often, so you can speed up the performance of the site by using a pre-built version of the page for most visitors rather than generating the whole page from scratch for every visitor.
Your website has a set of static pages - maybe the homepage, the contact page, FAQs or product listings that don't change often. These pages can be generated and then the HTML is stored in a folder that can be quickly accessed. It means that your site can be as fast as old-fashioned static HTML pages but with all the functionality of the WordPress CMS.
There are two plugins we'd recommend: WPRocket and WPSuperCache. Both provide caching and both have similar core features, one is premium and the other is free. We prefer WPRocket since there are a lot of extra features baked into it, but WPSuperCache is great if you're getting started
The improvement can be incredible. A site that might take a few seconds for that first byte to arrive can be improved so that the first byte comes back in hundreths of a second. The first page request will build the page and then subsequent pages can be lightning fast
However, there are some things to consider with caching. You need to remember that your super-fast site is now loading pre-calculated version of the site. If you use things like a shopping cart or user-specific content then those pages will appear to everyone as they did to the first visitor to the site. This could be bad.
The plugins will make some guesses depending on what cookies are set, but they can't know about every plugin that you'll be using, so you need to install your caching plugin and test it carefully to make sure that nothing strange is happening.
The other thing to be aware of is that depending on the settings, you might find that the WordPress admin bar stops showing for some pages. This mostly happens when using caching alongside things like a Content Distribution Network(CDN). This might not concern you, but could be a show-stopper if you have other admin users trying to work behind the scenes on the site.
The way to deal with this is to take a look at the plugin settings again and make sure that the pages aren't cached for logged in users. The downside of this is that it means that the pages will be slow again for anyone who is logged in, but that may be a price worth paying to make the site quick for general visitors.
Managing images effectively
Another common issue affecting site speed is the time it takes to load and display massive images on pages. Image sizes for photos taken with phones can be absolutely massive these days so if you take a photo and then load it straight up into your WordPress site, or indeed load up large images from any other source, you can run into trouble.
These days WordPress itself does a lot to help with image sizes. It'll now resize images and since version 5.4(2020) it will lazy load images. In other words, it'll only download the images when they're about to be shown in the browser rather than loading all the images on a page right down to the bottom of the page before the page renders. The image is only loaded at the point at which the visitor scrolls to it. Lazy loading takes a big chunk of time off the page load time.
We also recommend a plugin called Smush which will compress your images, resize them to the optimum size, identify images that are causing page loading problems, enable lazy loading if you're using an older version of WordPress.
Optimising other elements of the page
HTML should be compressed. This is usually dictated by the hosting that you're using and to be fair, very often happens automatically without you having to do anything.
Styling and scripts should be "minimized" and concatenated together (and then compressed!)
Very heavy media such as images and video need some extra consideration - they should be the right size, compressed and delivered in a web-friendly way (as already discussed).
Content distribution networks
Finally you can add a layer between your server and the rest of the internet. CDNs like Cloudflare and StackPath work well with WordPress and can be very easy to configure. The CDN keeps copies of your site pages, media and other files on its local servers. The browser will send a request to the CDN rather than your hosting company and the CDN will try to answer it first. If it can't send a response then it'll pass that back to your hosting.
This works well because CDNs tend to have servers around the globe, and so the content is closer to the users and doesn't have to travel that far. Secondly, because the CDN is holding copies of all the other types of file that the site might use, it will further reduce the load on your hosting.
Sometimes your site might get a rush of traffic. It might be that you've just posted something awesome on social media and people are visiting your site, or it could be something malicious. Either way, you don't want your site to grind to a halt when this happens. A CDN is a great way to shelter yourself from these events and keeps your site responsive and fast even under heavy pressure.
Next steps
This is a massive topic and we've just scraped the surface, but here are some tools that can help when looking at your site speed.
Google Page Speed Insights - You can run a speed test on each page on your site using Google's free Page Speed Insights tool. As well as telling you whether it considers that your site is too slow, it will also give you a series of recommendations regarding what you should do to speed it up.Google Analytics Site Speed Report - If you have Google Analytics running on your site then you can look at its Site Speed Report to see how quickly users are able to see and interact with your content. The report also help you to identify areas that need improvement, and then track the extent of those improvements.WP SuperCache - This free plugin enables you to easily deploy caching on your site. Once you have it installed then it generates static html files from your dynamic WordPress site. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts, speeding up the user experience massively.
If you'd advice on your own specific site then do get in touch with us to talk about how we might be able to help.
About the author
