The importance of website optimization cannot be overstated. It helps ensure that your website runs smoothly and quickly and helps you meet your customers’ needs.
To this end, the Core Web Vitals metrics have been developed to provide website owners with the most comprehensive measurements of their website’s performance and user experience.
This article provides our primary suggestions for augmenting the Core Web Vitals measurements. If you’re getting into web optimization or seeking to identify the most beneficial areas to prioritize, our advice is the Core Web Vitals metrics are the ideal starting point.
We’ll explain how you can use the Core Web Vitals metrics to determine your site’s performance and provide tips on improving them. We’ll also provide an overview of the best practices for optimizing Core Web Vitals metrics and some of our own tips and tricks. Finally, we’ll offer a few resources to help you start the journey to improve your website’s performance.
The Core Web Vitals report shows URL performance grouped by status (Poor, Need improvement, Good), metric type (CLS, FID, LCP), and URL group (groups of similar web pages). The report is based on three metrics measured by actual user data: LCP, FID, and CLS.
The Core Web Vital LCP
To begin with, we have some advice concerning the Largest Contentful Paint (LCP). LCP gauges loading performance. Out of the three Core Web Vitals, the LCP is the one that most websites have difficulty with. Since only about half meet the prescribed standard, let’s begin with this one.
Make sure that the LCP resource is visible in the HTML code. According to the 2022 Web Almanac by HTTP Archive, 72% of mobile pages display an image as their LCP element. A less apparent factor is the time before an image begins downloading, and data from HTTP Archive shows that this is where many sites falter. This means the browser would not be able to spot them quickly and start loading them straight away. As a rule of thumb, if the LCP is an image, the image’s URL should be detectable from the HTML source.
Some tips to make that feasible are: Employing an element with the src or srcset attribute (instead of non-standard attributes such as data-src that require JavaScript to display), preferring server-side rendering (SSR) over client-side rendering (CSR), and using a tag if the image is referred to from an external CSS or JS file. To determine if your LCP image has recognition issues, Lighthouse will launch a new audit in version 10.0 (anticipated January 2023). Ensuring the LCP resource is detectable from the HTML source can lead to observable improvements. It also unlocks additional chances to prioritize the resource, which is our next proposal.
LCP Priority
It is necessary to ensure that the LCP resource is visible in the HTML source, so it starts loading promptly. For example, even if your LCP image is in the HTML source using a tag, if the page has a dozen tags in the <head> of the document before the <img> tag, it may take a while for the image to start loading.
The best way to solve this issue is to give a hint to the browser about which resources are the most important by using the new fetch priority=”high” attribute on the <img> or <link> tag that loads your LCP image. This will tell the browser to download it faster than waiting for the scripts to complete. Data from the Web Almanac reveals that only 0.03% of eligible pages use this API. There is much room for most websites to improve their LCP with little effort.
Although the fetch priority attribute is only supported in Chromium browsers, it is a progressive improvement that other browsers will ignore, so it is highly recommended that developers use it now. For instance, in the case of a page with lots of <script> tags in the head, if you want the LCP resource to be prioritized ahead of those scripts, you can add a <link rel=”preload”> tag before any of the scripts or transfer them to beneath the <img> in the <body>.
Making sure LCP is a priority is essential. At present, 10% of pages have this attribute on their LCP image. If you are using a tool for image optimization that applies lazy-loading behavior to all images, make sure there is an option to override this for the LCP image. If you are unsure which image is the LCP, try making use of heuristics to pick a suitable candidate.
Deferring non-essential resources is another way to effectively increase the LCP resource’s priority. To sum up, these are the best practices to make sure the LCP resource is loaded early and with high priority:
Enhance the loading time of documents and resources by utilizing a content delivery network (CDN)
Finding the Speed
The last piece of the puzzle is guaranteeing the underlying document response is as fast as possible too. The browser can’t start loading any subresources until it gets the primary byte of the initial HTML document response, and the quicker that occurs, the sooner everything else can start taking place too. This time is known as Time to First Byte (TTFB), and the best way to lessen TTFB is to:Use a Content Delivery Network (CDN).
CDNs spread out your assets to edge servers, which are scattered across the world, thus confining the distance those assets need to go over the wire to your users. CDNs also generally have finely detailed caching controls that can be altered and improved for your site’s necessities.
A few tips for configuring your CDNs are: Generally, any time you can serve content straight from the edge (avoiding a trip to your origin server), it’s a performance profit. To evaluate the disruption when elements move on a webpage, use Cumulative Layout Shift (CLS).
Cumulative Layout Shift (CLS) has improved significantly since 2020, yet a quarter of websites still fail to meet the recommended threshold. The primary way to decrease this is by allocating space ahead of time as much as feasible.
To avoid layout shifts caused by unsized images, websites should use width and height attributes (or equivalent CSS properties). Nevertheless, 72% of pages still have at least one unsized image, with browsers setting a default height of 0px. This provides an excellent prospect for the overall web, requiring less effort than other proposals in the article.
Furthermore, images are not the only source of CLS, as third-party ads or embedded videos can also cause it. The aspect-ratio property can help combat this by allowing developers to provide an aspect ratio to images and non-image elements.
Even if the size of dynamic content is unknown, it is possible to reduce the severity of layout shifts by setting a sensible min-height, limiting the container’s growth to a more comfortable level.
Make sure that the pages can be stored in the browser cache.
Web browsers have a feature known as the back/forward cache (or bfcache for short) that stores a memory snapshot of a page. This allows for instant reloading of an earlier or later page in the browser history. This bfcache is an excellent way to enhance browser performance. It eliminates layout shifts that often cause a large amount of Cumulative Layout Shifts (CLS) on many sites.
The implementation of the bfcache was the main cause of the biggest improvement in CLS during 2022. Unfortunately, many websites are not eligible for the bfcache. So they miss out on this free web performance boost for multiple navigations.
Setting up bfcache should be a priority for site owners. Google Chrome already includes a bfcache tester in DevTools. This year there are plans to add a new Lighthouse audit and API to measure the feature in the field. Although the bfcache primarily improves the CLS metric, it can modify other Core Web Vitals. This is one of many instant navigations that can dramatically affect on-page navigation.
Avoid animations/transitions that employ CSS properties that can influence the layout.
Animated features change the layout appearance. Even when these banners don’t shove other content away, the animation can still affect CLS. This is because if those shifts are not within 500 milliseconds of user interaction, they will impact CLS.
Generally, only animate or transition any CSS property that necessitates if you’re doing it in reaction to a user tap or key press (although not hover). Whenever feasible, opt for transitions and animations using the CSS transform property. The Lighthouse audit Avoid non-composited animations will alert when a page animates potentially slow CSS properties. The First Input Delay (FID) is a metric that measures the amount of time it takes for the browser to respond to the user’s initial interaction with the page.
Our final advice is regarding First Input Delay (FID), an assessment of a page’s response to user activities. There is still scope for improvement in terms of its responsiveness. Next Paint (INP) metric may be used to replace FID. The following suggestions apply to both of them.
As sites fare worse on INP than FID, particularly on mobile, we urge developers to consider these responsiveness tips even if they have “good” FID scores. Steer clear of or divide into smaller parts lengthy assignments.
When tasks take over 50 milliseconds to complete, they obstruct the main thread from reacting quickly to user inputs. The Web Almanac shows that coders should do more to avoid or divide long tasks.
Splitting long tasks is not as straightforward as suggested. You should try to do as little work as possible in JavaScript whenever possible. By partitioning long tasks into smaller ones, you will greatly help the main thread.
The Scheduler API is a more complex approach that allows you to organize work based on a system of priorities—letting you know if you can see the work or if it is running in the background. Dividing long tasks will give the browser a chance to see user-visible work.
Abstain from utilizing superfluous JavaScript. Without a doubt, websites are sending more JavaScript than ever. This can certainly affect a website’s responsiveness, particularly during the crucial launch phase. This is not an unsolvable issue, though.
There are a few possibilities available. Steer clear of enormous changes to the display. Rendering can affect the response time of a website other than JavaScript.
Rendering can be a time and resources consuming task. Complex rendering updates can interfere with a website’s ability to respond to user interaction. Enhancing rendering work is not easy, often depending on the desired outcome.
Despite that, there is no guarantee that rendering updates are efficient: In summary, Enhancing page speed may seem intimidating, particularly considering the great deal of advice available on the web. Using these suggestions possibly enhance your website’s Core Web Vitals. These tips are sites’ way to better their Core Web Vitals performance in 2023.
If you’d like to take your optimization efforts further, take a look at these optimization guides for more information. Here’s to a faster web for all in the coming year! May your sites be speedy for your users in the most important ways.
