Have you ever clicked on a webpage only to spend a long time staring at a blank screen? Yes, it is frustrating. That's bad for the website (since you could just click away) and bad for you (because you're waiting).
This is where Core Web Vials are useful -- they are a set of metrics defined by Google to measure a website’s loading speed, interactivity and visual stability. In essence, there are three things that websites must do well in order to ensure that users have a positive experience.
- Quick loading (also known as Largest Contentful Paint, or LCP): This refers to how quickly a webpage's major content loads. A decent load time is defined as 2.5 seconds or less.
- Smooth interactions (First Input Delay or FID): This is about how responsive a webpage feels. If you click a button and nothing happens for a while, that's a sign of bad FID. We want those clicks to feel instant, just like if you were pushing a real button. A decent speed is one that is less than 100 milliseconds.
- Stable visuals (Cumulative Layout Shift or CLS): This one's about how much the content on a webpage jumps around as it loads. Imagine you start reading a recipe and then all the ingredients suddenly jump to different places on the page - that's bad CLS! We want the content to stay put so you can focus on what you're reading. A score of under 1.0 is good.
More information on Core Web Vitals can be found here -- https://developers.google.com/search/docs/appearance/core-web-vitals
The top recommentations to improve the core web vitals are as follows:
- Optimize Image size and Image loading: Large, poorly optimized pictures are a primary cause of sluggish loading speeds. Reducing the size of your pictures, using compression techniques, and turning on lazy loading—which loads images only when the user scrolls—will all help you get a higher Largest Contentful Paint (LCP) score. Also implement lazy loading - i.e. make images load only when visitors scroll down to them.
- Caching: Enable browser caching to store website elements on a user's device. This way, the browser doesn't have to download everything all over again each time they visit your site. Leveraging a CDN would also help here.
- JS & CSS optimization: Minify and compress your CSS and Javascript files. This can significantly reduce their size and improve loading times.
- Preload: Preloading instructs the browser to fetch specific resources early, even before they're explicitly requested by the page. You can preload resources using the <link rel="preload"> tag in the <head> section of your HTML document.
