SEO BLOG

Page Speed Will Be a Ranking Factor with Web Core Vitals in 2021

Core Web Vitals - The Need for Site Speed

Google announced near the beginning of 2020 that it will be making changes to its ranking algorithm so that page speed will be added as one of the ranking signals. The program that will decide a website’s performance will be Web Core Vitals and it will have its own metrics that work together to give an overall score. These metrics will be Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) – we will go into more detail for each one later. Web Vitals are set to be implemented sometime in 2021 as Google wants to give website owners enough time to perform speed optimizations and make the necessary changes to get their virtual properties ready.

Image of tweet by Google Webmasters (@googlewmc) saying that Core Web Vitals will become a ranking signal

Now some people may find this annoying or frustrating since its more work that must be done on their website. However, if we step back and look at what Google’s role is as a search engine then everything becomes clear. Accordingly, Google’s main priority is to provide users with the best content along with a great experience. Web Vitals originates from that aspect of providing a great experience. The world has gotten a lot faster over the last decade and the same applies to visitors on your website. People do not want to sit and wait 10 seconds for a page to load, instead they are likely to exit and visit the next best result for their search. Based on research, studies show that there is an inverse relationship between page speed and conversion rate.

Image titled "Study by Walmart" with three green arrows in the middle pointing up. To the left is text saying "1 SECOND Improvement in Page Speed" and to the right of the arrow is text saying "2 PERCENT Increase in Conversions"

A report by Cloudflare found that for every second that it takes longer for the page to load, the conversion rate drops . Another study done by Section found that 32.3% of visitors bounce when the page takes longer than six seconds to load. This means that when a visitor clicks on your website from Google search results and maybe ends up waiting 7 seconds for the page to load then there is a 32% chance that they will leave the website without visiting any other pages. This makes sense because they don’t want to wait another 7 seconds for every page to load when other websites load within a few seconds. Furthermore, the report mentions when comparing the page load time it found that users visit 5.6 more pages if the site loads within 2 seconds when compared to 8 seconds. From this alone we can begin to see why Google is taking page speed so seriously.

Why Are Web Vitals Being Implemented?

Nowadays many websites are built with WordPress, heck even my website is built with WordPress, because of the simplicity and ease of use with which a person can get their website up and running. The issue arises when websites are built without considering performance as was the case for most people before the announcement of Web Vitals. This also applies to websites built without WordPress that have tons of extra resources being served to visitors. Not many people expected performance to become a ranking signal although there were signs from studies showing how visitors behave when they visit a site that loads fast compared to one that loads slower.

I mentioned WordPress because lots of websites are built with it and its only gaining more popularity. if careful attention is not paid then it can get very bloated very quickly with plugins and external scripts being added without considering how much they impact the site speed. Most of these plugins are also not built with performance in mind, so they load lots of extra code that may not be used along with requesting other resources – all things that increase page load times. Some of the biggest offending plugins even load on pages they are not being used on so they are just dead weight. In the next section  we will discuss web vitals and the different metrics that will determine your site’s performance.

What are Web Vitals?

As I mentioned earlier, Web Vitals has its own three main metrics that determine performance: largest contentful paint, first input delay and cumulative layout shift. These three will work together to give an overall performance score. The main goal is to have a fast loading page, allow the user to interact with it  quickly and lastly not have too much random shifting occur so that if they try to interact with something it does not get moved around or blocked. 

Image titled "Web Vitals Metrics Recommendations". In the middle is a speedometer in blue and black with the needle at about 90%. To the left is text that reads "2.5 SECONDS Largest Contentful Paint", to the right is text saying "100 Milliseconds First Input Delay" and at the bottom of the speedometer is text reading "Less than 0.1 Cumulative Layout Shift"

Largest Contentful Pain (LCP)

LCP is the metric that measures how fast the page loads. The goal is to have the page load in under three seconds. Having lots of code, images and content on the page makes the browser take longer when rendering the page so it directly affects this metric. The LCP measures how long it takes for the text and images to load above the fold or what the user initially sees. The recommended time for this is 2.5 seconds.

First Input Delay (FID)

The FID metric focuses on how quickly a user can interact with the website. If the page loads quickly but functionality gets clunky afterwards then it will affect this metric. For example, if the visitor clicks on a link or a button and it takes a long time for the browser to respond then it will affect the FID metric negatively. Google wants the FID to be less than 100 milliseconds to provide the best user experience.

Cumulative Layout Shift (CLS)

