Whether we notice it or not, we’re 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 site’s loading time, time to interactivity, and visual stability, as we’ll examine in this article. Further, we’ll cover why it’s important to consider your site’s core vitals both as you build it, and as you maintain it. Luckily for you, static sites (including those created with CloudCannon) are perfectly placed to achieve high scores, so you’re already leagues ahead of a developer working with a monolithic CMS.
At their core, the web vitals measure overall user experience. But before we discuss how to leverage and improve these three metrics, let’s dig in to what they’re measuring.
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
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 that’s the point at which the page has to be interactive.
Aim for: <=100ms FID
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
Before we move on, take a moment to run a quick test on one of your sites. You’ll see that your site pages are given an aggregate score based on the results for 75% of pages within a URL group. Google’s assumption here is that performance issues in similar pages are likely due to the same underlying problem.
Lighthouse tests are 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 <url>
If you need more information, try:
lighthouse --help
You can also use Lighthouse programmatically, as a Node module.
Core Web Vitals can be improved in many ways, though it’s always more effective to begin on any areas that are scoring the lowest. You should start from the infrastructure you're 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:
style: compressed, for example, and something like jekyll-minifier could be a solid turnkey option for Jekyll users to minify HTML, XML, CSS, JSON, and JavaScript.It’s 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 Google’s report. So there’s never a better time than now to make a change — even a small one!
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。