How to make your website load fast (Core Web Vitals)

01What the Core Web Vitals are

The Core Web Vitals are three metrics Google uses to measure the real experience of people using a page. They do not measure “how fast everything loads”, but three specific moments: when the important thing appears, when the page responds to a tap, and whether the content moves without warning.

According to web.dev, a page passes when it meets all three targets at the 75th percentile of visits, with mobile and desktop separated. In other words, it has to work well for the great majority of visits, not just on your own computer.

02Do they affect rankings?

Google “strongly” recommends achieving good Core Web Vitals and says they align with what its ranking systems seek. But it does not promise a rise in position: it is one part of page experience, alongside other factors.

The practical reason to improve them is simpler: a slow website loses visitors before showing them anything. Also read the guide on how to rank your website on Google to see where speed fits in.

03How to measure your website before touching anything

1. 1

   Open PageSpeed Insights and analyse your home page and a service page. Look first at the real user data, if it appears, and then at the lab analysis.

2. 2

   If your website is in Search Console, open the Core Web Vitals report: it groups your URLs by status and by mobile and desktop.

3. 3

   Note the three current values and the page where they are worst.

4. 4

   Change one thing at a time and measure again. If you change ten at once you will not know what worked.

04How to improve LCP (loading of the main content)

web.dev breaks LCP into four parts: the time to the server’s first byte, the delay until the resource starts loading, the duration of its download and the delay until it is painted. It helps to know which one is yours before optimising.

• Slim down the main image. Match its dimensions to what is actually displayed, and use modern formats and compression.
• Do not lazy-load the main image. web.dev warns that it causes an unnecessary delay; keep that technique for images further down the page.
• Prioritise the key resource. You can mark the likely LCP image with `fetchpriority="high"`, without overdoing it.
• Reduce what blocks painting: heavy CSS and synchronous scripts in the head.
• Improve server response: caching, a content delivery network (CDN) and avoiding chains of redirects.

Mind this: shortening one part can shift the time to another. Compressing an image does little if the problem is a script delaying the paint.

05How to improve INP (response to interactions)

INP observes clicks, taps and key presses throughout the whole visit and keeps the worst value (discarding outliers). It does not count scrolling or hovering.

• Reduce the JavaScript that runs on load: fewer plugins, fewer widgets, fewer libraries.
• Review third-party scripts (chat, analytics, pixels, maps): each one competes for the same processor.
• Avoid long tasks. web.dev recommends splitting the work so the browser can respond in between.
• Keep the DOM small: pages with thousands of elements take longer to update.

On WordPress websites, the most common cause is usually an accumulation of plugins and visual builders. Good website maintenance includes reviewing what is surplus.

06How to improve CLS (nothing jumps)

CLS measures the largest burst of unexpected shifts during the life of the page. It is that feeling of going to press a button and having it move just beforehand.

• Always specify width and height on images and videos, or reserve the space with `aspect-ratio`.
• Reserve space for ads, cookie banners, embedded videos and anything that loads late.
• Look after web fonts: choose a similar fallback font and preload the critical ones so the swap does not move the text.
• Animate with `transform` instead of changing position or size, because it does not cause shifts.

07Where to start if you are short of time

1. 1

   Compress and resize the largest images on the home page.

2. 2

   Remove plugins, scripts and widgets you do not use.

3. 3

   Set dimensions on all images.

4. 4

   Check that the hosting responds well and that caching is in place.

5. 5

   Measure again and repeat with the next page.

There is no need to reach perfection: the aim is to pass the “good” thresholds on the pages that matter most. And remember that a fast website does not replace good content; the two reinforce each other, as the guide on what a business website needs explains.