Recently, Google shared, through the Chrome DevRel team, some recommendations for optimizing the performance of Core Web Vitals in 2023.
Core Web Vitals gathers the main factors of a page loading experience, as the user accesses and interacts with its elements. They are loading speed (largest contentful paint or LCP), visual stability (cumulative layout shift or CLS), and interactivity (first input delay or FID).
These factors can guide a series of changes to improve the performance of sites. However, which ones have the most impact and should be prioritized among the possibilities? That’s what the team shared and you can check it out below.
Loading Speed (LCP)
Largest Contentful Paint (LCP) is the metric that measures how fast the page loads its content completely for the user.
The LCP measures loading speed by the rendering time, until the moment when its largest element appears on the screen. Currently, half of all websites have problems related to this factor.
To stay within the loading limit, it is necessary to:
- Ensure that the LCP resource is detectable from the HTML source. Generally, the largest element on the page is an image and it needs to be found in standard HTML attributes, such as <img src=”…”> or <link rel=”preload” href=”…”>.
- Ensure that the loading of the LCP resource is prioritized on the page. It is possible to use the fetchpriority=”high” attribute on the <img> or <link> tag that loads your LCP image.
- Use a CDN (Content Delivery Network) to optimize documents and Time to First Byte (TTFB) resources, so that the initial document response arrives as soon as possible.
Visual Stability (CLS)
Cumulative Layout Shift (CLS) is the metric that measures the frequency and severity of unexpected layout changes on a page, which occur when an element moves while the user interacts with it.
Below, are the visual stability actions listed by Google as a priority:
- Explicitly define sizes for any content loaded on the page. This can be done through width and height attributes (or equivalent CSS properties).
- Make sure your pages are eligible for the back-forward cache. Pages that began using this mechanism have seen great improvements in visual stability.
- Avoid animations/transitions that use CSS properties that affect the layout. Whenever possible, prefer transitions and animations that use the CSS transform property.
Interactivity (FID)
First Input Delay (FID) is the metric that measures the response speed to the user’s first interaction with the page, such as a click or a JavaScript control. This is a factor that most websites already dominate, but there’s always room for improvement.
FID evaluates the time from when the user first interacts until the site is able to process a response for that interaction, which happens in milliseconds. This delay can be caused by other processes, such as loading a large JavaScript file in parallel.
These are the main actions that can improve website response speed:
- Avoid or interrupt long tasks by breaking them down into smaller tasks so the browser has more opportunities to adjust.
- Avoid unnecessary or unused JavaScript, which can be found through the Coverage tab under Sources in Chrome DevTools.
- Avoid large rendering updates. To do this, you can: avoid using requestAnimationFrame() for any non-visual work; keep your Document Object Model (DOM) small; use CSS containment.
User experience remains a priority
The quality of the experience on the page depends on a variety of factors. However, focusing on the elements shared in this article should be a priority among SEO analysts and developers to improve usability and achieve top positions in Google’s results.
As in previous years, Google released dozens of new updates in 2022. But ultimately, all SEO work converges towards improving the experience for the user. The more useful the content and the better the usability of the site, the better the results for brands.
As a marketer, I know how important it is to stay on top of the latest trends and best practices. That’s why I personally subscribe to The Beat, Rock Content’s interactive newsletter. It’s my go-to source for all things digital marketing, and I think it should be yours too.
Trust me, you won’t regret it. So come join me and other marketing pros in The Beat. See you there!
