How to Make Your WordPress Site Load Faster (Without Breaking It or Going Crazy)
Last updated: October 17, 2022
“Uuu, website optimization! How exciting!”, said no website owner ever.
I get it. Everyone dreads things that seem complicated or boring.
And if you aren’t technically savvy, all this caching, compression and optimization talk makes you regret having a website in the first place.
But we both know that you have to do it if you want better search rankings, more website visitors, and more clients.
So today, I came to help you slay this dragon and explain to you in simple terms how to make your WordPress website load faster even if you hate everything tech.
Here’s what we’ll cover:
Quick Navigation
- What happens when a visitor opens your website in a browser?
- How to find out what you need to fix on your website
- How fast should your website load?
- One ultra-effective tip that will instantly speed up your website
- 5 fundamental changes that will speed up every website
- An actionable plan to make your website faster
Let’s go!
What happens when someone visits your website?
The files of your website are stored on some server far-far away. When a website visitor opens an URL in her browser, the browser asks that server to send some files over.
Then, the browser does some magic with those files to show your visitors what looks like a nice website. Simplified, it looks like this:
So:
- if the browser and the server can speed up their convo
- and the browser processes what it has received quicker,
…your website will load faster.
Which brings us to 5 areas of improving every website’s load speed.
5 fundamental changes that will speed up every website
- Make things smaller so that the browser gets them faster
- Cache things and not request stuff from server that haven’t changed on the website since your visitor visited it last time
- Handle things more efficiently (for example, requesting only things that are needed for the current part of the page, or not doing the same things multiple times)
- Ask server for things less often and request things in bulk
- Reduce server response time after the browser sends the request
And by “things” I mean resources that are necessary to render that web page: HTML, CSS and Javascript files, image files, etc.
So, these are your 5 areas of optimization. #1 and #2 are easy, #3 is doable, #4 is a pain, and #5 will make you cry.
#somuchfun
But before you can get to fixing things, you need to find out what is slowing down your website.
How to find out what slows down your website
There are many online load speed testing tools out there. These two are more than enough.
GTMetrix.com
Open GTMetrix.com and run a test for an URL on your website you’d like to test (for example, your homepage).
This free online tool offers a comprehensive (yet, not overwhelming) list of the things you can improve.
Going forward, I’ll address the most common issues from GTMetrix reports so that you can pick the ones that your report shows and get right to fixing them.
WebPageTest.org
WebPageTest.org is a rather advanced tool that shows you what happens when your web page is loaded in great detail.
Most of it is nothing for the faint-hearted, but it does offer one very important piece of information: Seconds till your website starts to render.
“Fully loaded” vs “Starts to render”
“Fully loaded” metric: Seconds till your page is fully loaded, from top to bottom.
“Starts to render” metric: Seconds till your website visitors start seeing something appear on the page.
Why do you need to know when your web page starts to render?
Imagine this:
Page A loads fully in 4s, but starts to render after 3s. Whereas Page B loads fully in 6s, but starts to render after 2s.
What would your website visitors prefer?
Obviously, more visitors will stick around on Page B, as they’ll start seeing things on it sooner. And if you let them compare the two pages, they’ll think that Page B is faster in general.
So, it’s important to know when your page starts to render to make sure the answer is “soon enough”.
How fast should your website load?
How fast should your website load so that you can stop optimizing for speed?
The answer is: Fast enough for your visitors.
If you’re running an e-commerce shop, your visitors will click around a lot, and if they have to wait longer every time a new page loads, they’ll lose patience soon.
But if people come to your website to read your articles and check out only 1-3 pages per session, they’ll be more patient.
According to KissMetric, 25% of the website visitors abandon a page if they don’t see anything after 4 seconds. So, when in doubt, aim for that.
– Ok, can we finally get to fixing things?
– I’m glad you asked!
One ultra-effective way to make your website faster
Here comes my first tip on how to make your website load faster. It’s ultra-effective, yet, I don’t see many people talking about it.
Ready? Here it comes.
Seriously.
Every image, every fancy feature, every new font you add to your website slows it down.
Get rid of the things that don’t add value on your website:
- Things that move by themselves (for example, blog post, testimonial and client logo carousels)
- Decorative images that don’t contribute to the main goal of the page
- Popups
- Huge header banners
- GIFs
- Background images where no background or a color background will also do. You can find lots of free backgrounds in this collection from Freepik.
Stuff like that.
Before adding anything to your website, ask yourself this:
- What did my visitors come to this page for?
- Why do I want this on my page: Because it makes my message stronger or because it looks fancy?
- Is this element or feature pulling my visitors’ attention in the wrong direction?
- Will this thing annoy them or interrupt their train of thought?
You’ll be surprised how many things you can remove.
But ok, let’s imagine everything you have on your website also needs to be there. Here’s how you make it load faster.
#1 Make resources smaller in size
Use Gzip compression
How it helps: Server compresses resources making them smaller in size before serving them to the browser (you know, like you zip a document before sending it via email).
What you need to do: Use a caching plugin (for example, W3 Total Cache or WP Rocket).
Minify resources
How it helps: Server sends HTML, CSS and Javascript files to the browser in minified form – with unnecessary characters, line breaks and spaces removed, which makes the files smaller in size.
What you need to do: Use a caching plugin (for example, W3 Total Cache or WP Rocket).
While configuring a caching plugin, it’s important to use the correct settings. I use a free version of W3 Total Cache and have configured it as described in this article.
These cache plugins come with a possibility to minify the resources. Yet, this may mess up your CSS and Javascript, which will result in a weird-looking website.
No worries, it won’t break anything for good, and things will get back to normal as soon as you deactivate the settings that are causing a problem.
For example, I have the minifying for CSS and Javascript switched off because for some reason the main CSS file of my theme breaks as soon as it’s minified.
What to do if minifying with a plugin doesn’t work
- Look at GTMetrix report and identify the files that aren’t minified.
- Using an FTP connection, copy those files from the server to your hard drive. Create two copies of each file: One you’ll be working on and one as a back-up that will stay in its original form. This way you can restore the original state of things anytime.
- Minimize the files one by one using an online minifier tool (for example, this one).
- Copy the files back to the corresponding folders one by one checking if everything works fine after each transfer.
I know. This sounds like a boring task that takes too much of your time.
But as minifying of the resources has a noticeable impact on your website’s load speed, it’s worth taking some time and fixing it once and for all.
Optimize your images
How it helps: The files of the images become smaller in size, and the browser will get and process them sooner.
What you need to do: Know what formats and sizes to use and when + use an image optimization plugin (Imagify, WP Smush, etc.).
Image optimization has become a buzzword.
But what does it actually mean?
3 things:
- Optimal file format: Saving an image in the right format (jpg, gif, png, etc.) depending on what this image depicts and what you want to use it for.
- Optimal image width and height: Using an image that is only as large as necessary (and not larger).
- Optimized file size: Using a plugin that compresses the image file – makes it smaller in size without noticeable changes to a human eye.
There are plenty of articles that go through the image optimization tips in detail. Here are the most important ones:
The most important image optimization tips:
- For images that are photographs with a gazillion of colors and details, use JPG.
- For images that are mostly text on a plain background, use PNG-24 or PNG-8.
- For images that are graphics you designed yourself or anything that has no blurs and only limited number of colors, use PNG-8
- When in doubt, save the same image in different format and see what has the best size vs quality ratio.
- Use GIFs carefully, as these are usually huge files that can’t be compressed well.
- Remove images that don’t carry any value.
- Use an image optimization plugin.
For detailed info on image optimization and optimization plugins, check out this article by Knista: “How to Optimize Images for Web and Performance”.
Scale your images
How it helps: It creates multiple versions of the same image in different sizes (from large to small) to load smaller versions on smaller devices.
What you need to do: WordPress does it out of the box.
WordPress automatically generates multiple thumbnails – versions of the same image in different sizes – and serves different sizes of the same image to different devices.
For example, if your visitor is looking at your page on a smartphone, the server sends a smaller version of the image, which makes the page load faster.
Here, you need to make sure that you insert the images using WordPress “Add Media” option and not type the link manually.
To check if your image is served in the scaled way, check out the source code of the page:
Right click on the page in your browser -> View page source -> Ctrl + F -> Search for the text next to the image to find the spot where the image is located.
The part where the image is inserted should look like this (not one source but multiple with different sizes):
#2 Use Caching
Use browser caching
How it helps: It tells the browsers of your visitors who have already visited your website not to load certain resources (CSS files, images, etc.) again if they recently visited this page.
What you need to do: Use a caching plugin (for example, W3 Total Cache or WP Rocket).
Use a CDN server
How it helps: It makes your website load equally fast regardless of the geographical locations of your visitors.
What you need to do: Use a free CDN server (for example, Cloudflare).
Let’s say, you’re in the UK, and so are the servers that host your website. Without CDN, your website loads slower for your prospects in the USA than for those in Europe.
a CDN server takes care of that and makes your website load equally fast everywhere in the world.
To set up a CDN, you can use a free solution from Cloudflare.
Check out with your host to see if they already offer Cloudflare out of the box (for example, on SiteGround). If they do, you can activate it with a click of a button.
Otherwise, check out this tutorial. Setting up a Cloudflare CDN is a matter of 10 minutes. No technical knowledge required.
* – For GTMetrix to recognize that you’re using CDN and show you a better speed score, you need to tell them your CDN host names. You can specify those names (once you opened a free account with GTMetrix) under User Settings -> Analysis Options -> YSlow CDN Hostnames. Yet, even then it may fail to recognize it. #eyeroll But that’s fine. You know you’re using it and it’s making your website faster, and that’s what counts.
#3 Handle the resources more efficiently
Specify image dimensions
How it helps: Browser can show the page faster.
What you need to do: WordPress does it out of the box.
Compare an image without dimensions specified:
…and an image with dimensions specified:
In the first case, the browser will have to render the page twice (or as many times as you have images with unspecified dimensions). But if you tell it in advance how wide and how high your images should be, it can build a page only once regardless of how many images it has.
Good thing is that WordPress takes care of this automatically, as long as you insert your images through “Add Media” option.
Lazy-load the images
(GTMetrix doesn’t mention it explicitly).
How it helps: It doesn’t load an image unless the visitor scrolled down close enough to it.
What you need to do: Use a lazy-load image plugin (for example, BJ Lazy Load).
“Lazy-loading” is a spot-on term because it’s exactly what happens: The browser becomes “lazy” and only loads the images when a website visitor scrolled down far enough.
You know, just like you don’t organize the parts of your house you know your guests won’t visit.
The overall page load speed will remain the same, but it will influence the “starts to render” time (remember, the one from the WebPageTest report?). And because your visitors start seeing things on the page sooner, more of them will stick around.
There are free WordPress plugins that implement this for you without much configuration (here’s a nice selection). I use BJ Lazy Load.
If a lazy load plugin doesn’t work, try this:
I tried multiple plugins, and none of them worked as intended. They worked for blog post thumbnails and other images that WordPress puts on a page automatically. But the images in my blog posts were shown blurry, no matter what I did.
Finally, I figured out that I need to change src="…" to data-src="…" every time I add an image within a post or page. It seems like a rare problem though, and it may work for you out of the box just fine.
Make resources needed later on the page load later
How it helps: It loads resources that are needed later on the page… later, and the website visitors start seeing things appear on the page sooner.
What you need: A person who has enough confidence to mess with your website’s theme source files (aka a web developer).
Some of the plugins claim they can fix these problems. But I didn’t find a plugin that was able to successfully do it for my site.
The best way to solve this is to manually edit your theme, but this requires advanced PHP and Javascript knowledge and could screw up your website.
This is a bummer, because it’s a common problem that has a significant negative impact on your website’s speed. Yet, if you don’t know PHP and Javascript, you can’t fix it on your own.
#4 Make fewer requests to load the resources
How it helps: The browser will ask the server to send stuff in bulk and won’t bother it about every little thing separately.
What you need: A person who has enough confidence to mess with your website’s theme source files (aka a web developer).
Here’s again something not everyone can fix on their own. But as these issues show up a lot in the load speed tests, it’s useful to know what they mean.
You can only solve this by manually combining many CSS files that come from different plugins into one and analyzing your theme to see what else you can combine.
Some requests will remain, though, for example, the ones that fetch your opt-in forms, Google Analytics code or a heatmap plugin – anything that gets data from or sends data to a third party.
This is another common problem that if fixed could bring a huge improvement to your website’s load speed but, alas, requires a specialist.
#5 Reduce server response time
This is a mystery that you need a black belt in code mastery to solve, but as you may have seen the recommendation to reduce server response time on Google’s PageSpeed Insights, it’s worth mentioning (and clearing up one huge misunderstanding).
What other articles will tell you this means:
Although many articles on website optimization say that to reduce server response time you need a faster host, an optimized database or different server configuration, this is not what makes up the time PageSpeed Insights shows you when you test your web page.
…which is why I don’t like using PageSpeed Insights to test load speed in the first place.
What it actually means:
It actually means the time of “First byte” shown in WebPageTest – seconds till the browser receives the very first byte of your page. And the best (or the worst) part is that you can see exactly what’s happening during this time.
The best, because… clarity. The worst, because… OMG, yet another thing you need a specialist to fix.
Here’s a load speed report for an empty test page I created on my website. No header, no footer, no content – nothing. It still takes 1.2s till the browser receives its first byte from the server.
This means that my website theme is generally very slow, and I can only fix this if I change the theme or try to figure out and fix the existing issues myself.
Isn’t website optimization fun? #noitsnot
Possible good news for you
The good news for you, though, is that my case is rather unusual. From about 100 websites I’ve run this test for, I didn’t see many that had this problem after everything else was optimized.
So, now you know when you can ignore PageSpeed Insights recommendation to reduce server response time. Yay!
Your Website Optimization Plan
Now that you understand the magic behind loading a web page in a browser, you can clearly see what you can fix and how (and don’t fret about things you can’t fix).
Here’s what you do to make your website load faster:
-
- Run a test for your homepage with GTMetrix and look at the list of the issues it will show.
- Choose an issue that needs fixing and follow the corresponding instructions from this post.
- Re-run GTMetrix and/or WebTestPage test every time you’ve optimized something to see the improved load time (and get motivated to keep going).
- Every time you create a new page or post, use only the things that contribute to the goal of your page, save images in the right format and compress them.
- Run a speed test every time you publish a new blog post or page to see if you’ve missed anything. Repeat.
Here’s an ugly but helpful table with an overview of the most common issues and their fixes:
Final words of wisdom
When I got rid of some junk on my website, installed a caching and an image optimization plugin, and set up a CDN, my website became 2 seconds faster and some of my articles jumped up 5 positions in search.
And this was before I did any of the advanced things.
Did it take time? Sure. But I had to do it only once, and the benefits were well worth it.
How much faster can your website become? How much can your search rankings improve? How many new visitors will you get?
It’s time to find out, don’t you think?