Page Load Speed – Core Web Vitals

Since its inception, Google has always considered user experience (UX) as being an essential part of building successful websites. Page load speed is the first and most important part of that experience. The slower your website loads, the bigger the chance that users will go somewhere else to find the information they seek.

“For users with an average page load time of 2 seconds, the bounce rate is quite low – only 9.61%. This goes up slightly for those with an average page load of 3 seconds, to 13.0%. There is a jump in bounce rate of 4.1% from 3 to 4 seconds, with 4-second page load time having a bounce rate of 17.1%, and a 5.1% jump from 4 seconds to 5 seconds. For those users experiencing an average page load time of 7 seconds, the bounce rate is 32.3%.”

Before 2021, Google measured page load speed as a whole metric, measuring the entire time it took a page to load – essentially measuring loading performance. The metric in Google Analytics was for page load time. But there were other major issues with page load that needed to be addressed, such as visual stability and interactivity. As of May 2021, there are now three metrics to describe page load user experience.

Enter Core Web Vitals

Largest Contentful Paint (LCP) measures loading performance. How long does it take for the largest element to appear on the screen? Over 70% of the time, it has to do with unnecessarily large images on the page.

First Input Delay (FID) measures interactivity. How long does it take before a user can begin interacting with the page?

Cumulative Layout Shift (CLS) measures visual stability. How often do content blocks, whether images or text, move during page load?

LCP: To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

FID: To provide a good user experience, pages should have a FID of 100 milliseconds or less.

CLS: To provide a good user experience, pages should maintain a CLS of 0.1 or less.

In April 2021, Google announced that page experience was now a website ranking factor. Meaning that the faster the page, the better Google would rank you in the search engine results page (SERP).

Measuring Core Web Vitals

To see how your site is performing under the new Core Web Vitals metrics, we recommend setting up a Google Search Console Property.

Once you have access, you will see Core Web Vitals under Experience in the left-hand column.

You will see it’s split into Mobile and Desktop. Your focus should always be on optimizing mobile, since Google switched to a mobile-first index back in 2019. This means that Google ranks you on the mobile version of your site and mostly ignores desktop. This is due to mobile traffic on Google overtaking desktop many years ago.

If you wish to look only at a particular page, you can use the developers function in Google PageSpeed Insights or the Lighthouse Chrome extension.

Why Core Web Vitals Are Important

• They are a verified ranking factor to increase visibility in SERP
• Faster pages mean more users and therefore conversions
• Fast pages mean lower cost per click (CPC) for paid search campaigns

Focus on LCP

We’ve all experienced it. The client is seeing an increase in page load time on a major campaign landing page. Our team goes to check the page to prioritize issues, and we see a huge 1MB+ image attempting to load in the viewport. It’s painful.

Unsurprisingly, Largest Contentful Paint is the metric that plagues most sites, mostly due to issues with large images. When loading a page with a large image and a small amount of text, the image is most likely to be considered the LCP.

Since this is the largest piece of content to load on your mobile device, it’s going to make a big impression on the user. By getting that block to load quicker, your site can appear much faster. More often than not, it’s as simple as optimizing that image itself.

In the example above, you can see how the LCP changes throughout page load, until finally landing on the image that appears at the top.

Through testing, we can easily identify what the LCP ultimately will be and optimize accordingly.

Stay tuned for our next blog: Optimizing Images using WebP to improve LCP.