Make Your Wordpress Site Faster
Nobody likes a slow website. A slow to load or render page will annoy users and contribute to a bad overall user experience. Not only that, studies have shown that page load time has a direct, measurable impact on page views, bounce rate, and conversions. According to surveys by Akamai and Gomez.com, 47% of users expect a page to load in 2 seconds or less. 40% of people actually do abandon a site that takes more than 3 seconds to load.
All this means if your site is slow, you're not only losing visitors, you're losing conversions, and you're also losing possible referrals because your current users have had a poor experience.
We're going to look at the top ways you can speed up Wordpress and help create a better experience for your users, which will hopefully lead to more page views and higher conversion rates!
Test Your Site Speed and Performance
Before you start just throwing fixes at your site, it might be a good idea to measure a few factors and determine how slow your site is.
Some key things to measure include;
Page load time:
This is essentially the total time to load and render an interactive page. There are a few ways to measure and all give slightly different results, so it's a good idea to do a few measurements.
Measure it: My personal favourite page speed tool is Pingdom. Enter the address of your site, select the location to test from and run the test.
Server response time:
This is the time it takes the server to respond to a request.
Measure It: A useful tool is Bitcatcha which will measure the response time of your server from a handful of locations around the globe. Note that the most relevant result is the one closest (geographically) to your server.
1. Slow Hosting
Nobody ever likes hearing it, but one of the biggest factors in a slow site is cheap shared Wordpress hosting, and it's one of the easiest ways to speed up Wordpress. We see this one all the time when we're optimising Wordpress sites. A site hosted on a cheap shared server somewhere will almost always have slow response times. It may not sound like a huge issue, but consider this; let's say a user types your domain into their browser address bar directly, and they've never visited your site before (absolute worst case). This is the sequence of events that will roughly follow: (We'll use nimblewebdeveloper.com as the example here)
- User enters "nimblewebdeveloper.com" into the address bar
- Client (browser, user's machine) looks up "nimblewebdeveloper.com" through DNS to find out the IP address of the server
- If the site is hosted in say the US and the visitor is in Australia, this DNS lookup could take up to half a second (0.5s) by itself, especially on a shared cPanel server
- Client then requests "nimblewebdeveloper.com" from the IP address returned from the DNS, and waits for a response from the server
- Your site should be using HTTPS, so Wordpress will return a 301 (redirect) to point the client to "https://nimblewebdeveloper.com"
- Client requests "https://nimblewebdeveloper.com"
- Wordpress usually isn't very clever and if your server is using Apache (as most Wordpress hosts are), apache requires a trailing slash at the end of all URLs that aren't a static asset, so the server will then return a 301 redirect to "https://nimblewebdeveloper.com/"
- Client can finally request a page from the server
- Client waits while server builds page
- Server returns page, client can begin downloading page and assets
I think by now you get the point, for a first page load, the worst case scenario here could be multiple seconds before a client can even begin downloading anything. We've seen cases where just the DNS lookup and redirect chain has been over 4 seconds, and then the server starts building the page!
The solution to slow hosting?
Yep, you know it. Move to better hosting. Some studies by Amazon, Google and others have concluded that a reduction of just 1 second in load time can have up to a 7% increase in conversions! So the cost of moving to better hosting isn't really a cost at all.
The best solution for cheap shared Wordpress hosting is to move to a Virtual Private Server or VPS. A VPS is a virtual part of a physical server that is allocated entirely to your usage. This means you should always receive the resource allocation (RAM, CPU etc) that you need.
If you're not comfortable doing a bit of command line setup etc, you'll probably want to look for cPanel VPS or similar. These packages tend to start around the $35/month mark for a basic VPS with cPanel and go up from there.
If you are comfortable tinkering a bit, try something like Digital Ocean's one-click Wordpress on Ubuntu 18 or OpenLightSpeed Wordpress droplets. These are still easy to set up, and will perform really well compared to a cPanel/WHM server.
Note: if you would like to sign up for Digital ocean, we'd love it if you used our referral link. You'll get a $100 credit to use over 60 days on DigitalOcean products!
2. Poorly Optimised Images
Another one of the best bang-for-buck ways to speed up Wordpress is by delivering better images to your users. We see a great number of sites where one gigantic image, usually at the full display quality, is delivered to all clients regardless of screen size, connection speed etc.
Let's start with the easy one here; images should at the very least be optimised for web and only delivered at a maximum size that might actually be needed. Most of the time, delivering an 8000px wide image is probably not going to be needed. An easy way to optimise your images for the web is run them through a service like ShortPixel. ShortPixel even comes with a Wordpress plugin that can do all the work for you. It'll ship your images off to ShortPixel when you upload them, compress them, and return them to your media library. They have a free tier which lets you optimise 100 images a month, but you will need to create an account to use the plugin. Pro tip: We recommend using glossy compression for most situations.
Added bonus : ShortPixel can be configured to deliver WEBP images which can significantly speed up image loading on modern devices.
3. Lazy Loading Images
Lazy loading of images is a really easy way to speed up your Wordpress site. Lazy loading involved deferring the loading of images until they're within the browser's viewport. To understand how and why this works, it's important to understand that a browser will attempt to load the source of all img tags in a webpage as soon as it can. It doesn't matter if the image is 2000px out of the viewport, or visually hidden, the browser will start loading it as soon as it can get to it.
How can we get around this? Well there are many ways to execute a lazy loading strategy, but essentially (at a very basic level) it involves the following;
- Replace the image src with a placeholder image (a transparent 1x1 px PNG is often used). This stops the browser from loading the image immediately.
- Add the actual image source to a data- attribute. This allows the source to be found by a javascript.
- A javascript to load in the correct source, preferably once the image is in or near the viewport.
We could do all of this manually, but fortunately there are quite a few solutions out there that will do the job for us. My top recommendation if you're using Wordpress would be A3 Lazy Load. It's a free plugin available in the Wordpress repository, and really easily lazy loads images, videos, iframes etc. It has some configuration settings but for most cases the defaults should just work.
4. Remove Unnecessary & Out of Date Plugins
One of the great things about Wordpress is the ability to easy and quickly add extra functionality through plugins. Unfortunately, not many plugins are particularly well written and can often lead to slow page load times.
I was recently optimising a poorly performing ecommerce site, and found a roughly one second improvement in page load by disabling 3 poor plugins. Of course some plugins provide core or necessary functionality, so it can be hard to remove plugins. The best thing to do is go through all your plugins and assess how critical they are and whether they are up to date. Any plugins that are out of date should obviously be updated!
5. Compress & Combine Assets
A common reason for slow to load websites is a large number of external assets being loaded (often due to plugins). The user's browser has to download each of these assets which can slow down page loads, especially for assets that are render blocking (note that theoretically this is less of an issue if both the server and client support HTTP/2).
Stylesheets and scripts can also be compressed and minified to reduce size. Compressing and minifying removes all the un-needed whitespace, renames variables, etc. to make the styles and scripts as small as possible. We're not really going to get into the nitty gritty here of how to do it, because fortunately for us there exist plugins to do this for us! If you haven't used W3 Total Cache before we have a tutorial coming shortly.
Configuring minification in W3TC should be as easy as install the plugin, enable minification under General Settings, Minify. Of course things don't necessarily always go to plan, so use with caution and test! If you need to, you can tweak the settings further under the Minify specific settings.
6. Enable Caching
While we're on the topic of W3 Total Cache, there are a heap of other options we can enable to speed up Wordpress further. If you installed W3TC in the previous step, some other options you can enable easily are;
Page Caching
When we talk about caching, page caching is usually what we're talking about. There are loads of explanations of caching around the internet, but in a nutshell; Without caching, every time a page on your website is requested, Wordpress has to do a bunch of stuff to build the page such as fetching the post content, getting the title etc etc. This stuff is technically dynamic but, unless you update your page or post, it doesn't change. So what caching does is build the page once, store the built HTML and then on subsequent requests simply send the cached HTML instead of building the page again. There is a slight tradeoff here, on the first page load (when the cached version is being built) the page load will be slightly slower. On subsequent loads however it should be a lot faster.
In W3TC turning on should be as simple as ticking enable in the General Settings. Something to note; with caching enabled, changes you make to content won't show up on the front-end unless those changes are cleared from the cache. Post content etc. should automagically be cleared by W3TC when you hit update.
Database Caching
Database caching can also be easily turned on in the General Settings page of W3TC. Database caching simply stores frequent database queries so that the data can be returned immediately without ever touching the database.
Object Caching
Object caching is somewhat similar to database caching. Where database caching caches the raw database requests and results, object caching caches the Wordpress query that uses those results. This can significantly speed up dynamic performance for repeated queries. Again, simply ticking this on in the settings should be sufficient.
Browser Cache
The browser cache setting in W3 Total Cache allows your Wordpress site to compress static assets that are delivered to the browser and also adds headers that tell the browser how long it can store those assets. If you didn't know; most browsers will cache assets and even entire pages to speed up the site on repeat visits.
7. Don't Use Page Builders
Page builder themes/plugins (Divi, WP Bakery Page Builder, Beaver Builder etc) are an easy way for people with no development skills to build and manage a website. Unfortunately I've never met a page builder that performs well. There is always a tradeoff between building something that is really performant, and something that can easily be edited through a user interface. Unfortunately the sacrifice for page builders as flexible as these is a huge performance hit. If you combine this with often less than ideal coding, the result is a really slow page. Of course, you can try all the other tips in this post, and I'm sure you'll see some performance, but I'd almost be prepared to bet it's still not great.
Instead; Use a well built theme. If you don't feel up to creating one from scratch, start with a good theme and customise from there to get the desired result. Or hire a good developer!
8. Use a CDN
A CDN can have a huge impact on the delivery of your static assets. A CDN delivers your content (images, stylesheets, scripts etc) from a geographically distributed network of servers that are optimised for serving static content. We've done a quick post on how to add a CDN to Wordpress, so head over and read that if you're not sure.
9. Use PHP 7+
This one doesn't sound like a Wordpress specific tip, (and I guess it's not really...) but it's actually a really easy way to speed up your Wordpress site. Many cPanel and other hosts still run on php 5.6 or earlier. PHP 5.6 and 7.0 were end-of-lifed in December 2018, so continuing to use them could actually become a security vulnerability. Most importantly though, there is a significant speed and performance difference from PHP 5.6 to PHP 7.x
There are plenty of comparisons around, but tests have shown up to 50% reduction in time to build a page and even larger reductions in the number of requests by using PHP 7.
Top comments (2)
Hi there, I really liked your post, thank you very much, I only have a question about the page builder.
When you're not using page builder, do you create a page on dashboard and then code them in your theme using page-slug.php file?
I don't know what's the recommended way to create a page in WordPress, but I always had a concern about the way that I said before because I seems that I'm binding my theme with page slugs, consequently the URL.
How do you create your pages?
Hey! Thanks for the feedback!
That's certainly one way to do it, but it depends how quickly you need to develop it, and how flexible it needs to be.
An approach you could try instead; look at using page templates. They can be a good way to go if you need specific functionality per page type. I haven't written a post on them yet, would you like to see one?
Hope that helps. If you'd like more in depth, please DM me on twitter @baffledbasti