Fix Core Web Vitals Issues: LCP, CLS
Starting from early November 2019, the Google Search Console added an experimental speed report to the existing enhancements tools that helps 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.
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 mainly based on these metrics:
- Largest Contentful Paint (LCP): a loading performance measurement, should occur during the first 2.5 seconds of the page loading.
- Cumulative Layout Shift (CLS): a visual stability measurement, should be less than 0.1.
Other metrics relating 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 LCP.
PageSpeed Insights
PageSpeed Insights is an online tool that helps you analyze performance issues and help minimize them.
2 datasets are used in the resulting analysis report:
- Field Data: these metrics are collected from real users as they have visited this site (CrUX report data)
- Lab Data: these are data generated using the Lighthouse tool. Different metrics are collected including:
- First Contentful Paint
- Largest Contentful Paint
- Total Blocking Time
- Cumulative Layout Shift
- Speed Index
The performance scoring is calculated using the lab data. The page is considered fast if this score is above 90 and slow if below 50.
Chrome DevTools
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. They can be opened by pressing Control+Shift+C (Windows, Linux, Chrome OS) or Command+Option+C (Mac).
2 tools are particularly helpful to investigate speed issues:
- The Lighthouse panel can be used to display performance metrics for the current page using the Lighthouse tool. You can choose the device type, the mode and measurement categories. In our case, the Performance category should be checked.
- The Performance panel can be used to analyze a web page's load and runtime performance. To get started analyzing your webpage's speed:
- Navigate to the web page
- Open the Performance panel
- CPU and network throttling can be applied to analyze further performance bottlenecks.
- Click on the refresh icon inside the Performance panel to start profiling and reload the page
- All the main tasks (scripting, rendering, ...) will be displayed along with their sub-tasks. You can zoom on the sub-tasks, click on them to display more details (source script for example) and view network and timing events such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
Before applying the following recommendations, you should run a performance Audit using either PageSpeed Insights or the Chrome DevTools's Lighthouse panel.
Try to apply all the suggestions when applicable.
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
External links
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.