Understanding Website Performance with Core Web Vitals
Consider the crucial components that go into a racing car to ensure optimum performance, such as the engine, suspension, and various weight and balance calculations.
To get the automobile from the starting line to the checkered flag as soon as possible, each component has a specific function.
We at Reffine believe that vehicle OEMs may and ought to use a similar strategy when creating websites.
We'll walk you through three essential metrics that evaluate the effectiveness of your website in this video.
Largest Contentful Paint keeps track of how long it takes for your website's biggest content components to load. By calculating the computing power and broadband speed you'll need to handle this weight, you may construct a more balanced system.
First Input Delay calculates the amount of time it takes a user to interact with your website, determining how responsive it is overall and making sure that users aren't waiting for a page to catch up with them.
To help you assess the likelihood of unintentional clicks, Cumulative Layout Shift measures how much your website shifts while it loads.
Understanding Website Performance with Core Web Vitals - Video
Source: https://youtu.be/RpvagyPijVc
Understanding Website Performance with Core Web Vitals - Transcript
You might consider website performance a drag race, but it’s not!
Instead, we should think of it more as a rally. Google gives us a few parameters to help measure the overall performance of our websites in various conditions.
Source: https://youtu.be/6MhsY5_dAlg
Largest Contentful Paint
Think of Largest Contentful Paint like a car’s balance and weight, both of which are crucial when it comes to performance!
While producers design lightweight versions of their vehicles, they also work hard to make sure they are well-balanced. For example, engineers aim to build models with a centrally-located engine or the battery placed very low.
Source: 369 km/h on the Nordschleife | Lap Record Porsche 919 Hybrid Evo
It’s the same with a website. Largest Contentful Paint shows the time that it takes your page to load its largest content elements. The more you use heavy objects like animations, videos, and huge images, the heavier your website becomes and the harder it is to load those elements.
If you want to use this kind of content, then you’ll need more computing power and broadband speed to handle that weight.
First Input Delay.
Ok, now let’s talk about the Engine!
Cars need more than just raw power.
Source: https://youtu.be/cDRkHXMHqFo
There’s also a huge focus on engine responsiveness for different situations. For this purpose, rally cars have anti-lag systems while more typical vehicles have a few smaller turbos or small electric compressors.
Source: Colin McRae Pedal Cam
For websites, First Input Delay measures how fast you can interact with the page. It is not only about the raw performance of the site, but also about reaction times. Of course you need to have a fast site, but responsiveness is equally important. When a user is clicking on a web page, you want them to enjoy quick reactions rather than waiting for the desired interaction.
Cumulative Layout Shift
The cumulative Layout Shift is similar to a car’s suspension, which is important for driving fast and comfortably.
Rally cars in particular need to have great suspensions to stay flat so that they can handle corners and holes better.
Similarly, your website needs to look extremely smooth. The cumulative Layout Shift metric shows how much the layout of a page moves when loading. Making it stable helps the user interact with your website quickly without unexpected shifts causing accidental clicks.
By perfecting all three Core Web Vitals, you can build a great experience for your users. Finding the perfect balance takes time and effort, but it’s worth it. Remember, it’s a rally, not a drag race!