Watching your Core Web Vitals on Jamstack

Whether we notice it or not, were all living and working in a Core Web Vitals world. Three major metrics Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift measure a sites loading time, time to interactivity, and visual stability, as well examine in this article. Further, well cover why its important to consider your sites core vitals both as you build it, and as you maintain it. Luckily for you, Jamstack sites (including those created with CloudCannon) are perfectly placed to achieve high scores, so youre already leagues ahead of a developer working with a monolithic CMS.

What are Core Web Vitals?

At their core, the web vitals measure overall user experience. But before we discuss how to leverage and improve these three metrics, lets dig in to what theyre measuring.

1. Largest Contentful Paint (LCP)

LCP measures how long it takes to load the largest piece of content on your page. To reach your LCP score, Google calculates the render time of that largest image, video, or text block on your page, relative to when that page first began its load process. In terms of direct user experience, your LCP measures how long a user has to wait to see that block.

Aim for: <=2.5ms LCP

2. First Input Delay (FID)

FID measures the time from when a user first interacts with a page to the time when the browser actually responds to that interaction. Obviously this metric is particularly important on pages where you want or need a user to do something to click a link, submit a form, or open a modal because thats the point at which the page has to be interactive.

Aim for: <=100ms FID

3. Cumulative Layout Shift (CLS)

CLS measures the total of all unexpected layout shifts that occur during the lifespan of the page. This score can range from zero to any positive number, where zero means no shifting.

Aim for: <=0.1

Measuring Core Web Vitals

Before we move on, take a moment to run a quick test on one of your sites. Youll see that your site pages are given an aggregate score based on the results for 75% of pages within a URL group. Googles assumption here is that performance issues in similar pages are likely due to the same underlying problem.

Lighthouse testsare a helpful method to measure your web vitals you can run Lighthouse tests from Chrome DevTools, via the Lighthouse Chrome Extension, or in the command line:

npm install -g lighthouse

To run your test:

lighthouse 

If you need more information, try:

lighthouse --help

You can also use Lighthouse programmatically, as a Node module.

How to improve your Core Web Vitals

Core Web Vitals can be improved in many ways, though its always more effective to begin on any areas that are scoring the lowest. You should start from the infrastructure youre hosting on, before moving on to the way your site is built, and making small tweaks like resizing individual images.

Start with these high impact methods to improve your Core Web Vitals on your static sites:

• Use a CDN to deploy on the edge. See CloudCannons Jamstack hosting performance comparison.
• Remove unnecessary JavaScript. Static site generators like Astroand SvelteKit (both supported by CloudCannon) are great solutions here, as they give both the speed of static and dynamic interactions of an SPA.
• Minify your CSS, JS, and HTML where possible. Again, your chosen build tools will help you here Sass allows style: compressed, for example, and something like jekyll-minifiercould be a solid turnkey option for Jekyll users to minify HTML, XML, CSS, JSON, and JavaScript.
• Reduce the number of redirects you use by planning ahead. Its really tempting to take the path of least resistance and use redirects when you change a site layout, but if you begin your build process with a clear plan for navigation, you will greatly reduce the need to redirect in the first place.
• Serve optimized images and videos that only load when theyre needed. Formats like AVIF and WebPimages are generally better optimized than legacy image formats though depending on the image youre serving, in some cases a PNG or SVG might be ideal. Further, lazy loadingis a simple change to add into your workflow.

Its worth keeping in mind that because Core Web Vitals reflect metrics for the past 28 days, any changes you make now will take at least four weeks to be reflected in Googles report. So theres never a better time than now to make a change even a small one!