Measuring your Core Web Vitals

Google is now page ranking you based on core web vitals. So good performance = good SEO.

You can use Lighthouse as a quick way to measure your core vitals.

There are considerations in measurement accuracy though;

• Lighthouse on your local server will not be accurate as its just a local network.
• Lighthouse on a deployment URL is better but only gives a single data point (your machine). Others will have different devices, browser, machine, wifi.
• A better option is running the metrics test on many users machines. Collecting many data-points.
• Google actually does this for you and can be measured here: https://crux-compare.netlify.app/ — it takes the last 28 days of data.

This image shows real-world performance of 3 sites. For each Vital metric it shows the percentage of users who had a good/medium/poor score on their device.

As an example, you can see that on the Daily Mail site (3rd column) 57% of users had around a 2.8s wait (white-screen) and deduce from this comparison that the Daily Mail needs to work on FCP.

What is FCP Measuring?

You have some documents on your server. You want to get these documents to the users browser. It’s a measure of how quickly you can do that. This is useful here “QUICK”, “SMALL”, “SHORT” (QSS):

• QUICK — server responds quickly
• SMALL — documents are made as small as possible.
• SHORT — the journey from server to browser is as short as possible.

Essentially the way they could fix this is by “responding quicker”. In other words: get HTML, CSS, JS, Images into the Browser faster.

• Use a CDN
• Compress html, js & css files.
• Images — lazy-load, device specific, use sprites.