I wanted my next article to be about SEO, but it occurred to me that there’s a lot of basics that I haven’t covered yet. Adding to that fact is SEO is a huge topic and I want to push some content out that’s going to help people in the initial stages before they worry about SEO.
Today I’m going to walk you through the basics of site speed and how to optimize your WordPress website. If you want a more technical dive into Google’s Core Web Vitals and how to track it over time, see my post “Core Web Vitals in Data Studio Using the CrUX Dashboard”.
Table of contents
Measuring Your Site Speed
There’s 3 big factors that are going to slow down your website. Initial Server Response time, Total Page Size, and the amount of code to unpack and parse. There’s more factors like number of page requests and such but those are the big 3.
Initial Server Response time – How long your server takes to respond to a request for your website. The initial request for your site always takes the longest but each file that is part of your website has an initial server response time also. This is going to be solved with reducing the amount of files being called, getting better hosting, pre-connecting to the source files, and using a CDN.
Total Page Size – Every website is essentially just a bunch of files that sit in a folder. The total page size is the size of all of the files and images being called to load your site. This effects both mobile and desktop traffic but effects mobile to a larger extent since the internet connection is likely slower to download the files.
Unpacking and Parsing Code – 1 Megabyte does not equal 1 megabyte here. 1 megabyte of images doesn’t have to be unpacked and parsed. 1 megabyte of JavaScript and CSS may be render blocking and will have to be unpacked and parsed. Mobile CPU/GPU isn’t as powerful as a computer so will take much longer to unpack, parse, and compile. If you want to read more about this, go to Google’s developer’s documentation.
There’s a lot of different ways you can measure your site. Different tools, whether you’re blocking your cache for the test, etc. I want to introduce you to two tools, how to use one of them, and how to improve your site based off of what they tell you.
Google’s Page Speed Insights
Google’s Page Speed Insights is great for the fact that it’s free and gives you mobile and desktop. Outside of that, I can’t say a lot of nice things about it. It’s simple and high level, but it can lead you down some rabbit holes that don’t actually matter much to site speed. Secondly, there’s just better tools on the market that will help you troubleshoot your site. Even their Network and Performance tab in their Chrome dev tools is better.
GTMetrix
GTMetrix.com is a great tool that in my mind is a lot more useful in troubleshooting than Google’s Page Speed Insights. The downside being that it only tests desktop on the free version. If your site has a ton of JS and CSS, you might be underestimating how much of a problem you have.
Analyzing Your Site with GTMetrix
Go to GTMetrix.com and input your site in the box. For this example, I’ll be analyzing my “Core Web Vitals in Data Studio Using the CrUX Dashboard” page since it shows that my Time To First Byte (TTFB) is bad as opposed to my homepage where it shows it’s good. I don’t know enough about the back end server side to know why that is… If any backend people know the answer to this, please @ me on Twitter.
The first thing you’re going to see is your web vitals laid out over time and what your users see as the page loads.
You’ll notice that my TTFB is a horrible 1.1s. This is what happens when you use a cheap hosting service AND don’t know how to optimize your backend. If your page is light like mine, you can get away with this. We’ll walk through how to help TTFB later in the article.
Scrolling down, you’ll see “top issues” and page details. Notice how this page is only 236KB and makes only 12 requests for file and images. This is how you can get away with cheap hosting. What you’ll see in a lot of sites is large page size and a lot of requests which we’ll tackle later.
Moving on to the “Structure” tab shows a list of items and the impact to your site speed. These are the things that you’re going to want to fix. Autoptimize or a similar site speed plugin will help with many of these.
The last tab that you want to look at is the “Waterfall”. It’s arguably the most important. This tab shows you ever resource that gets called and loaded on your site and how long it takes.
The image below is of a different site so that I can point out some issues.
First, you’ll notice in the bottom right hand corner, that this page has 134 requests. Every request has a blocking, sending, waiting, and receiving time associated with it. What this means in practice is that every single plugin you add onto your site, slows it down.
This is why it’s important to pick a robust and lean theme. If you pick a bad theme for your usecase and have to add on 10 plugins to get the site where you want, you’re only hurting yourself. Not only that, you’re adding code bloat for features that you won’t be using.
Secondly, you’ll notice two very large bars. The red file tried to load but is failing and causing the rest of the site to load very slow. The purple file is taking 6 seconds to receive the source file also leading to a very slow site.
I won’t dive into the root cause of these two but the bottom line is look out for this and clean up the number of request your page is making by minimizing plugins and images. Figure out what’s loading these files and get them off of your site.
Lastly, this site is 1.6MB compressed and 6.3MB uncompressed. 1.6MB isn’t necessary a very large site. What’s worrysome is that that’s the compressed size.
Optimizing Your WordPress Site
I’ve spent months with my dev team going back and forth on how to optimize our site. It takes a lot of time and energy to really optimize an enterprise level site. WordPress sites shouldn’t be that hard. You don’t have to refactor any codebase. Below are the 5 things you need to do today to get to a basic level of acceptable site speed.
CDN
Use a CDN. Period. If your hosting service doesn’t have a cheap or free Cloudflare for you to use. Dump them immediately and go absolutely anywhere else. If you’re on Bluehost, this is where you turn the CDN knob to on.
Long Loading & Troublesome Files
Remember those two long loading files from above? Here’s how you find them and find the root cause so that you can remove them.
- Go to Chrome Dev Tools by clicking ctrl+shift+J and go to the network tab
- Make sure that you’re recording (red box below)
- Reload page
- Type in part of the file name in the search box right below the red boxes
- Click on the name of the file below
- Then the initiator tab
What you can now see is the initiator chain. This file caused this file to open which caused this one… The plugin for WordPress live chat is causing an extended load time for this site.
Large and Numerous Images
Images are a necessity on websites. I know. What you don’t need though is an overabundance of images. If you’re going to use a number of images, keep them under 100kb unless it’s your first image on your landing page. Then you’re allowed to go to 250kb.
To accomplish this, you’re going to want to compress your images. TinyPNG is my go to for this. They have a 20 image max but you can easily bypass this by refreshing your page. I don’t need the paid version but I pay the $25 a year just to support the work they do. Another cool part of their site is their Analyzer section. Input the URL of the page and it will tell you how much speed you’re losing by not compressing your images.
Using the example website from above, they can save 0.7 seconds off of their homepage’s load time by just compressing the images before they upload them.
Site Speed Plugin
There’s a lot that’s not covered in this article. Outside of refactoring a codebase, a plugin like Autoptimize will cover most of your bases not covered in this article. Instead of going through every setting in the plugin, I’ll leave the images to my settings below.
Be sure to compare what your GTMetrix report says and compare it to the settings in this plugin. Also test settings changes in this plugin one by one to see if they cause any unexpected issues.
The reason why I’m not using the images section is because I have another app (Jetpack) optimizing the images.
Remove Plugins and Code
Now’s the time to remove that plugin that makes that button blue. Learn the basics of how to manipulate CSS.
Going with WordPress’s default page builder instead of a builder like Elementor will ensure you don’t have code bloat. WordPress’s default page builder has gotten better over the years. Don’t use page builders outside of WordPress’s default page builder if you don’t have to.
Manually manipulating your theme and getting a good theme will keep you from having excess plugins.
It’s time to remove all of the excess and simplify.