cancel
Showing results for 
Search instead for 
Did you mean: 

Improve LCP and CLS issues in Luma theme for Google's Core Web Vitals Search Rank Penalties

Improve LCP and CLS issues in Luma theme for Google's Core Web Vitals Search Rank Penalties

Summary

 

Google’s Core Web Vitals, as of 2021, penalizes search rank of sites with Largest Contentful Paint (LCP) delays and Cumulative Layout Shifts (CLS), because they decrease user experience.

 

See: https://web.dev/vitals/ for more info on that topic.

 

Magento and the Luma theme (in both Commerce Cloud, and also the Community Edition / Open Source) has LCP and CLS issues.

 

The Magento community edition currently has CLS issues reported, with no planned fixes yet:

 

https://github.com/magento/magento2/issues/32956
https://github.com/magento/magento2/pull/33265/files

 

Since most of Adobe's Magento Commerce customers are probably using the Luma theme, this is probably impacting a large amount of customers.

Examples

LCP

Most of the LCP issues are from big, slow, and/or fluffy JS/CSS files that Magento/Luma uses:

  • styles-m.css: which is a huge 20k Luma stylesheet
  • recaptcha__en.js: which is loading on every single page, even if the login popup is disabled in the header, meaning even when recaptcha does NOT need to be loading on every page, it still loads on every page.
  • font-awesome.js
  • knockoutJS
  • jquery
  • requireJS
  • underscoreJS

CLS

The Luma theme in Magento Commerce Cloud has several Cumulative Layout Shift issues when viewed on mobile which occur site-wide, and some are specific to the product details page itself.

 

When viewed in DevTools > Performance tab while viewing in a mobile viewport, you can see the site loading, and then it flashes, the menus/search disappear, the logo shifts, and then everything comes back. That shiftaround is what Google penalizes for CLS.

 

Additionally, on the product details page, the dot slider navigation for product images loads async on the page, causing all content beneath it to shift downward, incurring a CLS penality.

 

Steps to Reproduce

LCP

  1. Go to https://pagespeed.web.dev/ in a browser
  2. Enter a Magento store URL, eg this default Luma theme demo: https://magento2demo.firemultimedia.nl/
  3. Click "Analyze"
  4. When the performance analysis is completed, click the "Mobile" tab to view Mobile performance metrics
  5. Scroll down to the "Opportunities" area and restrict to see only LCP opportunities, the vast majority of LCP improvement opportunities are core Magento/Luma stuff we have little control over, and are part of the Magento platform itself.

CLS

  1. Go to https://pagespeed.web.dev/ in a browser
  2. Enter a Magento store URL for a product details page, eg https://mysticlabsd8.com/50ct-high-potency-delta-8-gummies/
  3. Click "Analyze"
  4. When the performance analysis is completed, click the "Mobile" tab to view Mobile performance metrics
  5. Scroll down to the "Opportunities" area and restrict to see only CLS opportunities
  6. This section will show you what is shifting, and what CLS penalty each shift is incurring

Additionally, for CLS, you can also measure this easier and visually see the layout shifts in Chrome:

  1. Open DevTools > Performance
  2. Go to a Magento site
  3. In DevTools, emulate a mobile viewport
  4. Click the refresh button in the performance tab to run a performance scan, and then stop it once the site loads
  5. Hover the mouse over the screenshots it takes, as you go from left to right on the timeline, you will see the layout shifts occurring, and the hamburger menu and search icons disappear, and then reappear again later
1 Comment
akhileshso3de0
Visitor

We are also facing LCP, CLS scrore issues and most of the time digital marketing team have this as a reason, stating why the webstore sales are not performing well.

 

Please relase an update on this. Im sure there are lot of customers like us who are facing this issue. This is supposed to be very basic pre-requisite for any commerce website.

 

Looking foward Magento team....