This one is something we can all agree on is needed. Have you ever visited a website and tried to close an ad just to have it move so you end up clicking on the ad which opens a new window? Frustrating right? Well Google is looking to solve that issue. CLS focuses on ensuring that there is minimal layout shift of any visible element. A score of less than 0.1 ensures that you have a good standing with CLS.

Now that we have gone over the metrics that will determine the website’s performance score, we can move onto using developer tools to solve some of these issues.

Illustration of a web page in blue with lines of small blocks to represent code. In the middle is big text that reads "</CODE>" and a magnifying glass hovers over the page.

Using Developer Tools to Find Bloated Scripts or Plugins

The good thing is that we can see everything being loaded when we visit our website through developer tools which are built into most browsers, we will be using Google Chrome for illustration purposes. These tools are very useful for diagnosing your website and finding bloated scripts or plugins so that you can either remove them or find an alternative that will not be as bloated. You can find these developer tools by visiting your website then right clicking anywhere on the page and finally clicking on “Inspect” from the menu that comes up.

Developer Tools Network Tab

Once you click on inspect, there should be a window that pops up somewhere on your screen. Within this window there are various tabs that show different information. For example, the Elements tab shows you all the elements on the page and you can scroll through them to see the overall layout of the page. We are interested in the “Network” tab for now so click on that.

Developer tools tabs and "Network"  has a red box around it.

Once the network tab is open you can refresh the page and all the various scripts, fonts, images, stylesheets, and other resources will be populated. We can now view the resources taking the most time to load by clicking on “Time” within the Network tab, this should sort the load time in a descending list.

Developer tools network tab showing all the various scripts and resources being loaded on the page.

We now have a good idea of what resources are being used on the page along with how long they take to load. Similarly, we can see how efficient the CSS and JavaScript files are with the next tool called “Coverage”.

Coverage Developer Tools

The coverage tool is extremely helpful when it comes to optimizing site speed. You can use this tool by clicking on the three dots within the “Inspect” window we used earlier to view the network tab. From there you want to mouse over “More tools” and from the next menu that opens click on “Coverage”.

Image of Coverage in developer tools that is found under More tools.

We can now click on the reload button and this window will be populated with all the JavaScript and CSS code on the page. It will show exactly how much code was loaded and how much is unused. However, you should note that if there is code on the page that fires after user interaction then this tool will not pick that up. If you want to get the correct amount of unused code then you can interact with the website leaving the coverage tool open after clicking on reload and it will automatically adjust the unused code so the code that did not initially fire is removed from the unused code. You might also want to check the responsive versions of your website to ensure you do not miss anything.

Image of coverage showing various different scripts being loaded on a page. Two of them are CSS scripts with 100% unused bytes that are highlighted with red boxes around them.

Now that we have interacted with the site and got the correct number of unused bytes it is simple as disabling those scripts from loading on the page because they are dead weight. We can see that two of the CSS files are not being used at all with 100% unused bytes, so we should go ahead and disable them for this page. You can take this one step further by double clicking on each script and it will show you all the unused code. From there you can edit the file so that it only contains code being used, thereby reducing the file size and in turn loading the page faster. You must be careful because some scripts load across the whole site, so although that code might be unused on page A, pages B and C could be using it so when you remove the code it breaks those pages. This is a very time-consuming task and for bigger sites it can take a very long time to do properly so better to test on a staging site before implementing on the main site.

Using Lighthouse Developer Tools for Testing Performance

I have already shared two of the tools that we use the most, but this one is used more than the others: Lighthouse. This tool is great for testing your website’s performance at a local level. It will provide insights on how you can improve the performance and our goal is to clear up as many issues as we can from the list of opportunities it provides. You can use Lighthouse by clicking on the “Lighthouse” tab within the developer tools window.

Image of developer tool tabs with Lighthouse highlighted using a red box.

From there we can click on the “Generate Report” button and it will begin analyzing the page’s performance then give a report with the scores and opportunities for improvement.

Results of Lighthouse tool showing the various scores and speeds.
Image of opportunities list provided by Lighthouse.

We would now have our developer go through and implement changes to resolve these issues then do another test until we have gotten rid of as much of these as we can.

Our Process for Speed Optimization

You can only do so much link building so we’ve been doing speed optimization for many of our clients and only saw positive results after. It took lots of testing on our own websites, but we now have a great process that delivers excellent results. First thing we do whenever starting a new speed optimization job is making records of the current scores and metrics. These will be used as a reference point to see where we started and how far we have come.

