Tips to Improve CLS and LCP : Core Web Vitals

Nowadays, customer experience means more than just speed index of a website. Google announced Core Web Vitals metrics in early May 2020. According to Google, Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience. The CLS and LCP play a major role in defining a better score for a website. Here are some important points to keep in mind while developing a theme to maintain CLS and LCP score.

The CLS and LCP : An Overview

CLS : Cumulative Layout Shift

Cumulative Layout Shift which is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. Unexpected movement of page content usually happens because DOM elements are adding dynamically to the page above existing content.

The CLS metric helps you address this problem by measuring how often it is occurring for users. A website should strive to have a CLS score of 0.1 or less.

LCP : Largest Contentful Paint

The Largest Contentful Paint reports the render time of the largest image or text block visible within the viewport. The loading time may increase if there is critical resource blocking the loading time. E.g. any large CSS/JS/image file.

To provide a good user experience, website should have LCP of 2.5 seconds or less.

Tips to Improve CLS

• Always provide width and height attributes for image elements in DOM. Alternatively, you can allocate space for image using CSS aspect ratio. It will avoid layout shift while image is loading. This also applies to Ads, embeds, and iframes.
• Try to avoid moving elements with Javascript without user interaction. If the upper elements are already loaded, then moving elements will result in layout shifts.
• Use font-display property in Web Fonts or use Web Font APIs. The custom fonts without font-display property can cause FOUT (flash of un-styled text) or FOIT (flash of invisible text):
  • FOUT occurs when text font is basic system font while custom font is loading.
  • FOIT occurs when text is invisible while custom font is loading.
  • Combine font-display: optional; and <link rel=”preload”> to best manage the custom fonts.
• Prefer transform animations to animations of properties that trigger layout changes. The transform animation style can change various properties with less cost on CLS.

Tips to Improve LCP

• Defer any non-critical JavaScript and CSS to speed up loading of the main content of your web page.
• Minify CSS and JS files to reduce blocking time.
• Remove any unused CSS or JS.
• Optimize and compress images and text files to reduce size and thus, loading time.
• Convert images into newer formats such as JPEG 2000, JPEG XR, or WebP for better LCP.
• Consider using a CDN for assets (CSS/JS/Images etc.) to avoid wait for loading assets from faraway servers.
• Follow best cache policy for static assets.

That’s all about improving CLS and LCP scores while development of a theme. If any issue or doubt in the above process, please feel free to let us know in the comment section.

I would be happy to help.

Also, you can explore our PrestaShop Development Services and a large range of quality PrestaShop Modules.

For any doubt contact us at [email protected].