Since June of this year, Google has added Core Web Vitals to its set of metrics that determine the ranking of websites in its search results. This means that now your site performance impacts your SEO directly (and your business).
So, what are Core Web Vitals and what can you do to improve your website’s scores?
In short, Core Web Vitals are a set of metrics that measure part of the user experience. Each of the three components that make up Core Web Vitals represent a distinct aspect of the user experience: loading, interactivity, and visual stability.
The Largest Contentful Paint (LCP) metric measures the rendering time of the largest element visible within the viewport (the size of the users' screen). The types of elements considered are:
The size of the elements is typically the size that’s visible to the user within the viewport. For image elements that have been resized from their intrinsic size — the size their would be based on their content without external factors — the size reported is the smallest between their visible size and its intrinsic size.
The First Input Delay (FID) metric measures the time from when a user first interacts with a page, like when clicking a link, to the time when the browser is able to process and respond to that interaction.
Large input delays happen when the browser’s main thread is busy performing other tasks and is unable to respond to the user’s interactions. If this happens, it’s possible that the user will get frustrated and choose more responsive alternatives. According to Google, you should aim for an FID below 100ms.
The Cumulative Layout Shift (CLS) metric measures your site’s overall layout stability. Have you ever been about to click a link and then the content shifts and you end up clicking on a not-suspicious-at-all “Free iPad” banner? Well, you’re not alone.
CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that happens during the entire lifespan of a page. To avoid these unexpected layout shifts, try the following:
According to Google, you should aim for a CLS less than 0.1.
Google has several tools to measure how your site is performing:
Also if you use Vercel to host and deploy your projects, you can use their (awesome) Analytics Dashboard and get real user data in real-time to see how your website is performing. Shoutout to our friends at Vercel ♥️
Once you’ve measured and identified areas for improvement, you can start working on getting those Core Web Vitals scores up, which will help you rank higher than your competitors.
Some recommendations for optimizing your site for each Core Web Vital are:
Here at Indicius, we take a performance-first approach while developing projects, and we constantly measure our scores to keep improving the experience of our users. We also work with tools like GatsbyJS and NextJS, that help us create blazing-fast websites. If you need help optimizing your site, get in touch with us. We’ll be more than happy to help you.
For more technical and in-depth information about Core Web Vitals please refer to Google’s official documentation.
Why you should be paying attention to your website’s performance was originally published in Indicius on Medium, where people are continuing the conversation by highlighting and responding to this story.