Check out the Neoreef blog for the latest industry insights and guides.
There is a new ranking factor in town that we like to call the three prong Google core web vitals. According to Google, these three core web vitals are critical to the strength of your search engine rankings. Google’s John Mueller said recently that all three of these core web vitals (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) need to be met in order to qualify for the ranking signal boost Google is rolling out this May.
These core web vitals are Google’s new benchmarks for seeing whether or not a site page provides a good user experience.
The first of these core web vitals is what it calls largest contentful paint (LCP), which measures the speed at which a page’s main content loads-- a typical LCP for a site’s landing page should be lo
Largest Contentful Paint (LCP) is a gauge of how long it takes for a site page’s main content to download and be ready for user interaction.
LCP is usually measured by either the largest image or content on a site page that the user can see. Some other typical elements that LCP measures are images, such as video posters and background images, as well as text elements like paragraph tags. Furthermore, LCP can be HTML elements such as <main>, <section>, and <div> elements.
There are two types of LCP scoring tools, Field Tools and Lab Tools, you can use.
Field Tools represent the actual measurements of the site, while Lab Tools give you a virtual score based on a simulated crawl of your site, using algorithms that simulate the Internet conditions a user usually experiences on their desktop or mobile device.
As for how you can optimize for LCP, you should look into these four main factors, such as slow server response times, render-blocking JavaScript and CSS, resource load times, and any client side rendering that could possibly be holding you back from a high LCP score.
Usually adding caching, optimizing images, resolving render blocking CSS and JavaScript, and pre-loading certain assets can help optimize for a great LCP score (of 2.5 seconds).
Have you ever clicked on a button or link on a website, but it doesn’t seem to respond right then and there, or it feels like it is taking forever to load? This tad of a delay can leave a bad first impression on users. Any user with this bad taste in their mouth may end up not visiting more pages on your site, or worse, never come back to your site.
That dilemma can be thought of as the First Input Delay (FID), which measures the speed at which users are able to interact with a page after landing on it. Google expects that first landing should usually take around 100 milliseconds (ms).
If your FID is between 300-600 ms, then your FID definitely needs some improvements. And, if your FID is slower than 600ms, then that is very poor. According to web.devs, most interactivity issues on the web occur during page load and focusing on optimizing the first user interaction plays a huge factor in the overall interactivity of the site.
As for what causes FID issues, most of the time, JavaScript is usually the culprit since your browser is busy parsing large files of JavaScript or loading style sheets in the background. In order to keep your FID at its most optimal level, consider the content that is frequently being requested by your audience, see if other network requests are running in the background, and look at what elements on your site most users are clicking on quite frequently.
Ultimately, it is important your FID score is working efficiently and effectively, since this core web vital is critical when it comes to user experience and lasting expression it can have.
Cumulative Layout Shift (CLS) is a Google metric that gauges a user experience event. CLS is the unexpected shifting of the various elements on a webpage as it downloads. The types of site page elements that result in a shift are usually fonts, images, videos, forms, and buttons.
According to Google, there are five main reasons CLS happens:
1. Images without Dimensions Images and videos need a width and height dimensions in the HTML, or same aspect ratio for responsive media
2. Ads, Embedded and iFrames without dimensions Style the element where the ad is going to show, such as in a div with specific dimensions within code
3. Dynamically injected content Linking a YouTube video or article as an embedded object can cause CLS
4. Web fonts that cause Flash of Invisible Text (FOIT) / Flash of Unstyled Text (FOUT) Prevent either of these is by using rel= “preload” in the link being used to download that web font.
*Tip: Using the Lighthouse tool in Developer tools can help diagnose what’s causing the issue
5. Actions having to wait for network response before updating DOM CLS can happen during the development stage of a site, as a developer or designer you should keep track and measure of this to make sure not many elements are being rendered and loaded on a site’s cache.
Calculating CLS involves two metrics or events.
The first one is called impact fraction, which is a measurement of how much space an unstable element takes up on the viewport, which is what you see on a mobile device’s screen. Think of impact fraction as when you click a button on a site and the viewport shifts-- the total space that element ends up occupying, from the location it was originally in the viewport when it first rendered, to where you are now is the impact fraction.
As for the second metric, distance fraction is the amount of space a page element has moved from the original position to the final position. For instance, if a page element moves 25%, you can take the impact fraction, which is 75%, and calculate the Cumulative Layout Score. That score would be 0.1875, which translates to a CLS score of 19. While there is some math that goes into CLS, what is important to take away from this is that CLS plays a pivotal part in gauging user experience.
Now that we know how to calculate CLS, how do you measure it?
Well, there are two avenues you can take to measure your CLS. Google calls the first way the Lab and the second way the Field.
As for the lab, this simulates what a real, actual user sees when downloading a web page. In the lab, Google uses a simulated Moto G4 for generating a CLS score. Lab tools are best used for understanding how a site’s layout may perform before making it live for users, and also gives publishers the chance to test a layout for any issues. Lab tools include both Chrome Dev Tools and Lighthouse.
These three metrics may seem complicated, but Google has made it fairly straightforward in what you should do when you encounter a problem with the items we’ve discussed here today.
The first thing you should is your Search Console, which has a new report called Core Web Vitals. In this report, Google shows you which URLs they have in their index, as well as whether they are bad, need improvement, or are doing well. So if you have URLs that aren’t performing well, look into Page Speed Insights, which links to your URLs in console.
Page Speed Insights will help pinpoint what roadblocks your Core Web Vitals are facing. This information can be fairly technical, so you may want someone such as a web developer or an expert on this subject matter to further look into the issue.
Most importantly, you will want to go through and address each identified issue to improve your Core Web Vitals score. And if you do not have access to Search Console, Google has made these reports accessible in Lighthouse, Chrome Dev Tools, and Crux API.
We have a couple of months until these Core Web Vitals become a major factor in how your site ranks, since the new ranking algorithm is set to go live in May. During this time, it is crucial you take note, make some changes if you need to, and get ahead of the rest of the game while you can.
Neoreef addresses the two biggest issues with websites: lack of control and lack of support. We enable easy control of your website, while a dedicated support team provides you with training, mentorship, and specialized skills.