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
- Go to https://pagespeed.web.dev/ in a browser
- Enter a Magento store URL, eg this default Luma theme demo: https://magento2demo.firemultimedia.nl/
- Click "Analyze"
- When the performance analysis is completed, click the "Mobile" tab to view Mobile performance metrics
- 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
- Go to https://pagespeed.web.dev/ in a browser
- Enter a Magento store URL for a product details page, eg https://mysticlabsd8.com/50ct-high-potency-delta-8-gummies/
- Click "Analyze"
- When the performance analysis is completed, click the "Mobile" tab to view Mobile performance metrics
- Scroll down to the "Opportunities" area and restrict to see only CLS opportunities
- 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:
- Open DevTools > Performance
- Go to a Magento site
- In DevTools, emulate a mobile viewport
- Click the refresh button in the performance tab to run a performance scan, and then stop it once the site loads
- 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