Google PageSpeed scores are getting more attention by clients who are being educated in the fundamentals of SEO. Google has also announced that they will be adding "Core Web Vital" scores to their ranking factors in mid 2021.
Important details about Google PageSpeed
At this time, the cumulative Google PageSpeed score is not a factor in rankings. Overall pageload speed is and is measured not by Google's PageSpeed tool, rather actual field data collected when users are visiting the site.
The "Core Web Vital" scores are what Google will be incorporating into their search rankings.
Core Web Vitals consists of:
The "Core Web Vital" scores are what Google will be incorporating into their search rankings.
Core Web Vitals consists of:
- Largest Contentful Paint (LCP) - How long does it take for the largest element on the screen to fully display
- Cumulative Layout Shift (CLS) - How much does the layout shift (as a percentage of the total visible elements) while loading
- First Input Delay (FID) - How long before a user can interact with the site
Important note: Google PageSpeed can report "Lab Data" and "Field Data." Lab data are the measurements that the Google PageSpeed tool records when doing a simulation. Field Data is recorded by users actually interacting with the site. If the site doesn't have enough traffic, PageSpeed will not report field data.
Lab Data is not used as a search ranking factor, only Field Data is. Lab Data is typically poorer performance compared to field data especially on B2B sites where end-users likely have modern technology and fast internet connections.
Optimizing for a high cumulative score or specific lab data results are vanity metrics. What's most important is making the site as optimized as possible without negatively impacting other aspects of the user experience.
Google also is not considering CWV on a page by page basis. Rather they are looking at the overall score across all pages, with the goal of having a "passing score" on over 75% of all page views.
Largest Contentful Pain (LCP)
This is measuring how long it takes for the largest element on the screen to fully display. Typically this is a hero/banner image but it could be a block of text if the element is large enough. This can be different on mobile vs desktop based on what's visible.
Target: Google recommends 2.5 seconds or less
How to optimize
There are two primary ways to reduce LCP. Reduce the download size of the largest element or prioritize the loading of the largest element (i.e. load it first)
You can identify what is likely the largest element by using Chrome Dev Tools, switching to the performance tab and clicking the reload button. This will record the loading of the page and devtools will add a LCP box where it measured the completion of LCP. Hovering on the box will show you which element it considers the largest element.
Using the same tool you can see which assets are loaded before the largest element and in theory, defer them to load after.
Reducing the download time
Target: Google recommends 2.5 seconds or less
How to optimize
There are two primary ways to reduce LCP. Reduce the download size of the largest element or prioritize the loading of the largest element (i.e. load it first)
You can identify what is likely the largest element by using Chrome Dev Tools, switching to the performance tab and clicking the reload button. This will record the loading of the page and devtools will add a LCP box where it measured the completion of LCP. Hovering on the box will show you which element it considers the largest element.
Using the same tool you can see which assets are loaded before the largest element and in theory, defer them to load after.
Reducing the download time
- Serve appropriately sized images for the device/resolution (i.e. responsive images)
- Serve optimized/compressed or nextGen image formats (webp, SVG)
Prioritize the largest element
- Remove render-blocking resources
- Use preload tags to preload images, fonts, etc...
-
<link rel="preload" as="image" href="https://h7j5e2v2.rocketcdn.me/wp-content/uploads/2020/12/new-hero-homepage-opt-2a.jpg" imagesrcset="https://h7j5e2v2.rocketcdn.me/wp-content/uploads/2020/12/new-hero-homepage-opt-2a-1024x448.jpg 1024w" />
-
- Defer any elements that are loading before it
- Javascript, fonts, other images, etc...
Cumulative Layout Shift (CLS)
Cumulative layout shift is how much the layout shifts during load. It's measured as a percentage of overall screensize. Does the layout shift 10%, 20%, 50%?
The common causes of a high CLS include webfonts that load larger / smaller than the fallback. Loading images that push elements into new positions, and pop-up elements like:
The common causes of a high CLS include webfonts that load larger / smaller than the fallback. Loading images that push elements into new positions, and pop-up elements like:
- Chatbots
- Cookie notices
- Pop-up offers
Target: Google recommends 10% shift or less
How to optimize
The primary methods of optimizing include:
- Set fixed dimensions on elements like logos, hero images, etc... so they retain the desired space during load
- If using a webfont, select a system fallback font that's similar in size
- Load any pop-up elements right away so they appear during the page load and not after
First Input Delay (FID)
First Input Delay measures how long it takes before someone can interact with or click on your site.
In general, input delay (a.k.a. input latency) happens because the browser is busy doing something else and can't respond to the user. For example, parsing a large javascript file could prevent the browser from responding to other clicks.
Target: 100ms or less
In general, input delay (a.k.a. input latency) happens because the browser is busy doing something else and can't respond to the user. For example, parsing a large javascript file could prevent the browser from responding to other clicks.
Target: 100ms or less
In general, most informational sites have no problem with this metric. Keeping javascript to a minimum and deferring execution where possible is all that's needed.
Other best practices
- Use Google Tag Manager to deliver third party tracking pixels (like Facebook, LinkedIn, HubSpot, etc...) GTM helps defer script loading and reduces issues with page speed scores.
- Lazy-load
- Images
- Video embeds
- Large amounts of DOM elements
- Self-host assets where possible:
- Rather than use Google's CDN for fonts, load them on the site
- Replace addthis.js with a local sharing tool