google webcore vitals i'm going to attempt to try and explain in the most simplest way as i can what this is all about and why it's important for you as a website owner because google will start implementing these new search engine results algorithms and 2021 google webmaster central blog had an article that was posted back in may of 2020.
title evaluating page experience for better web at the time i read this i didn't really understand what i was reading and kind of put it aside but recently there's a lot of buzz on the internet about the new google web vitals core vitals that will begin to take place in .
2021 as you can see that google tried to explain how they want to give the visitor a better web experience in whatever website they're visiting and they're providing early looking upcoming search ranking change that incorporates these experience metrics in other words google is going to change their algorithm of how they're going to rank your website next year and another import interesting point was they no longer will use amp as a requirement in their search engine results you'll still be supported but it will not be used according to what i read here so i find it very interesting if you want you can continue to read more in this blog article but let's deep go into a deep dive of the webcore vitals so let's take a look at the core web vitals just click on the link on the blog we're just reading it'll take you to the section called webcore web vitals and there are three new factors that google will use in ranking website in 2021 and don't be confused we'll explain this terminology soon in this more simple way the first point is called largest contentful paint the second point is called first input delay which is your interactivity and the third point is called cumulative layout shift which is your visual stability cumulative and you can read more as you scroll down but as i explained earlier we want to keep it simple let's break each of these three factors down in the simple manner let's take a look at the first factor which is called largest contentful paint or lcp whether this is measuring the load time of let's see what google how google defines lcp there we go the render time the largest image or text block visible within the viewport which can be an image svg element video can be a background image a block level element but normally it's a header your header image or your title of your article or post how fast it will load in the viewport or the browser that you're using this second factor is called first input delay so let's take a look at fid and what fid is let's scroll down and see what the definition is f id measure the time when the user first interacts with the page when they click a link tap on the button or use a custom javascript power can show the time it takes the browser to able to process it so you can see it in your browser basically when you click on the link etc you should see the results in 100 milliseconds in this example let me show you how first input delay works as i click no matter what link i click on within 100 milliseconds you know something appears so let's open the blog and goes right to the blog in less than 10 100 milliseconds the final and third factor
we'll take a look at is called cumulative layout shift which is your visual stability and first let me stop this video as this is the example we're gonna use that google's gave us to explain how this works there we go have you ever been reading article online if something suddenly changes the text move where you lost your place you tap a link and boom you end up clicking something else okay here's an e-commerce example order confirmation you have 56 items and maybe this is an error you do not want 56 items so you want to go back to clear that before you place your order because the order is incorrect see you have two choices place my order or no go back real simple right so you're sitting there thinking okay i'll go back and watch as you go down watch the page shifts and you ended up clicking submitting owner and you're trying to click no go back and then it's too late and you're panicking and the order has been placed with 56 items that you did not want so this is an example of visual shifting on your website now you may be wondering how can i test my website for the these core web vitals well google provides or they give you suggestions on web tools that you can use to check your web vitals page speed insights chrome ux report search console chrome developer tools google lighthouse and there's also a google web vital extension for the chrome browser so we're going to not we're not going to go through all these tools but just most likely you try out that extension because it does test all three vitals of your website and also the page speed insights what i did next is run a simple gt metric speed test my website as you can see page score is 93 loaded time is 2.7 seconds of course my i noticed my uh page size has increased of 973 kilobytes as you can see everything is rated a mostly so it appears that you may have even though you have a fast website it may not pass the web vital core metrics the first two that we are going to take a look at the simplest tool to use it's a extension for the chrome web browser called web vitals i already have it installed that's why it says to remove from chrome normally it would say install and once installed you'll see the a box in your toolbar normally it's gray because it's not it's dormant but once you open a website whatever website as it crawls the website the gray should change to either green or red in this case okay it's changed to green and as we look at the cumulative shift layout does not pass on this website um i just refreshed the website and now it it's all green so this extension is just a quick check and you'll look at that tool that goes deeper into analyzing your website okay let's take a look at another or let's test another website with this extension let's look at my own website now it tested and there's a red which means it failed the largest content for pain 2.1 you know let me try and refresh this page and see it changes these other tests my website ran satisfactory see now it's green and the rendering largest contentful paint dropped to 2.32 seconds which passes i'm not sure why it does that let's take a look at another website here it's all green and all three metrics of the web vital core has passed so i'm not sure how accurate this extension is but it kind of gives you a starting point of where you are at now let's take a look at the second test page speed insights by google now in this test i think it will be more detailed and and give you more information and it takes a while to render websites so i'm gonna pause and restart once it's completed and here we go the same website that we looked at 500 pixels as you can see it failed two metrics past the first input delay and the cumulative layout shift is borderline and it goes deeper into showing you where your problems are as you can see let's take a look at particular metric open it up and it'll tell you in this case what images are your problem images javascript unused javascript files so this is a more stricter test a little bit more difficult to pass let's take a look at my own website see how bad it is okay it's not there's no green but there's this borderline first contentful pain as you can see the various metrics let's look at the remove unused css it will show you where you know where your problem areas are yes this test is much more difficult which i believe would be a more truer indicator of where your
website stands so developers will have a much you know we'll be busy trying to meet the web vital core standards in 2021 let's take a look at the other website that we looked at previously new york times see where this particular website stands not too bad two green two passes some one failure in the community layout shift as you can see it there's work here to be done here also yes um lots of work to do for developers i hope with this video you can now understand the three metric basic metrics of what the webcore vitals will require in sometime in 2021 i think eventually these terminologies will become commonplace down the road so more to come in future videos so thank you for