web core vitals LCP,FID and CLS

What do LCP, FID and CLS have in common…

web core vitals LCP,FID and CLS

For WordPress website owners the web core vitals will all become part of the controllable ranking signals for Google….

What are they and why are they being included in the May 2021 Google update, let’s find out….

What are the web core vitals

They are the three new kids on the block…

The ones everyone is talking about.

Speed (LCP), stability(CLS) and interaction(FID)….

It is all about the user experience and the users interaction with your site

These  three are added to the other ranking factors we take notice of currently…

The https, mobile friendlyness, secure browsing and the intrusive interstitials ( the ads and popups that really get in the way without a close)

What do you need to know about the web core vitals

Google has done a lot of testing on these page experience elements and found that 24% of

google testing is like examination under a microscope

are less likely to abandon the site if all these three metrics are met.

Well who wants to wait for a page to load more than 2.5 seconds, or the page to jump, or not being able to click on a button.

There are a lot who are trying to meet the requirements…google has reported that there is 70% increase in the use of Lighthouse and Google pagespeed insights( see later in tools)…

What else is there to take notice of

Remember that the Google ranking algorithm is made up of over 200 elements and changing all the time.

So how much of an effect are these going to have…

When John mueller says having all these metrics green will give your site a boost in rankings, most of the large sites are taking notice…and so should the smaller ones.

But there are limits to what you can do within WordPress due to the way it works…wordpress is like fittin pieces of a jigsaw together

You add plugins for extra functionality and these have overheads as they are developed independently.

And you have no control over how it is coded…

Same with the theme you chose…

You hope it is fast and well coded but…..

So take care of what you can for ranking and the other parts hopefully will come together…

Lets have a look at the three in depth

Lcp – largest contentful paint

What does this mean, what is the largest contentful paint ….

largest contentful paint

 

Well…Google has found that user interest only really comes alive when a large image or the largest piece of content appears ‘above the fold’….

What’s ‘above the fold’….

That bit you see of the website before scrolling…the same as newspapers when they are folded in half…

Google used to take the first meaningful piece of content, but had a lot of difficulty trying to determine what was meaningful….

So went for the image or content block instead….

Is it is looking for the largest block to appear on the screen and wants it to happen within the time period it has determined…

So what are the limits for the largest contentful paint…

For good content then that is less than 2.5 seconds….

For content that needs improvement on that is 2.5 seconds to 4.0 seconds …

And anything above 4 seconds is poor….

So if you page takes a while to load then you maybe in the poor category…

We will find out later what tools you can measure this with and see what can be done…

In the meantime let’s look at the second of Google’s core web vitals

Fid- first input delay

The First input delay is a measure of the time the browser takes to respond to the user’s interaction…first input delay

The faster the better…

This is the interaction that can happen while the page is loading…

Any delay clicking a button makes the page appear unresponsive…

As the coding size of pages grows with more and more elements on them then they take longer to load up and several background tasks can take place at once…

Google wants any user interaction to be responded to immediately and this is the score for FID…

A good score is less than 0.1 seconds

A ‘need improvement’ is between 0.1 and 0.3 seconds

Anything slower than 0.3 seconds is a poor score and should be worked on….

But if there are no interactive elements on the page Google has a hard time getting any score for this metric…

I can see this one changing in the future for something else they can measure on each page.

Google is recommending measuring or using TBT ( total blocking time ) as an alternative to this ‘in the field’ measurement…

And that brings us to the last of the three core web vitals

CLS- cumulative layout shift

Now this one i agree with….cumulative layout shift

You know when you open a page and start reading only to have the page jump in the next second….

What you were reading is now at the bottom of the page rather than the top….

Well you have just experienced CLS or cumulative layout shift….

The shifting of elements due to late loading of other elements with no space allocated for them…

They quite literally barge their way in making room for themselves…

The biggest culprits are ads and images…

The other element that can shift it slightly is the font changing to speed up loading….

If it is a large font, meaning a graphic hungry font, then you can substitute a simple one at the start and then change it after the page has loaded…not ideal, but gets the page loaded…

But if the two fonts are not really comparable in size then it will shift all the text around.. causing interruptions for the viewer….

Google has calculated that if all of the layer shift is less than 0.1 then that is good…

If it is between 0.1 and 0.25 then it needs work

And above 0.25 is poor….

So there you have it, the three newer elements that will affect your ranking that you can have control over….

How to measure them

So how do you measure them….

measuring the metrics

What’s the cost….

And what do you do with the results…

Taking these one at a time….

How do you measure them…

There are several tools that can be used …

Google supplies one of them free of charge…

Called pagespeed insights…

You will need to do the test on each and every page on your site…

And do it more than once…as the scores can differ..

Sometimes due to caching ( storage of the webpage) and other factors…

So an average of three or more scores may give you an idea…

And you are really looking at the mobile score mainly as this one tends to be the slowest with its limitations…

Another tool is gtmetrix, but with the free account you only really get to test over the desktop, and this is normally a fast score.

Webpagetest is another site to give you more information. but i have found that it doesn’t follow Google’s rules…

lighthouse program measures the google vitals

Sometimes you look a lot better on there than the results you get from Google…

The last one i tend to use is in the chrome dev tools…

They have a program called lighthouse in their dev tools ( click on the three dots>>more tools>>developers tools ( or ctrl +shift+I) and select lighthouse and generate report)…

The one thing to remember with this is if you use your chrome browser as a tool that has a lot of addons, these can affect the score…so use a new incognito window without the addons to test the site…

Google also references to this tool but does other things as well…

I always get a lot better results from the chrome lighthouse that Google’s pagespeed insights….

You also have access to a core web vitals report within your search console account, but this relies on user data and if no one has visited then there will be no data….

With this report you can see at a glance how your whole site is doing and clicking on the various boxes at the top shows the information under the graph…it makes it a bit easier once you have some data to get an overview of how your site is performing….

Don’t worry if you get spikes as Google may be testing your site when other things like updates are going on….

But for me the best way to test is to use the pagespeed insights tool and keep track of three or four pages you know have a lot of images or videos to see how they perform over time.

What can i do

There are some simple things you can do to help yourself…

Keep image file size as small as possible..

So no more 5mb images they all now want to be under 50kb ( 1000 times smaller in file size)keep everything updated

Reduce the number of plugins to what you really need

Check they are all updated and still active.

Check your theme is currently supported. i have worked on sites that had a theme not supported for the last three years and that one was slow…..( new up to date theme and a few more tweaks and up shot the pagespeed insights score)

Use a cache plugin to assemble the pages…

But if you really are not techie, then you may need some help to sort out these issues.

Feel free to contact me to discuss any requirements you have…..

What now

These updates will be rolled out May 2021, and will slowly affect rankings until the end of the year…

I suspect google will change the way they carry out these metrics over time, adding new ones and changing the parametersif you need help then get in contact

So these new core web vitals are going to be part of the new web space, giving a good user experience.

With fast loading mobile pages, visual stability and fast interactiveness.

So it is now down to site owners to take charge of the things they can affect to help them stay high in the rankings.

If you need help with keeping up to date with Google’s changes then why not signup below and be the first to know the signal and how to deal with them…

Thanks for reading

phil

About the author

Phil has been working online since 2015 and working with computer for longer than he can remember..
He has successfully built a few sites that are ranking highly...
He is now experimenting with techniques to see how far google has gone with the ranking process, with an eye on the speed of the sites along with the web core vitals...
His philosophy is 'if you can control it then do'....
If you want Phil's help then please use the contact page to reach him...

Leave a Comment

Your email address will not be published. Required fields are marked *