How to Fix Core Web Vitals Issues: LCP, CLS, FID

Issues of Core Web Vitals LCP, CLS, and FID always occur on your Google Search Console dashboard. The Core Web Vitals report shows how your pages perform based on real-world usage data (sometimes called field data). OraDMT and the experienced facilitators and Trainers have come up with a series of how to improve core Web vital issues and more background info to help us understand what these are all about. 

Starting from early November 2019, the Google Search Console added an experimental speed report to the existing enhancements tools that help webmasters discover potential user experience problems such as mobile usability. This report evolved to become known as the Core Web Vitals report, led by a Google initiative to give simplified user experience metrics to site owners.

Here are some examples that how to improve core Web vital issues

The data used for this report comes from the Chrome User Experience (CrUX) report. The CrUX report is powered by aggregated user experience metrics from actual users visiting your website.

This report is currently based on 3 metrics:

• Largest Contentful Paint (LCP): a loading performance measurement, that should occur during the first 2.5 seconds of the page loading.
• First Input Delay (FID): an interactivity measurement, that should be less than 100 milliseconds.
• Cumulative Layout Shift (CLS): a visual stability measurement, should be less than 0.1.

Other metrics relating to the core web vitals include:

• First contentful paint (FCP): the time from when the user requests the URL until the browser renders the first visible element in the URL. Closely relating to the FID and LCP.

Learn more About Tools to help you investigate your Core Web Vitals issues

Before applying the following recommendations, you should run a performance Audit using either Page Speed Insights or the Chrome DevTools's Lighthouse panel. Try to apply all the suggestions when applicable.

First Input Delay (FID)

The usual error message displayed on the Google Search Console speed report relating to the FID is: FID issue: longer than 300ms (mobile/desktop).

To minimize the FID, you should reduce the scripting and rendering tasks' time of your page so that each one doesn't block the main thread for too long after the FCP.

1. Open the Chrome DevTools Performance panel
2. Apply a 4x CPU slowdown to simulate slower devices
3. Start profiling and reload the page
4. Identify all the sub-tasks that take the longest time.

To reduce the execution time of these sub-tasks:

• Depending on your stack, you can try code splitting
• Try to delay some page initialization to a later time using setTimeout API (analytics, alerts, etc.)
• Use the Idle Until Urgent strategy
• Lazy load page content: images, videos, paging, on scroll loading
• Defer script loading
• If a third-party JavaScript library is the culprit, try an alternative library or write your own solution if possible.

Largest Contentful Paint (LCP)

The usual error message displayed on the Google Search Console Core Web Vitals Report relating to the LCP is: LCP issue: longer than 4s (mobile / desktop).

In addition to the optimization suggestions provided in the First Input Delay section, you can try the following tips to reduce the LCP:

• Minify your assets to reduce their size
• Use a Content Delivery Network (CDN) to reduce your page's resources download time
• Benefit from HTTP Caching by adding Cache Headers
• Initialize your page's header area before the other parts (such as the footer and the lower sections)
• Minimize the number of render-blocking external stylesheets

Cumulative Layout Shift (CLS)

The usual error message displayed on the Google Search Console Core Web Vitals Report relating to the CLS is: CLS issue: more than 0.25 (mobile / desktop).

Unexpected layout shifts can be avoided by following this guidelines:

• Including the size attributes on the images and video elements. If not possible, CSS aspect ratio boxes can be used to reserve the space they will occupy.
• Not appending content before existing content, unless this is being triggered by a user interaction.
• Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.