eCommerce growth is impossible without delivering the right experience. Not only does it ensure that you build a great loyal customer base, also helps you rank high on Google results.
Google’s Core Web Vitals (CWV) are a set of essential metrics that directly influence how your Magento site performs in search results and how users interact with it. Yet, many Magento-based stores struggle with slow loading times, delayed interactivity, and layout shifts.
According to a Google study, users are 24% less likely to abandon page loads when sites meet all Core Web Vitals thresholds. That’s a significant opportunity for Magento merchants who are willing to optimize.
This blog talks about how to improve or optimize magento core web vitals to deliver an amazing shopping experience.
ON THIS PAGE
What is Core Web Vitals (CWV)?
Core Web Vitals is a set of metrics used by Google to rate the quality of user experience on the website. There are three key vital factors:
- Largest Contentful Paint (LCP)
- Interaction To Next Paint (INP) – replacing FID (First Input Delay)
- Cumulative Layout Shift (CLS)
Largest Contentful Paint (LCP) – Loading
Largest Contentful Paint (LCP) – Loading
LCP measures how long the page’s main visible content has been loading. According to Google Insights, the better LCP value is under 2.5 seconds.
Interaction To Next Paint (INP) – Interactivity
INP measures how fast it takes to respond back when the user clicks first. The best response time is less than 200 milliseconds.Cumulative Layout Shift (CLS) – Visual Stability
CLS measures how much visible contents are moving around the page when it loads. Example ad shifts, images without width and height, font changes, etc.
Importance of Core Web Vitals in Magento
A good Core Web Vitals score is very crucial for Magento. Studies have been showing that customers prefer a smooth shopping experience.
Sometimes, Magento sites experience slow page loading due to their complex patterns. Additionally, visible contents whether static or dynamic data take more time to load. Here, Core Web Vitals play a key role in giving users the ultimate experience of staying on the site and completing their orders. Core Web Vitals also directly impact the business.
So, how can we improve Core Web Vitals in Magento, especially through the Magento Front-End? The first step is to make sure Magento is upgraded to the latest version. Magento always introduces enhancements with the latest upgrades aimed at improving performance and user experience, which can positively impact Core Web Vitals.
How to improve or optimize Magento Core Web Vitals
Theme Optimization, improves all core web vitals
In Magento, theming is an essential part of website development. Here’s how you can improve the magento core web vitals with themes:
- Use lightweight themes: As default, Magento offers Luma & Blank themes, which basically eliminate the unnecessary CSS/JS files from unnecessary modules.
- If you plan to have a third-party theme, try to opt for a theme like Hyva, which is primarily built to target good performance.
- If you are considering building a custom theme, it’s best to avoid both complex and huge customization. These efforts can potentially lead to performance issues and bottleneck problems.
- Try avoiding deep inheritance, because having deep inheritance will slow down your site.
Image optimization – improves LCP and CLS
- There are too many image formats, but sticking with modern formats like WebP and AVIF will gradually boost your CWV score.
- Tools like Lighthouse PageSpeed Insight rate images defined with sizes (width & height) as high. <img src=”…” loading=”lazy” width=”300″ height=”200″ />
- Utilize the native lazy loading option, like: <img src=”image.webp” loading=”lazy” />
- Use the responsive <picture> tag instead of the <img> tag for image blocks, especially when using different image srcset values for both desktop and mobile. The <picture> tag helps avoid loading the source image that does not belong to the current viewport. This means it prevents loading mobile-responsive images on desktop view (or vice-versa).
- Always serve optimized images when rendering the gallery or product images throughout the site. Use a CDN to serve the optimized assets to users.
CSS optimization – improves LCP & CLS
Let’s explore how CSS optimization contributes to Core Web Vitals. Basically, CSS is the main reason for getting the lowest CLS value. Poorly optimized CSS, in particular, can lead to layout shifts and negatively impact the user experience. However, if you identify and rectify how CSS should load and render properly, it will greatly enhance both CLS and LCP. Here are a few tips:
- Ensure that CSS minification has been enabled in the Magento Admin configuration: Stores > Configuration > Developer > CSS Settings.
- Remove unused CSS. You can remove the unused CSS by using tools like PurifyCSS and UnCSS extensions. These tools are effectively used to identify rendered unused CSS.
- Use inline critical CSS until the page is fully loaded. This method will greatly improve both LCP and CLS values. Try tools like CriticalCSS to generate the inline styles.
- It’s better to stick with the default Magento Frontend techniques, such as utilizing its UI library, mixins, etc.
- Load fonts using preload and font-display: swap
<link href=”.\Inter_24pt-Bold.ttf&display=swap” rel=”stylesheet” rel=”preload”>
JS optimization – improves INP & LCP
When it comes to Magento, there are too many JavaScript files being loaded due to its vast JS dependency. It’s necessary to optimize for magento core web vitals.
- Ensure that JS minification has been enabled in the Magento Admin configuration:
Stores > Configuration > Developer > JavaScript Settings. - Also enable JavaScript bundling. In Magento, JavaScript bundling is a performance optimization technique that combines multiple JS files into small JS bundles, which are served for each page.
Use the command:
bin/magento config:set dev/js/enable_js_bundling 1
to enable bundling. - Always stick with proper RequireJS configuration. RequireJS is a powerful tool that improves page performance by loading only the necessary JS files—helpful to fix core web vitals.
Use the defer keyword for custom script files or third-party plugins.
For example,
<script src=”app.js” defer></script> - Add the async attribute for JS files that aren’t necessary during initial loading.
For Example,
<script src=”app.js” async></script> - Just like with CSS, audit the site using Chrome DevTools’ Coverage Report to identify and remove unused JS files. This is a crucial step in optimizing core web vitals Magento.
Caching – Improves All Core Web Vitals
The Magento comes with default Full Page Cache (FPC).
FPC improves the site’s overall performance and helps load frontend pages faster. There are two types of FPC: Built-in Cache and Varnish Cache.
Between the two, Varnish Cache performs better and can handle higher traffic efficiently, which contributes to improving magento 2 core web vitals.
You can also configure your site’s session and cache storage with Redis. Redis is an open-source, in-memory data store, known for its speed, reliability, and performance.
Mobile Optimization
Slow page load frustrates users and often causes them to leave the site before exploring the products. Normally, the Core Web Vitals score tends to be lower for mobile than desktop. However, there are more number of mobile users than desktop.
The solution is simple: adopt a Mobile-First Approach. This approach prioritizes mobile during design and development, ultimately improving user experience and boosting the core web vitals Magento score.
Remove Unnecessary Items – Improves All Core Web Vitals Indirectly
Magento’s coding system involves multiple file types like .phtml, .less, .xml, .html, .js, etc.
Whenever you’re developing a module or specific functionality, audit and remove unnecessary empty spaces, comments, and console logs. This practice is key when you want to fix core web vitals.
Avoid excessive DOM size and focus on creating a lightweight theme with a clean coding structure. This prevents the DOM from becoming bloated and supports better Magento 2 core web vitals outcomes.
How to Get the Report of CWV
Getting a Core Web Vitals (CWV) report is not a challenging task. However, using the wrong tools can lead to disappointment.
Here are the tools you can use to measure CWV:
1. Lighthouse
Lighthouse is an open-source, automated tool that helps improve your page performance. It audits key performance metrics, including Core Web Vitals Magento such as:
- Largest Contentful Paint (LCP)
- Interaction to Next Paint (INP)
- Cumulative Layout Shift (CLS)
This tool is highly recommended for anyone looking to fix core web vitals and improve Magento core web vitals across all devices.
2. GTmetrix
GTmetrix is a performance analysis tool that helps you evaluate how well your website loads and provides actionable recommendations for improvement. It combines data from Google Lighthouse and Web Vitals to offer insights into load speed, time to interaction, and layout shifts.
3. Google’s PageSpeed Insight
PageSpeed Insight is a website that helps you understand the performance of your site and provides recommendations for improvement. It offers a detailed report of Magento core web vitals metrics, including LCP, INP, and CLS, along with suggestions to fix core web vitals and enhance user experience.
By following all these factors, you can witness the improvement of LCP below 2.5s, maintain CLS under 0.1, and achieve an INP under 200ms. This will help you fix core web vitals and provide customers with a smooth and effective shopping experience on your Magento commerce site.
Take-home Message
Improving your Magento core web vitals is essential for delivering a seamless and engaging user experience. By focusing on key areas like frontend optimization, image handling, CSS and JS improvements, caching, and mobile responsiveness, you can significantly enhance your core web vitals Magento scores. Regularly monitoring and using the right tools to fix core web vitals will not only boost your site’s performance but also increase customer satisfaction and conversion rates. If you are looking for expert Magento development services, our team is happy to help. Just share your requirements and we’ll take it from there.
