In June 2021, Google added page speed as a rank factor. Little is known about the actual impact page speed will affect your website, but we know for sure it is a ranking signal.
Not only is this important for Google, but it’s also common sense your site speed will affect your user experience on your website. I don’t know how many times I’ve smashed the back button when a random site doesn’t load within a couple of seconds of clicking on the link. I’m sure you have as well.
Either way, if you want good SEO on your website, you need to consider your website speed as a priority.
How Do You Check Your Website Speed?
First off, each page holds a different score on your website for page speed. But if you can optimize one of your biggest pages, you will likely see results for the rest of your pages. It’s worth noting that you can see different scores from one URL to another URL on your same website. This is because of images, amount of text, videos, widgets, or just having more code on the page in general for some reason.
You can use a variety of tools to check your site speed. The first and most important site speed tool to check your site is Google PageSpeed Insights.
1. Google PageSpeed Insights Tool
This tool is amazing. Google has created a tool that will give you a score from 0-100 based on the speed of your page.
Google splits them up between Desktop speed and Mobile speed, differentiating between desktop and phone or tablet browsing. Which makes sense to me.
Red – 0–49
Yellow – 50–89
Green – 90–100
This is how Google breaks down the different buckets your web page falls within. It’s clear to me that website owners should take as many measures as possible to ensure your score falls in the 90–100 range.
I have personally achieved 90+ scores many times with many different websites. Let’s start with my starter site we can then look at the process of speeding up a website without getting too technical.
Here is what the PageSpeed Insights tool looks like. Place a URL with a bunch of content, or just add one of your blog post URLs. Try to avoid your home page for now.
Core Web Vitals: What Metrics Does The PageSpeed Insight Tool Measure?
These are your “core web vitals” as Google likes to call them. 6 different areas of metrics determine your page speed score. You can also view your core web vitals from the Google Search Console area since page speed now affects your Google Rank.
First Contentful Paint (FCP) – This metric is the amount of time it takes for your website to load the very first piece of content that is not white canvas. Think of it as the very first paint or colour on your website to show is the measure of your FCP.
0-1.8 seconds load time = Green
1.8-3 seconds load time = Yellow
3+ seconds load time = Red
Time To Interactive (TTI) – This measures how long it takes for your page to be fully interactive. Meaning users can click on things and scroll around. The measurement is as long as it is interactive with 50 milliseconds of user interaction it’s a pass.
0-3.8 seconds load time = Green
3.9-7.3 seconds load time = Yellow
7.3+ seconds load time = Red
Speed Index – This metric first takes a video of the browser loading your web page and then measure the frames in the video to measure this score. Kind of a cool way to do things. I’m not EXACTLY sure of everything that’s involved here. But there are ways to improve this score and we will go over those as we progress in this article. I just want you to have a better understanding upfront. That way you can have a better idea of the overall picture eventually.
Total Blocking Time (TBT) – Total blocking time is the amount of time a user is blocked from committing an action on your website such as screen taps, pressing keys, or mouse clicks AFTER the 50 millisecond threshold. This is measured in milliseconds.
0-200 milliseconds = Green
200-600 milliseconds = Yellow
600+ milliseconds = Red
Largest Contentful Paint (LCP) – This determines how long it takes for the biggest piece of content is available and loaded on the screen for users to use. It has to be in view, so when the page your loading, and piece is visible on the screen for your eyes to see.
0-2.5 seconds = Green
2.5-4 seconds = Yellow
4+ seconds = Red
Cumulative Layout Shift (CLS) – Okay, you know how when you load a page of Google results and then you go to click on the first link… but RIGHT before you click the first link the page shifts downwards and you end up clicking on the wrong thing? This happens with lots of websites as well, it’s just ironic that Google Search has this as well…
Anyways, it’s not a great user experience and this is a metric that Google considers when judging page speed.
Google takes the amount of movement, or the number of items that are moving during load times in order to calculate this metric. Easily fixable as well. For the most part, as long as you’re not doing anything shady on the website trying to increase clicks.
These are the 6 metrics that will determine your site speed score for Google ranking.
See how my agency can drive massive amounts of traffic to your website
SEO – Unlock massive amounts of SEO traffic. See real results.
Content Marketing – Our team creates epic content that will get shared, get links, and attract traffic.
BOOK A CALLGoogle PageSpeed Tool Opportunities
The opportunities section of the Google PageSpeed tool will tell you what you can do to fix the problems you’re having with page speed.
This is obviously super helpful and is the key to fixing your site speed issues. That being said, there are many tools and plugins you can use if you are using a system like WordPress. If you are using Squarespace or another website builder like Wix or Webflow, than you will need to go through and tackle these manually for the most part, which can be quite difficult without the knowledge of how to code.
How To Make Your Site Faster?
If you are a coder and you want a workflow that will help you fix certain issues, you can just follow this guide on fixing site speed.
This guide is aimed towards WordPress users and Squarespace users who are less inclined when it comes to coding and the like. I want beginners to be able to do this without a headache. And I have tested out and tried various tools to see which will affect page speed the most, with the least amount of time and effort.
Every situation is different obviously, but let’s start with some WordPress plugins that will help automatically. I only use the free options so you don’t have to shell out any extra dollars for tools.
Image Optimization
One of the easiest things you can do right away is to fix the images on the website. This is one of the biggest speed hogs on your site. Oftentimes, you can fix the images and you will increase site speed by a large margin.
The optimal approach is to optimize the image before you upload it to your website, however that is not always possible and sometimes you have already started your site, or you’ve taken over an existing site with lots of content.
You have two options if you’re using WordPress. You can use a plugin tool that will automatically compress and optimize your images for you, even the previously loaded ones. OR you can resize and compress your images and re-upload them to WordPress one by one (which would take forever for some websites).
If you are just starting your website, the best practice is to resize it before you upload it to your website. There are a variety of free resizing tools that you can use, but I am partial to this one because I have used it a bunch. It’s called resizeimage.net.
The goal is to make sure your images are less than 1MB for sure. But IDEALLY, you want to shoot for under 100kb of file size for your image as long as the quality is still decent.
You also want to adjust the length and the width of the image. I like to adjust mine to 900 pixels wide and try to keep the aspect ratio with the width. Resizeimage will automatically tell you what width to use to keep the aspect ratio the same. You can do this with Photoshop, Canva, or Resizeimage.net. Your choice here.
Obviously, you can play around with this number and you don’t need to be spot on. But any little bit of optimization goes a long way for images.
Kinsta says, “images take up 21% of a website’s total size and load time”.
Let’s look at an example of resize image.net.
- Upload your image.
- Crop it if you want.
- Select the width in pixels and make sure that the box is checked for “keep aspect ratio”.
- Select .JPG as your filetype
- Select compression of about 70% under the normal compression option.
- Click Resize.
You will that the image goes from 102kb in size down to 18.9 kb in size and the quality is NOT THAT DIFFERENT.
After you upload to WordPress or your website, you will have the option to use a plugin to compress it even further, which I recommend some plugins down below to do as well.
If you already have a ton of pictures on your website and you don’t want to re-upload all of them, AND you’re on WordPress, you can use the plugin “Resize After Upload” which is a plugin by ShortPixel.
This tool will go in and resize all your images for you. This usually works well, but be cautious when making extreme changes to an existing website. I always recommend having a backup of your site before you make any changes, just in case.
Content Delivery Network (CDN) & Caching
What is caching? You know how sometimes you’re disconnected from the internet but you type in a website and the entire page still loads and comes up for some reason. And you’re like, wait, why does this come up? It shouldn’t load.
That’s because of caching.
Caching is when a copy of your website is being served to the users. What happens is when one user loads your web page for the first time ever, it goes through the entire loading process.
At the same time, a caching service will download and save a copy of your website and serve that to users instead of having to go through the same process every time.
For example, a great analogy—What is 135,000 divided by 900? … Most people would pull out their calculators and find an answer. The answer is 150. Now when I ask you the same question again, you would just say 150 without pulling out the calculator and doing all the stuff. That’s essentially what caching is.
It’s also the same reason why you don’t see a change made to your website right away when you make it. If you don’t purge the cache (reset the saved version of your website), it will keep pulling up the cached version.
What is a CDN? A Content Delivery Network is a caching service that takes it a step further by using data centers around the globe. For example, CloudFlare is a CDN that will cache your website (save a version of your website) and keep it saved at one of their 250 data centers around the world. They will then use the closest data center to the person trying to load your website so it takes the least amount of time to load. You also get the added benefit of increasing your website security.
I highly recommend CloudFlare because of the extra security you get, and it’s completely free.
Fonts & Page Speed
Fonts will often be a barrier to page speed. They need to load up the font in order to put it on the page, and very often the code is not optimized for best performance. Even the use of Google Fonts can have a dramatic effect on your page speed. And so keeping the use to a minimum amount of fonts for your website is ideal.
I’m definitely not an expert in cleaning up the fonts, I generally use a plugin to do everything I need it to do. If you need more of a code-based approach then you can follow this font optimization guide here. This is a great resource for page speed in general. But great info on Google fonts and Asynchronous fonts.
For the most part, the site speed plugins we recommend will do the trick for WordPress users, so no need to stress about this one.
Minifying Code & Reducing Page Size
Very often the amount of stuff you have to load on your website is what makes the most amount of time to load. This is called your page weight. And it can be measured in megabytes and the total size of your page.
If you are using a template for your website, then there are usually portions of the code that are unused or unnecessary because you are not using those specific functions. But because it’s a template, the code needs to be in there just in case. You would want to remove any pieces of unused code on your website.
Easier said than done obviously. But there are plugins that will help you achieve this goal and optimize your page weight. For example, NitroPack does this, Hummingbird does this and more. We go into the tools below.
Minifying the code. Often there are spaces and formatting pieces as a part of the code for a web page or a website that make it easier for the developer to understand. This all takes up valuable disk space and can be optimized to use the least amount of space. That’s all that minifying code is.
AMP (Accelerated Mobile Pages)
Let’s talk about AMP or Accelerated Mobile Pages really quickly. Google and some partners have developed a tool that will convert your website to its most basic form and show the most important content while skipping out on the rest. For example, fonts, different interactive portions, plugins, popups, formatting, etc. This can look awful, but it can also speed up your website entirely.
When you activate AMP, you are essentially allowing the tool to create all-new URLs for each page of your website. They call it an AMP version, and you have the option to force every user over that AMP version of your site.
The main benefit of using AMP is that it’s mega fast. All your pages will max out scores, and so Google will be happy with these pages. The downside is they can look like garbage. There are plugins now to help you with the formatting of these types of pages by the way. Google makes the plugin and you can make some adjustments, or you can download some paid versions.
Squarespace and Wix have options for turning on AMP as well, and it seems to work correctly. So this is not only a WordPress option.
Hosting
Your hosting could affect your page speed as well. There have been numerous tests to see which host least affects the speed of your site. For example, it has been shown that GoDaddy and Bluehost (what I use) are actually awful for page and site speed.
Bluehost for example uses shared hosting and will share your hosting on the same server as other web pages. Meaning you will slow down quite a bit. I have recently moved over to their more expensive hosting option and it seems to do the trick for me, with all the other options I show here.
Best Site Speed Tools & Plugins
CloudFlare
CloudFlare is a Content Delivery Network that you can use to serve up a cached version of your websites from the closest possible server to their location. It also adds another level of security for your site, and is completely free. Which is amazing. Highly recommend.
NitroPack.io
I will say that the Nitropack plugin has been the easiest and most efficient (and free) way that I have come across to fix site speed with a single click. I have consistently received 90+ scores for both mobile and desktop with this plugin alone. No other plugins were activated.
The one downside is if your site has over 5,000 page views then you would need to pay for this service so it’s not the most reliable when it comes to getting page speed if you are over that threshold.
If you use WordPress and have under 5k pageviews per month, get this now.
ShortPixel Image Optimization
Two plugins by this maker. Resize After Upload and their standard ShortPixel plugin for image optimization. This plugin can be free of charge for a certain amount of images, and just needs time to reset the quota if you have too many images. You will just need to wait, which is totally fine. I use this plugin on every single site I operate.