Creating a Record with GTMetrix

GTMetrix has got to be our favorite for testing a website’s speed. We normally start with GTMetrix and save the results as a reference point. From there we have our developer go through all the issues and resolve them. Starting with the PageSpeed then the YSlow. GTMetrix also has a waterfall tab that is very cool and lets you see how long it takes to load various resources (like developer tools network tab).

GTMetrix Results for speed test done on September 23, 2020. Pagespeed score of 73%, YSlow score of 75%, Fully Loaded Time is 6.6 seconds, Total Page Size is 1.41 MB and 76 Requests made.

One of the most common issues we have seen with lots of websites is not serving optimized images. This could be different things, but mainly adding images to a section where the image is way bigger than the area where it is displayed. This means that the browser must resize that image to fit in that area for each visitor thereby using up resources in the process. Similarly, saving all images as PNG even though they don’t have a transparent background which adds a heavy payload since PNG images tend to be bigger in size. It is best to check the maximum spacing for the area where the image will go and resizing it before uploading to the website along with saving all images without transparent backgrounds as JPEG.

Regarding the various scores and performance details, here are the current GTMetrix averages as of September 23, 2020:

  • PageSpeed Score: 74%
  • YSlow Score: 76%
  • Fully Loaded Time: 8.3 seconds
  • Total Page Size:3.15 MB
  • Requests: 89

With our speed optimization process we tend to get better scores than the average across the board for most sites. Here are some results of work we did in the past.

Picture of three GTMetrix tests the first one is from before work we did and the pagespeed score is 84%, the yslow score is 86%, fully loaded time of 11 seconds, 2.16 MB total page size and 93 requests. After the speed optimization done by us, the test shows pagespeed score of 95%, yslow score of 92%, 6.2 seconds fully loaded time, 1.74 MB total page size, and 41 requests

Here’s another one we did:

An image showing before and after results of speed optimization we did for a client. Before the speed optimization the pagespeed score was 15%, yslow score was 75%, fully loaded time of 6.7 seconds, 8.52 MB total page size and 76 requests. After the speed optimization the results show pagespeed score of 95%, yslow score of 86%, fully loaded time of 2.2 seconds, 1.11 MB total page size and 64 requests.

Creating a Record with Pagespeed Insights

The next best tool for determining page speed performance is Pagespeed Insights. This tool is created by Google and provides metrics that are related to web vitals. You will see results for the following:

  • First Contentful Paint
  • Speed Index
  • Largest Contenful Paint
  • Time to Interactive
  • Total Blocking Time
  • Cumulative Layout Shift
Pagespeed Insights test showing results with a performance score of 21.

Our goal is to get as many of those metrics into the green as we can, so we have our developer go through the list of opportunities and implement the fixes.

Note that not every website can get into the green. There are certain things that just can’t be changed like removing sections from a page to lower the overall page size and removing external scripts like live chat that are bloated but are part of user experience. Depending on how the website was built and maintained, getting the scores into the green might be a challenge. That is why we recommend every website to be built with a budget. This way you know exactly how much content and features you can have without sacrificing the performance.

Difference between GTMetrix and Pagespeed Insights

One thing to note is the way the tests are done and the variables used are different for each tool, so don’t get frustrated when you see amazing scores from one tool and horrible scores for another. The difference between GTMetrix and Pagespeed Insights is mainly the hardware and internet connection used.

GTMetrix

  • 7 Test Regions
  • Fully Loaded Time
  • Real Browsers
  • Connection Throttling (Default Unthrottled)
  • HTTP/2 Support
  • Simulated Devices
  • Consistent Hardware

Pagespeed Insights

  • Test Regions Unknown (likely Geolocated)
  • First Contentful Paint and DOM Content Loaded
  • Likely Emulated Browser
  • Emulated Mobile Network
  • No HTTP/2 Support
  • Unknown Hardware

GTMetrix tests for the pages fully loaded time and uses its own servers. Much of the variables are like Pagespeed Insights, however GTMetrix looks at how long it takes to load the whole page. This means that it also includes resources like videos that can add quite a bit of time to the fully loaded time. More importantly, GTMetrix uses its own servers and high-speed internet connections to perform the test, although they allow connection throttling to simulate different internet connections. These tests are reliable since nowadays most people in North America have high speed internet and decent devices. It also supports HTTP/2 which is an improved version of HTTP/1.1 as it allows multiple requests over one connection, normally resulting in the web page loading faster.

