{"id":310151,"date":"2021-10-26T14:38:03","date_gmt":"2021-10-26T14:38:03","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=310151"},"modified":"2022-07-07T08:49:31","modified_gmt":"2022-07-07T08:49:31","slug":"improve-cls-and-lcp","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/improve-cls-and-lcp\/","title":{"rendered":"Tips to Improve CLS and LCP : Core Web Vitals"},"content":{"rendered":"\n

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.<\/em> 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.<\/p>\n\n\n\n

The CLS and LCP : An Overview<\/h2>\n\n\n\n

CLS : Cumulative Layout Shift<\/h3>\n\n\n\n

Cumulative Layout Shift which is a measure of the largest burst of layout shift scores<\/em> for every unexpected<\/a> 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.<\/p>\n\n\n\n

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<\/strong> or less.<\/p>\n\n\n\n

LCP : Largest Contentful Paint<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

To provide a good user experience, website should have LCP of 2.5 seconds or less.<\/p>\n\n\n\n

Tips to Improve CLS<\/h2>\n\n\n\n