Ever get frustrated waiting for your WordPress site to load? It’s a common problem that can drive your visitors away, hurt your search engine rankings, and even cost you money.
But here’s the good news: speeding up your site is easier than you might think. In fact, I’ll show you how to get your load time to under 3 seconds on mobile devices, step-by-step, so by the end of this guide, your site will load insanely fast.
- What to use
- What settings to tick
- And how to test it all works
So let’s get into it…
Why your site speed matters more than you think
There are 3 main reasons why you need to sort your site speed asap. I hinted at them above, but you might not fully realize just how much of an impact this has.
Reason #1. Site speed affects bounce rate
When you land on a website, you expect it to load quickly right? Well, your visitors are no different and if you make them wait, they’re going to leave ASAP.
In a study by Google of millions of websites, they found that if a site takes more than 3 seconds to load, 53% of people will leave.
That’s over half your current traffic gone if your site loads in 4 seconds!
Reason #2. Site speed affects abandoned carts
You’re not just risking losing them on the front end either. Another study by Google found that for every second of delay in mobile page load, your conversion rate would drop 20%, per second!
You get them to your site, but then a product or purchase page takes too long, and boom – lost sales.
Reason #3. Site speed affects rankings and visibility
Around 60% of all web traffic in the US is on mobile devices and has been growing steadily for years.
This is why in 2016, Google announced their mobile-first indexing and gave preference to sites that perform well on mobile. Basically, they measured everyone’s mobile performance instead of the desktop load speed.
However, on July 5th, 2024, they took this a step further and removed their desktop crawler completely.
This means that if a site doesn’t load properly on mobile, then it doesn’t even appear in search engines anymore.
Pretty insane stuff.
TL;DR
- All content and pages are now mobile pages, so they need to load fast on mobile devices
- A 4-second load speed will cause you to lose over 50% of the site traffic that was already coming to you
- Site speed improvements raise the conversion rate, while slower pages drop the conversion rate
In other words, you need to get your site speed below 3 seconds ASAP if you want to improve your traffic and sales, or even be seen in Google!
The good news is, I’m going to show you exactly how to do this, so let’s break down what needs to happen.
The main methods to improve your WordPress site speed
There are a fair few different elements that we need to improve if we want a lightning-fast website load time. However, it’s not as difficult as it looks. Simply because the 4 steps that we’re going to cover can handle most of the heavy lifting for you.
In the interest of fully understanding what needs to be done, let me break down what is slowing down your site and how to fix it.
Method #1. Image optimization
Images are usually the biggest files on your site, and it’s normally by accident. Basically, the quality and pixel count on cameras and phones nowadays is so good, that it’s way over-engineered for what we need.
4k resolution is designed for huge screens, but your users are on their desktop or phone with much smaller screens.
This means we often have this huge image squished down to fit on a tiny screen. However, all that file size is still the same, and so it takes ages to load – even though we can’t tell the difference on our screens.
There are a few ways to fix this.
- First of all we can resize the image to only be as large as the max screen it will be viewed on. Usually 1200 or 1500 pixels wide instead of 4000
- Then, we can also compress those images to reduce the file size further
- Finally, we can also save them in a format that’s more efficient for web browsing.JPEGs are great for photos, PNGs for logos and icons, and WebP offers excellent compression for all types of images
And just like that, we save a whole heap of code that we had to load and wait for.
Method #2. Caching
Caching stores a static version of your site, reducing the need for repeated database queries and speeding up load times. Basically, when someone comes back to your site, it will load even faster the next time, because it’s not having to do all the same tasks a second time.
We can also use server-side caching where we keep a copy of your site on the server. When someone visits, the server serves the cached version instead of generating it from scratch.
In simple terms, we’re using less bandwidth to load the page, and improving future page loads.
Method #3. Minimizing code bloat
Most websites have excess code from unused plugins, or poorly written themes and tools. All of this extra code has to load up each time, causing the site to slow down.
There are a few solutions to this:
- We can remove the excess bloat or restrict it so it doesn’t load on pages it’s not needed
- We can also streamline and improve the code, so it still loads but is faster. We call this minification
- Or we can combine files so there are fewer processes that we’re waiting for. It’s a single file request versus multiple
Sidenote: Don’t freak out if this all sounds super technical. The tools I’ll share later do all of these things for you. You just need to tick the right boxes, and I’ll show you how to do it all.
Back to the optimization methods…
Method #4. Improve server response time
How quickly your server responds to requests will directly affect your site’s performance. The more requests it has, the longer you have to wait for each new page or element.
We can solve this with:
- Regular maintenance like deleting unnecessary data to improve response times
- We can also make sure that we’re using clean, efficient code by improving our site theme. (Some themes have a lot of extra features that you don’t need and are slowing down the load time of your site. We can use themes that don’t have all this bloat).
The theme we’re going to use in this guide loads in 0.8 seconds.
Method #5. Use a Content Delivery Network (CDN)
A CDN helps to speed up the delivery of your site to the user.
Basically, it saves a copy of your website in different locations around the world. Then when a user tries to load the page, the CDN closest to the user loads the saved version for them. This reduces load time, as it reduces the distance that the data has to travel.
A bonus is that CDNs can also help your site survive when you have large traffic spikes, or if there is an outage. Huzzah!
Method #6. Improve your hosting
This alone can have one of the biggest impacts on your website speed.
The reason why most web hosting services are cheap is because they have thousands of websites on them per server.
All of these sites share the same server resources, which can slow things down. But dedicated hosting gives your site an entire server of its own, boosting performance and reliability.
We can also take this a step further and use cloud hosting. This method uses a network of servers to host your site, allowing for efficient load balancing and resource allocation.
TL;DR
There are a lot of things we need to fix, but WP Rocket, the Astra theme, and Cloudways hosting will fix all of these things in just 3 steps.
Better still. Not only will I show you how to do this, but I’m going to walk through the improvements as I do this for my wife’s website, so you can see how much impact these changes make.
So let’s get into it.
Step #1: Measure your current site speed performance
Before you start making improvements, it’s important to know where your site currently stands in terms of its speed performance, as this can then give you a baseline to compare against after optimizations.
One of the best tools for this is Google PageSpeed Insights.
It’s a free tool by Google that offers detailed insights into your site’s performance on both mobile and desktop, focusing on key metrics that affect user experience and SEO.
It’s really easy to use. Simply enter your website URL into the PageSpeed Insights search bar, and hit ‘Analyze’. It will then take a minute or so to assess your current site performance.
Once it’s done, the page will load like this:
Make sure to look at the mobile score, as that’s what’s important.
- Green scores are a pass
- Orange needs improvement
- Red is failing
Each of these scores are from Google’s Core Web Vitals metrics. Which measures user experience.
- FCP refers to how long it takes for things to start appearing on the page
- FID is how long it takes before you can start interacting with the page
- LCP refers to the largest element load top at the top of the page
- CLS refers to how much stuff moves around as it loads. Can you click on things, or do they change position, etc
So if we look at the report right now for my wife’s site, it’s not doing great.
- It takes 2.7 seconds before the first element even starts to load on the page (FCP)
- It takes 9.4 seconds for the header image to load (LCP)
The thing is, the home page is usually the fastest-loading page on your website because it has far less content. So if we check a blog post or a sales page, the load time can be even slower.
For example
That’s not great!
If we continue to scroll down the page, we see a list of the issues currently affecting her site.
Because this page is the one that has the lowest performance on mobile, we’re going to use it as our baseline to measure our improvements.
Sidenote: Make sure when you’re testing your own site speed to also check a blog article or sales page of your own. This way you can see how your site performs on pages that use a lot of resources, and then you can track how it improves as you do the steps throughout this guide.
Anyways, back to improving this website.
So our baseline is:
- FCP is 2.7 seconds
- LCP is 8.9 seconds
- TBT is 530 milliseconds
- CLS is 0.475 seconds
- Speed index score is 7.9 seconds
Here’s a little more context also.
Her site is quite small with not a lot of content, and yet it’s almost 10 seconds before the home page loads fully.
She is currently on Bluehost shared hosting, and is using one of their specific Bluehost WordPress themes that’s supposed to work best with their hosting. However, it’s a little sneaky in that if you want to move from them to another host, you can no longer use their theme.
This makes you a little hesitant to change hosting providers even if it’s slow – because you might not know how to change the theme. Not cool guys!
Don’t worry if you’re in the same situation, as I’ll show you how to do all this.
Step #2: Use a lightweight theme
The theme you use for your WordPress site can significantly impact its speed and overall performance. These with a lot of features and customizations are often slower to load, while lightweight themes are designed to be fast and efficient, minimizing code bloat and optimizing performance.
I cover a few options in this guide here. However, the theme I use for my own website, and what we’re going to use in this example is the Astra theme.
Like I said earlier, it loads in 0.8 seconds and is super clean-looking.
How to install the new theme
Head across to the Astra website and click the download now button on their home page.
This will then take you to their pricing page. Scroll down the pricing page until you see the option to download the free version of their theme.
Open up your WordPress dashboard, and then head across to appearance, themes, and click on ‘upload new theme’.
Then simply drag the zip file from your download folder into the install window, and then click ‘Install Now’.
This will load the theme onto your WordPress dashboard as an option to use. However, we still need to select and use it, so scroll down the page, and click ‘Activate’.
Once it’s installed, go ahead and purge your cache, so that it then saves the new version of your site for testing.
Give it a few minutes to register the changes, and then run the same page of your site through the PageSpeed Insights tool again.
Don’t freak out if you don’t see an improvement right away, or if some things get worse. It might take a few attempts before the tool measures the new theme difference.
Also, if I’m being honest, the theme change is more of a final polish step to get the final high-performance improvements. Normally I would leave this to change last after we fix the other issues, as all we’re really doing is removing some code bloat.
However, because BlueHost locked me into changing themes before I could move hosts, (and a lot of people reading this are in the same situation), I’m doing this first.
If we look at the page performance after the theme update, we can see some small changes already.
- FCP is down from 2.7 seconds to 2.5 seconds
- LCP has increased from 8.9 seconds to 11.5 seconds. WTF? (More in a second)
- TBT is down from 530 milliseconds to 500
- CLS is down from 0.475 seconds to 0.334
- Speed index score is worse, going from 7.9 seconds to 9.6 seconds
Wait – wasn’t this supposed to be faster?
It is, and it will be. However, we need to fix the issues that are causing this fast theme to run slowly, such as code bloat, loading issues, and more.
Fortunately, the next tool does all of this in one go.
Step #3: Install and use WP Rocket
WP Rocket is one of the most powerful and user-friendly caching plugins for WordPress.
It can significantly speed up your site by optimizing various elements like caching, file optimization, image optimization, and CDN integration. In fact, they estimate an 80% improvement in site speed almost immediately after setting it up.
I would have to agree as it fixes almost all of the technical aspects that we need to resolve.
Spoiler alert but this was the site speed once I implemented all of this, and fixed a BlueHost issue.
Not bad right? So let’s get into it.
Head across to the WP Rocket website and purchase a license. (This can be used on up to 4 websites). After purchase, go into the ‘My Account’ section and download the plugin file to your computer.
Then, log in to your WordPress dashboard, navigate to Plugins > Add New > Upload Plugin, and upload the WP Rocket plugin file. Once uploaded, click “Activate” to enable the plugin.
Then you just need to add your license key information to activate fully.
How to configure WP Rocket
After activation, WP Rocket starts optimizing your site right out of the box. However, you can tweak settings for even better performance.
Here’s a detailed walkthrough of the main settings, why they matter, and what you should set them to.
Dashboard
The dashboard provides an overview of WP Rocket’s status and your site’s performance.
You can also access each of the different optimization settings sections here, on the left of the dashboard. I’ll walk through each of the important sections now, along with the settings I use.
Sidenote: If you’re using the same theme, hosting, and plugin that I recommend in this guide, then you should be able to use the exact same settings as me and get similar results.
You may need to tweak and customize it further, but all of this is explained in the tools knowledge base.
However, if anything breaks, it’s usually because of a previous plugin issue that’s affecting something on the site. If this is the case, you’re almost always better off removing the plugin that’s causing the issue.
For example
You’ll notice that I got the site speed down to 1 second with these settings. However, when I first set this up, the site would break and the load speed went up to around 16 seconds.
Hmm, not great.
This was because the Bluehost page builder plugin was still installed and was having loading conflicts. Once I removed that plugin and rebuilt the pages with the Elementor plugin, the page speed dropped to a single-second load time.
Exactly the same design. Same layout and style. 15 second load difference.
Anyways, back to the settings.
File Optimization
This section allows us to minify and combine files, and defer loading.
Let’s go through the settings:
- Minify CSS files – Tick yes
- Optimize CSS Delivery – Tick yes, and select ‘Remove unused CSS (This can sometimes break sites, but again, if you’re using this theme, hosting, and plugins you should be fine. You can always click yes and reload and check, and then turn off again to fix).
- Minify JavaScript files – Tick yes
- Load JavaScript deferred – Tick no
- Delay JavaScript execution – Tick yes
Once you’ve set these, click ‘Save Changes’ at the bottom of the page.
You need to save each page you change the settings on, so make sure to do this as you go through.
Media Optimization
This section basically does two things:
Lazy Loading
This feature delays the loading of images and videos until they are about to enter the viewport, reducing initial load times. This is particularly useful for pages with many images or videos, as it avoids loading all media at once. They load just before the user needs them.
Image Optimization
WP Rocket integrates with image optimization plugins like Imagify to compress images without losing quality. Compressed images load faster and consume less bandwidth. This does mean that you need an additional plugin, but more on that in a second.
Settings
For now though, just tick yes for each of the settings in this section.
Simple!
Preloading
You can customize this further if you want, but there are only 2 settings you need to tick in this section: ‘Activate preloading’, and ‘Enable link preloading’.
This is a pretty smart feature. Basically, if someone is already on your site, and they mouse over a link, the page behind that link will start to load in the background. This way if they click the link, it’s already started the loading process and appears faster.
Advanced Rules
This section is to be used as needed.
Personally, I don’t have anything to set with this, but you might want to use the following:
- Never Cache URLs: Here you can specify URLs that should not be cached, such as admin pages or specific user-generated content pages. This ensures that dynamic content is always up-to-date and not served from the cache
- Always Purge URLs: Here you can list URLs that should be purged from the cache when you update content. This is useful for ensuring that changes to key pages are immediately reflected to visitors, such as product pages
Database Optimization
This section is used for cleaning up unused content so that it’s no longer saved. Kind of like emptying your recycle bin on your PC, but it can help speed up slightly.
CDN (Content Delivery Network)
I definitely recommend using a CDN if you want the fastest load times for your site – especially if you have traffic from around the world.
If you already have a CDN, you can simply tick yes, and then paste the details into the box and hit save.
However, WP Rocket also allows you to use their own ‘Rocket CDN’ if you pay a monthly fee. This is provided by Bunny CDN, and I think it might even be cheaper than if you went to them directly.
Although you can get a free CDN via sites like Cloudflare, the paid options are generally faster and better. (Cloudflare also offers a better, paid version).
If you don’t have one already, just grab the Rocket one inside of WP Rocket.
Image Optimization
If this is your first time setting up, you’ll see an additional option in the sidebar that will disappear once set up.
As I mentioned before, WP Rocket can set up lazy loading and things like that to provide the best delivery of image code. However, you need another plugin to compress your images called Imagify.
If you click on ‘Install Imagify’, it will load up and integrate with WP Rocket, and then ask you to create an account.
Do that. Then, go through and add the API key and license, and then click on the ‘Start Optimization’ button.
This will then take you to the Imagify plugin itself, and you can set up how you want to compress your images.
There are a few settings, so let’s walk through them:
- Auto-optimize on upload. Tick yes, this will then as you might guess, optimize new images as you add them to your site
- Backup original images – I like to tick yes here, just in case anything happens
- Lossless compression – I have this turned off. Mainly because I’m not creating really high-definition images that people might want to expand and look at the fine details, such as a space photography site. This means my files are compressed more, but you won’t notice on a desktop, let alone a mobile device
Let’s continue down the page and the other settings.
- Select WEBP (the green box in the image). This will use WEBP images where appropriate which load the fastest
- Select ‘Display images in Next-Gen Format’ and then select ‘use <picture> tags’
- Tick the ‘Resize larger images’ to the size it recommends
- You can also select to optimize your theme. This will then optimize elements of your theme, such as your logo, etc.
Finally, click ‘Save and Optimize’ at the bottom of the page. This will then begin the optimization process. Depending on how many images and files you have, this can take up to 15 minutes or more.
A quick note on image sizes
When it comes to resizing images, you can get even faster times if you change the image width and height before compressing. That’s why we have the resize option above.
The reason for this is that we only really need images of around 1500px wide on desktop, and smaller on mobile. However, if you look at the settings right now, it’s saying that 2048 is the minimum I can resize down to.
Not great, as this would mean I would have huge images squished into small pages.
For example
You can see that the image below is way too large, and is set to 2560 x 1440 pixels.
The good news is that Imagify has a second free plugin that works alongside it, that removes these thumbnail max size restrictions.
Click the link here and it will download directly. Then you can install like any other plugin and come back to Imagify, and change the resize settings to 1500.
The header image is now a much better size, and is far smaller, helping to load faster. (From 847kb to 209kb).
Remeasuring the performance impact
Time to see how these changes have affected your site speed.
Once the image optimization is complete, (and you sorted any resize issues), clear your cache and then retest your site speed.
Here you can see our test site again, and the changes it had, after implementing all of this from WP Rocket.
So let’s compare that with our last measurement where we had only added the lightweight theme:
- FCP is now only 1.1 seconds down from 2.5 seconds
- LCP has dropped to 2.7 seconds from 11.5 seconds
- TBT is down from 530 milliseconds to zero seconds!
- CLS is down from 0.475 seconds to zero seconds
- Speed index score is now at 2.7 seconds, dropping down from 9.6 seconds
Fixing the code issues and optimizing has now allowed the theme to run more effectively – hence why TBT and CLS are both zero seconds.
Not bad at all!
Just a heads up though. If you have a large site with a lot of content, you might not see scores that are this fast just yet, and that’s okay. The site in this test has very little content on it so the optimizations are even more effective.
Once you add in a good CDN and dedicated hosting, you’ll notice even better performance. (The CDN is easy, just grab the Rocket CDN in the settings from before).
The hosting migration is a little bit more complex, but I’ll show you how to do this quickly now.
Step #4: Switch to dedicated hosting
The final improvement, and if I’m being honest, is probably the 2nd biggest thing that will impact your site speed.
If I had to organize them, I would say:
- Code issues and the WP Rocket plugin have the biggest impact on most sites
- Dedicated hosting is the next big issue solved
- A lightweight theme will fix any final issues
I know what it sounds like also. I read guides on this stuff for years, and I always thought it was BS and someone just trying to get me to click their affiliate link for more expensive hosting.
However, I gave it a try and had to eat my hat.
It improved my site speed by around 4 seconds faster before I did any of the other optimization techniques in this guide. It really does make that big a difference – especially if you have a lot of content or a lot of web traffic.
Don’t believe me? You can try the host I recommend for free for 3 days, no card to sign up or anything.
Try it, test the speed difference and see for yourself.
Head across to the Cloudways website and sign up for a free trial. It will ask you for your name and email details.
Once you sign up, head across to your email and verify by clicking the link. (You can’t move ahead if you don’t verify).
This will then load up the Cloudways first time user screen, like so:
So let’s walk you through these and what they mean:
- Select WordPress
- Give your application a name. Applications are anything hosted on the server. In this case, it’s going to be a wordpress site. The name is just for you to use
- Give the server a name, that will host your websites or ‘applications’
- Give the project a name
- Select DigitalOcean as the cloud server provider
- You can also specify server size. If you filled out the budget option in the initial signup, it estimates the size of hosting you need. 2GB is fine for most sites to test this out
- Scroll down slightly and pick a location near to where your audience is. This is basically just where you want the core server to be created geographically
Once you’ve done all of these, click on ‘Launch Now’.
The server is now live, but the application (the wordpress install location) is currently being built and will take around 5 minutes.
While we’re waiting for this, let’s create a backup of your site. This way if anything happens while migrating, you can roll back to the working version.
Head back across to your WordPress dashboard, and search for a new plugin called UpDraftPlus.
Once you install and activate it, it will open up and start onboarding you through how to use it.
Click on the backup now button, and then again on the popup that appears.
This will take a few minutes to save our backup copy.
We could in theory use this same plugin to migrate our site to new hosts, but Cloudways offers a free option.
Go to add plugins again, and search for Cloudways, and then install and activate it.
It will then open up a new window to start the migration.
Add your email, click the box to confirm and then click ‘Migrate’.
This will then load up a new window, asking for details about your cloudways admin access, the new application that you built that you want to move this site onto, etc.
We need to fill this out for the migration to start. Some of it is under our new application. Some of it is under our server information.
So let’s walk through where to find all this, and the settings to use:
Flexible or Autonomous
Select Cloudways Flexible
Destination Site URL
This is the URL of the new application that you created. Head across to the application tab and click on it, and then click on the WordPress application you see installed there.
This will open up the application.
Copy the destination URL from the top of the page, and paste it back across into the cloudways migration document.
SFTP Host/Server Address
Scroll a little further down the page in the application dashboard until you see the IP address, and then copy and paste that across into the ‘SFTP Host/Server Address’ part of the migration form.
For security reasons I’ve blanked my own out in the image, but click on yours and then copy across.
Database Name
Scroll back up the page, and you’ll see a box that says ‘DB Name’. Copy and paste the text from there into the section on the migration form for Database Name.
SFTP Username and Passwords
These two are your master credentials, and found in your server – not your application.
Scroll up and click on the server, and then click on it again to open up the information for your server.
I’ve blanked these out also, but you’ll know you are in the right place if it starts with ‘master_’ before a line of letters.
Copy the name and password across, and then hit migrate at the bottom of the page, and a loading screen will come up and let you know how long it will take.
Now we just need to wait and then tweak a few things once it’s migrated across.
Adding our site URL
Once that’s finished, head back across to your application, and click on ‘Domain Management’’ on the left hand site.
You’ll notice that our site is currently set to the placeholder URL that our application was set up on.
We want to change this to our original URL, and it’s super easy to do.
In the domain management tab, simply click on ‘Add domain’, and then enter our normal site URL, then set that URL as the primary option.
If you load up the URL now, you should see that it’s working correctly.
Adding a new SSL
If you do go ahead and keep using Cloudways as your new server, you’ll probably need a new SSL certificate. Assuming you have that with your old host that you’re about to cancel.
In the applications, click on the SSL certificate, and fill out the details and boom. New SSL set up via your new host also.
Simple!
Final performance test
Alright, the final test. If you’ve done everything I recommended, your site should now load insanely fast, so let’s double check.
Head across to PageSpeed Insights and enter the same page URL and compare.
Here’s how our test site performed:
Yeeeew!
So just to compare the stats fully from when we started until now:
- FCP is now 1.2 seconds down from 2.7 seconds
- LCP is now 2 seconds, down from 8.9 seconds
- TBT is zero seconds, down from 530 milliseconds
- CLS is zero seconds, down from 0.475 seconds
- Speed index score is 2.4 seconds, down from 7.9 seconds
A 99/100 score is not too bad right?
What are you waiting for? Improve your WordPress site speed today!
So how did you do? Did you follow along and test your site at the same time? If not, don’t hold off on this. You can be losing so much traffic and sales from having a slow site, it’s insane.
More and more of your audience is visiting via mobile, so you need to create a site that can perform on their devices. There’s never been a better time than now to do this. All you have to do is go back through this guide and follow along.
And if you’re a blog subscriber, email me and let me know how much these steps improved your performance! 😀.
Whenever you’re ready, there are 3 ways I can help you:
1. Future Proofed Content: This is my comprehensive writing training. It’s the exact systems I’ve refined over a decade of Content Marketing – improved with AI assistance. The course walks you through my entire writing process step-by-step, so you can follow along and create content of your own.
In just 90 minutes, you can create a long-form, unique, Google-friendly article from scratch, with zero worries about Google penalties or plagiarism.
The post you just read? Yep – it was created with this process.
2. Subscribe to the AmpMyContent blog: I share in-depth case studies, guides and tutorials every month. All designed to help you get more from your efforts. Perfect for small teams and one man blogs who want maximum results.
3. Subscribe on YouTube: Watch video versions of all articles, as well as quick tips, advice, behind-the-scenes, and more.