Google’s latest algorithm master plan aims to provide a better user experience for web surfers (radical man) everywhere. And it seems like their new ranking factor, ‘page experience,’ will genuinely help in this regard.
Page experience factors in the speed and overall user experience (we all KNEW the latter mattered, but now it’s like, totally Google official hair flick) of a website. And they will look at three specific areas to measure:
1. Loading performance
3. Visual stability
Google’s Core Web Vitals Explained
There are three Core Web Vitals Google will use to measure the page experience of a website. Oh, and they work in tandem with the number list above, e.g., loading performance, etc.
I could explain their reasoning further, but it’s probably best to hear it straight from the horse’s mouth. Take it away, Google:
“Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience.”
The Core Web Vital metrics are:
- LCP aka Largest Contentful Paint
- FID aka or First Input Delay
- CLS aka or Cumulative Layout Shift
If you’re thinking, “But what does it all mean, Basil?” you’re not alone. There’s only one solution: diving further into Google’s three core Web Vitals so we can better plan for them.
What Is ‘Largest Contentful Paint (LCP)’?
Largest Contentful Paint looks at the largest piece of content on a WordPress site and how long it takes to become visible on a user’s screen. To clarify, LCP doesn’t measure your entire page’s loading time, rather the most important or largest element’s loading time.
Examples of content under scrutiny:
● A chunk of text
What’s the magic equation here? Fast loading content = a good page experience grade from Google. And slow loading content well, don’t even go there, people.
You’re already in your scuba gear; now it’s time to bust out your (waterproof) journal and take copious notes ready to add to your free digital planner later because we’re about to formulate a plan to boost your LCP score.
LCP: How To Prepare Your WordPress Site
Whatever the largest piece of content on your page is, ideally, it needs to appear within 2.5 seconds of your page loading. Furthermore, Google doesn’t take kindly to anything taking over 4 seconds. Yikes!
You can use the PageSpeed Insights tool to identify the page element Google is measuring and receive site-specific feedback regarding improving your LCP score. It could be as simple as a slow-loading image, meaning you need to optimize it: a WordPress plugin like Smush will do the job.
What Is ‘First Input Delay (FID)’?
First Input Delay looks at the first interaction a user has on your site and the length of time for the browser/site to respond. FID is essentially testing how quickly a site responds to user input.
Such site response delays occur when the browser is still beavering away in the background on another task. Meaning a page may look like it’s loaded; however, nothing happens when a user tries to interact with it.
Examples of user interactions under scrutiny:
● Tapping buttons
● Clicking on something
● Keypresses intended to initiate something on your site
**Scrolling or zooming don’t count as on-site user interactions.
The magic equation? A fast response time = the thumbs up from Google for page experience. If a user interacts with your site and nothing happens, or there is slow react time, you’ll score a big fat F– which stands for frustrated users and F A I L.
FID: How To Prepare Your WordPress Site
To win the FID game, you need to make your pages as responsive as possible. The new FID metric says that a site should respond to the first user interaction under 100ms for Google to class it as responsive. Anything longer than 300ms is inferior.
Because this metric involves collecting real-world (or ‘field) user-data, a tool like Chrome User Experience Report is ideal. Here you can access the FID information Google is using to rank your site, and just like the PageSpeed Insights tool, it identifies how/if you need to improve.
● Break up complex tasks
Check out our previous post to discover the key developer tools you should be looking for from your WordPress hosting provider.
What Is ‘Cumulative Layout Shift (CLS)’?
Cumulative Layout Shift looks at the visual stability of a website. In layman’s terms, CLS is testing whether things move around on the screen while your site is still loading, and if so, how often it is happening.
When a website has a lot of stuff happening at once, it can be slow to load. And although a button might appear ready to click, when the rest of the site loads, it can cause the button to move suddenly. A total web browsing buzz kill.
Examples of moving visuals/elements under scrutiny:
Where these kinds of unexpected shifts happen a lot, it creates a poor page experience, meaning spoiler alert your site will receive a low grade from Google.
CLS: How To Prepare Your WordPress Site
According to Google’s CLS scorecard, any site layout shift occurring below 0.1 is good, while anything above 0.25 is terrible. Ads and poorly optimized images/videos are two significant contributors to unexpected layout shifts that lead to a crummy CLS score.
While ads provide a decent stream of income for many, they are only worth including if you have heavy traffic directed to your site. If the latter is the case for your WordPress site, reduce these shifts by reserving the largest possible ad slot size.
Also, specify the width and height of an image/video within the CSS, rather than leaving the browser to work it out alone. Run the PageSpeed Insights test to get site-specific recommendations to improve your CLS.