Core Web Vitals Explained
Core Web Vitals are the newest standard when it comes to measuring web performance.
For some time we have heard about measures like Time To First Byte (TTFB), Load Time, Page Weight, etc. We have also heard about the adverse impact that poor performance has on users, conversions, and ultimately, sales.
Core Web Vitals goes a lot further. It is not just about speed of delivery. It’s also about how responsive a page is, how fast the content is readable, or usable, and how jarring the progressive rendering of the page is.
Brought into the limelight by the talented boffins at Google, Core Web Vitals is set to take front and centre stage, because it will not only affect how your users interact with your site, but also how they find it, because it will affect your search rankings too.
Core Web Vitals consist of three things:
- Largest Contentful Paint (how fast does it load?)
- First Input Delay (how long before I can use it?)
- Visual Stability (is it all nasty and jerky as it loads?)
Those who wish to learn more about this complex topic can go as deep as they like at https://web.dev/vitals/.
Core Web Vitals measure: speed, responsiveness, & user experience
Largest Contentful Paint
Largest Contentful Paint (LCP) is the measure of how long it takes for the bulk of the content to arrive. It is not the first content, nor necessarily all the content, but the biggest chunk of content. As of day one of The Internet, content is still king. That is why people come to your site, and they want it quickly.
First Input Delay
First Input Delay (FID) is the measure of time between the point where a user might attempt to interact with a page and the time when it will actually react. Often when a page is loading, the content is rendered, then fonts are downloaded, then more CSS, and the browser is busy re-drawing the page as assets load.
Cumulative Layout Shift
Cumulative Layout Shift (CLS) measures the amount of unexpected shifts in the layout of the page. For example, when some CSS kicks in and headings get bigger, or a web font loads and all the text jerks as it is re-rendered. Images can often make a page jump when loaded, if the placeholder for the image has not already claimed the space the image needs.
These three measures are quickly becoming the essential measure of web performance. There are tools to measure them built right into your browser, or you can use veteran services such as https://www.webpagetest.org/webvitals, so there's no reason not to see where you stand.
You can’t get good scores on them without having already done your homework and made sure that you are already employing good practice. Their impact will be felt in the war for the top ranking search spots in the coming months, so now is the time to act. Your users will thank you.
Want to know how to improve your website's performance?
Why not talk to Annertech about to make your website faster.
Anthony Lindsay Director of Managed Services
With decades of experience, Anthony leads the Annertech Managed Services Team, delivering top quality design, development, and, ultimately peace-of-mind services to all of Annertech's wonderful clients.