ADDRESSING CORE WEB VITALS ISSUES

Core Web Vitals are a set of specific metrics that Google considers important in a webpage’s overall user experience. These metrics are crafted to assess the genuine user experience, encompassing loading performance, interactivity, and visual stability of a webpage.

Core Web Vitals metrics:

• First Input Delay – FID
• First Contentful Paint – FCP
• Largest Contentful Paint – LCP
• Cumulative Layout Shift – CLS

HOW TO IMPROVE FID SCORE?

FID (First Input Delay) measures the duration from the moment a user initially interacts with a page.

In order to deliver a positive user experience, websites should aim for a First Input Delay of 100 milliseconds or lower.

FID is a metric that measures a page's responsiveness during load. As such, it only focuses on input events from discrete actions like clicks, taps, and key presses.

Potential interactions examined in FID:

• Clicking on a link or button
• Adding input text into a blank field
• Selecting a drop-down menu
• Clicking a checkbox

Here are key suggestions to enhance the FID score:

Reduce JavaScript Execution Time - From a technical standpoint, all JavaScript is render-blocking. Each time a browser encounters a script tag, it must pause its ongoing processes to download, parse, compile, and execute that JavaScript. It's no surprise that inefficient coding practices can lead to a subpar FID score in such instances!

You can reduce JavaScript execution time by:

• Code-splitting
• Deferring JavaScript
• Removing unused JavaScript
• Delaying JavaScript execution
• Minifying JavaScript etc.

Break up Long Tasks - Long tasks, exceeding 50 milliseconds, could be indicative of JavaScript bloat, suggesting the necessity to load and execute code that consumes a significant amount of time.

JavaScript bundlers like Rollup and Webpack can help split code into appropriate files so that smaller pieces are loaded and executed as necessary.

HOW TO IMPROVE FCP SCORE?

Reference - https://web.dev/first-contentful-paint

FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn't included.

This table shows how to interpret the FCP score:

Here are some important recommendations to improve the FCP score:

Ø  One issue that's particularly important for FCP is font load time. Ensure text remains visible during webfont load.

Ø  Avoid showing invisible text. The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in @font-face style.

Ø  Reducing initial server response time

Ø  Avoiding multiple page redirects

Ø  Establishing early connections to important third-party origins

Ø  Use a Content Delivery Network (CDN)

Other recommendations:

Ø  Defer offscreen images - Deferring offscreen images (or lazy-loading) refers to the practice of delaying the loading of images that aren't in your visitors' viewport until they are needed.

Ø  Time to Interactive (TTI) and Speed Index (SI) may be improved by implementing a lazy-loading strategy.

Ø  Serving static assets with an efficient cache policy helps improve page load times on repeat visits by storing these files locally in the user's browser.

Ø  Preconnect to required origins - Using preconnect helps the browser prioritize important third-party connections and speeds up your page load as third-party requests may take a long time to process.

HOW TO IMPROVE LCP SCORE?

Reference: https://web.dev/lcp

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

This table illustrates how to interpret the LCP score:

Following elements are considered for LCP -

HTML element, such as:

Ø  An image element

Ø  A video element

Ø  An element with the background image loaded via the URL function (instead of declaring it in the CSS)

Ø  Block-level elements such as <h1>, <h2>, <div>, <ul>, <table>, etc.

Here are some important recommendations to improve the LCP score:

Ø  Eliminating render-blocking behavior. General methods to Eliminate render-blocking resources.

ü  Move all <script> and <link> tags to the bottom of your HTML code.

ü  Add async or defer attributes.

Ø  Optimizing images and videos - Optimize image and video delivery on your page to reduce the time taken to load images and videos. Some of the things you can do include:

ü  Properly sizing images

ü  Combining images using CSS sprites

ü  Serving images in next-gen formats

Ø  Combine images using CSS sprites - Combining images using CSS sprites reduces the number of round-trip requests made, which can yield performance gains for your page.

ü  Ensure that your images are properly sized for your webpage and user's viewport before combining them.

ü  Combine your small images into a single image file using a CSS sprite generator tool like cssspritetool.com.

ü  Along with the combined image file, the tool will also provide CSS and HTML code.

ü  Add the CSS and HTML code to your webpage.

Ø  Serve images in next-gen formats - Most websites serve images in JPEG or PNG formats, which have been around since the 1990s. The availability of a new generation of image formats offers an opportunity to further reduce your image file sizes.

ü  WebP (most widely used and recommended format)

ü  JPEG 2000 

ü  JPEG XR 

Ø  Reduce unused JavaScript

Example – Use js minimizer plugin like UglifyJsPlugin

Ø  Reduce unused CSS

Example – Use miniCssExtractPlugin and postcss plugin to optimize the css

HOW TO IMPROVE CLS SCORE?

Reference: https://web.dev/cls/

CLS (Cumulative Layout Shift) is a metric that quantifies the cumulative impact of the most significant layout shifts throughout the entire lifespan of a webpage, considering each unexpected shift in layout scores.

A layout shift takes place whenever a visible element alters its position between consecutive rendered frames.

What is a good CLS score?

Improve CLS score by incorporating good practices into your development workflow, such as:

Ø  Specifying image dimensions - Always specify, both, width and height for your website's image and video elements so that the correct spacing is used for images/videos. 

Alternatively, you can use CSS aspect ratio boxes to do the same. 

Ø  Reducing layout shifts caused by ads, embeds and iframes

To reduce layout shifts caused by ads, embeds and iframes, do things like:

ü  Reserve ad slot size (preferably the largest) before loading the ad library.

ü  Move ads to the bottom or out of the viewport.

ü  Use placeholders when there is no ad available to show.

Ø  Avoiding inserting new content above existing content

ü  Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.

Ø  Preventing the Flash of Invisible Text (FOIT)

ü  The Flash of Invisible Text (FOIT) issue can also affect your page's CLS. Ensure your text remains visible during webfont loads by preloading web-fonts and/or using the font-display attribute.

Takeaway:

Addressing Core Web Vitals issues is crucial for improving your website's performance and search engine rankings. Regularly monitor your website's performance and make adjustments as needed. Google's algorithms and recommendations may evolve, so staying informed about the latest best practices is essential.

Thank you for reading!