Pagespeed Insights differs from GTMetrix in that it uses real-world data to test your website. This means that it would include slower network connections like 3G and older/slower devices in the tests. Therefore, you will likely notice that the scores may be lower for the test results done by Pagespeed Insights when compared to GTMetrix.

a person looking up in front of a building with both of his hands raised

What Does This Mean For Your Business?

Speed optimization and web vitals have many implications for businesses, regardless of if you are a small or enterprise business. As business owners we are always looking for ways to grow and this is one of them, and the best part is you only need to do this once then maintenance maybe once or twice a year (more if you are an enterprise website). I mentioned at the beginning how Walmart saw a 2% increase in conversion for every second they lowered from the page load time so the speed optimization isn’t just to make Google happy, it will also directly impact how people view your business and the amount of conversions you get.

Another study done by Think With Google analyzed 11 million mobile websites to test the page speed. Although they saw a shift in most of the traffic’s network connections from 3G to 4G, the results still showed that the pages loaded slowly because the website itself was bloated with too many elements. Furthermore, they saw that 70% of the websites took longer than 5 seconds to load the content above the fold, or what the users first see when they visit a website. Remember what I said about the world getting faster? People nowadays want instant results so imagine one of them visiting your website and waiting 5 seconds: One Mississippi, Two Mississippi, Three Mississippi, Four Mississippi, Five Mississippi. Yeah it might not be a lot to some people, but according to research every second matters, especially when people want websites to load in 2 seconds.

Now imagine your competitor read this post months before you did or learned about the direct impacts of speed optimization then decided that they needed to optimize their website’s speed. You might be ranking first for keywords on Google but if your visitors are leaving because your website is taking too long to load and going to the second guy (the one who decided to do speed optimization) then those are all clients that could have been yours.

Image showing results of research done by think with Google. The report shows that as page load time goes from: 1s to 3s the probability of bounce increases 32%, 1s to 5s the probability of bounce increases 90%, 1s to 6s the probability of bounce increases 106%, 1s to 10s the probability of bounce increases 123%.

Research shows that if it took 5 seconds for a page to load then the probability of the visitor going to another page on your website decreases by 90%! What if you don’t have a contact form on that first page they visited and instead generate all your leads through a contact us page? These are all the leads we missed out on that likely went to the competitors.

Image of two arrows: one trending up and the other trending down. A magnifying glass is in the middle of both with an icon of a shopping cart in focus

How Page Speed Affects Your Small Business Website

Page speed optimization doesn’t just affect the users, it also improves your relationship with the search engines. Within a year web vitals will be a ranking factor so it will affect all the keywords you are trying to rank. If you do the speed optimization now then you will notice better rankings when the change goes through. Honestly, the websites we did speed optimization for have already shown an improvement in their keyword rankings so the benefits are already there. This is a win-win for your keyword rankings and the visitors who come to your website.

Here is a scenario of how page speed directly affects your small business. Mike needs to get his carpet cleaned so he grabs his phone, opens Google and types in “carpet cleaning company”. The search results show your company’s website first and your competitor John’s website second. Now Mike clicks the first result, as most people would, however your website has not been speed optimized so it takes 5 or more seconds for the page to load. Mike decides to wait and sees the content talking about how great of a job your company does cleaning carpets, images showing awesome results and testimonials of how you provide the best service. Even with all this Mike is still not convinced and wants to view more pages, but the probability of him leaving has increased to 90% because the site took more than 5 seconds to load. At this point Mike might leave your website and visit the next best result which is John’s website that has been speed optimized. After viewing a few pages, Mike decides that John’s company looks reliable and submits a contact form or gives him a call. I hope your starting to realize just how important it is to have a fast loading website and how much it affects the revenue your business generates.

How Page Speed Affects Your Enterprise Website

Similar to how small businesses are affected with conversions and loss of leads, the same applies to enterprise websites. The difference is how many pages each one has. With a small business there typically aren’t too many pages so the speed optimization can be done once or twice a year, but with an enterprise website there could be hundreds or thousands of pages so you might need to do tweaks monthly or quarterly to ensure that the pages stay optimized.

Moz has a great list of page speed optimizations that you can do. This list includes most of what GTMetrix and Pagespeed Insights will recommend but I’d say to have a look at it and ensure your enterprise website has all of these checked off.

That is all folks, as SEO experts we know that the field is constantly changing, and we are always changing along with it. We have done speed optimization for all our websites and are constantly looking for new ways to further improve the scores. If you have a tip that can help then we would love to hear from you!