Improve your web site performance with the Core Web Vitals
What are the 3 Core Web Vitals?
Core web vitals are part of the new page ranking signals rolling out starting in June and will be completely integrated into the page rankings for Google later in the summer of 2021. Understanding the Page Experience and everything it entails means understanding how to get your users the best experience possible.
LCP – Largest Contentful Paint
The Largest Contentful Paint is simply the time it takes for the largest element to appear on the screen. These elements might include images, videos, or other types of content.
LCP is one of the core web vitals which measures the point at which the largest content element appears on the screen. Remember, the Largest Contentful Paint doesn’t measure the time it takes for your page to load fully, it measures the time the Largest element takes to load.
For example, if you have a simple web page with just a block of text and a large image, the large image will be considered the LCP. Since the image is the largest piece of content to load in the browser, it’s destined to make an impression. By getting the image to load faster, your web site can appear much faster. Sometimes, optimizing a page might just be as simple as optimizing that image itself.
Prior to the LCP, there were metrics like First Meaningful Content, which measured the time when the first piece of content appeared on the screen that meant something to the user. Unlike the name suggests, the FMC metric often couldn’t figure out which element was the most meaningful that appeared on the screen. As a result, the FMC was not giving meaningful data.
Now you know what the LCP is you can start to optimize for it. According to Google, the LCP needs to load within 2.5 seconds and anything over 4 seconds is considered to be performing poorly. LCP is also dynamic as it will determine the largest element as the page loads.
FID – First Input Delay
Who isn’t looking to offer their users a better page experience?
The time it takes for the browser to respond to the user’s first interaction is measured with First Input Delay. The importance is the faster the browser reacts, the more responsive the page will appear.
Page Responsiveness is important if you are looking to provide a better page experience for your users.
Delays happen when the browser is still working in the background. This means the page has loaded, and everything looks just fine. But when you touch the button, nothing happens! That’s a bad experience, and it leads to frustration. Even with just a small delay, your site might feel sluggish if not unresponsive.
To speed up the process between getting the page content on the screen and making it interactive, we need to focus on the FID.
The FID measures all interactions that happen when the page is loading. These are input actions like taps, clicks, and key presses. Interactions like scrolling and zooming are not included in the FID.
Google’s new web core metrics call for an FID of less than 100ms to appear responsive. Anything between 100ms and 300ms needs improvement. Any scores above 300 ms can be viewed as performing poorly.
After testing the FID you get a score and you can work from there.
GTMetrix.com is a tool we recommend to do a deep dive into your FID score.
Google Tools from Google Web Console can also show you more about your web site’s FID.
Key Things You Need To Know
One thing you need to remember is that you cannot measure the FID without user interaction. This means that Google can’t predict the FID based on data they have from the lab — they need data from real users. This also means that data is less controllable than lab data. As Google collects data from users will all kinds of devices and who uses it in different ways and environments. This is one of the reasons why you sometimes see data change.
CLS – Cumulative Layout Shift
The third Core Web Vital is a brand-new one: Cumulative Layout Shift.
This metric tries to determines page stability as elements load onto your screen. CLS looks at how often elements move around while loading and by how much.
For example, a button loads on the screen, inviting users to click. In the background as the page is still loading, and there’s still a large content area being loaded. The result is when the content finally fully loads, the button pushes down a bit — just as you want to tap the button.
For web sites with ads this is a big issue. Ads are a lifeline for many sites, but these are often loaded so poorly that user frustration runs high.
With complex sites, so much is going on that these are heavy to load, and content gets loaded whenever it’s ready. This can also result in content or CTAs that jump around on the screen, making room for slower loading content.
Take CNN.com, for instance. We will use CNN.com as an example site to test against because it is known for being complex and slow to load.
News websites are typically very complex and slow to load, and CNN is no exception.
It scores poorly on a PageSpeed Insights test. When loading this page, it leads to many elements jumping around, and it takes a while for it to stabilize and be useful. And because users aren’t always patient, they try to click a button when it appears on the screen — only to miss it because a big ad appears in the spot where they just saw the button.
CNN.com doesn’t score too well in PageSpeed Insights. You can see it found five moving elements that contribute to the CLS
What you need to know
The Cumulative Layout Shift takes all the points at which layout shifts happen and calculates the severity of those movements. Google considers anything below 0.1 good, while anything from 0.1 to 0.25 needs work. You can consider everything above 0.25 as a poor score.
The scores for CLS
Of course, the score only looks at unexpected shifts. If a user clicks the menu button and a fold-out menu appears, that doesn’t count as a layout shift. But if that button does call a big change in design, you should make sure to keep that clear for the user.
Another element is also responsible for large layout shifts: images.
Developers don’t always specify the width and height of an image in the code and leaving it up to the browser to figure out how the image should appear on the screen. On a page with some images and text, the text will appear on the screen first, followed by the images.
If the developer hasn’t allocated space for images, the top part of the loading page will be filled with text, prompting them to start reading. Images load later and appear in the spot where the text was first. This pushes the text down, moving elements on the page around and getting the user agitated. So, always specify the width and height of the CSS images to reserve a spot for the images to load.
Resources to test core web vitals on your web site:
Updating your site or building new web properties with these core web vitals in mind will prepare your site for this upcoming page experience update and future proof your web site for an optimal experience for your web site.
[jotform id=”210447440377050″ title=”Blinkstream – Team Member Call Back Form”]