Optimizing online stores for user experience is key to lifelong relationships with customers. The new Google algorithm update is all about that. It helps you determine how well your store is performing for real users, what kind of experience it delivers to them.
The algorithm includes three page experience metrics, known as Core Web Vitals. These signals (and a few other ones) paint a holistic picture of UX quality on web pages. Initially, the ranking change was scheduled for May 2021 but then was deferred to June.
With the rollout around the corner, you shouldn’t keep your Magento 2 Core Web Vitals optimization for later. Focus on these metrics to sidestep the competitors, save your positions in Google, and win conversions.
Based on the expertise that we’ve got while optimizing Magento stores, we provide you with the tricks that go far beyond the official Google guidelines. Look what we’ve done for a client of ours, and keep reading if you want the same for your store.
What Are Core Web Vitals?
The concept of judging websites by what a user feels when interacting with a page isn’t new. Google has already been using some page experience signals. These include:
- mobile-friendliness;
- absence of officious popups;
- HTTPS;
- safe browsing (no malware on web pages).
However, these signals couldn’t capture those aspects of UX which relate to web performance. With the roll-out, three new metrics, known as Core Web Vitals, will be combined with the existing UX signals to a unified Page Experience.
Core Web Vitals are real-world, user-centric factors that help site owners measure UX on the web. Basically, they are a set of three web performance metrics:
- Largest Contentful Paint (LCP) measures the loading performance of the largest text, image, or media block on a web page.
- First Input Delay (FID) measures interactivity and reports how long it takes for a page to process an event in response to a user’s interaction.
- Cumulative Layout Shift (CLS) measures how stable a page is as it loads and as a user interacts with it.
Why We Should Care: The Importance of Core Web Vitals for SEO Rankings
You may notice the appearance of the Core Web Vitals report in Google’s Search Console. This report comes from the Chrome User Experience report and shows the performance of indexed URLs based on the field data. It provides valuable insights on how your pages perform and what fixes need to be made to optimize your Magento store for better user-centric experiences both on mobile and desktop.
The same metrics have appeared in the Page Speed Insights and Lighthouse. Google has updated the popular developer tools to surface Core Web Vitals information and recommendations.
The main challenge over Core Web Vitals is that they go beyond page speed measurement. They evaluate how well users interact with web pages. So, even if your Magento store is perfectly optimized for Google Page Speed Insights and none of the checkpoints are red, it still has a chance of failing the Core Web Vitals test.
But the question is still pending: how can Core Web Vitals affect your Magento 2 SEO rankings?
Google will make the page experience signals an official ranking factor from June 2021. But it doesn’t mean an instantaneous jump to the #1 spot in the SERPs once your Magento Core Web Vitals are optimized to perfection.
Google highlights that page experience is one of the other 200+ factors that they use to rank websites. And as of yet, well-written and relevant content is still crucial.
The page experience signals will become more and more important in due course, so you should focus on making Core Web Vitals a key priority to stay visible in the search.
Largest Contentful Paint
The first of the three Core Web Vitals is called Largest Contentful Paint. LCP is intended to measure the time it takes for the largest above-the-fold element on a page to appear within the viewport. Most commonly, this will be an image like a banner, a carousel, a video, or a product image.
Take a look at the home page and product page of the official Adidas website to get a clear understanding of what counts as LCP.
Here, we’re not going to enter into explanations on technical details about how LCP gets calculated. You can find the needed information by clicking on the official Google documentation.
But what everyone needs to know about LCP and other Core Web Vitals is the passing score. The answer for LCP is that the largest element above-the-fold has to load in 2.5 seconds or less. Time under 4 seconds denotes that some fixes are to be made, and more than 4 seconds is considered inferior.
Poor LCP for Magento stores means not only a decrease in rankings but also small conversion and low sales due to slow page loading speed.
1. What Can Be the Reasons for Poor LCP?
The most common reasons for a poor LCP for Magento stores:
- Slow server response times. The issue could occur due to poor web hosting, lack of caching, unoptimized database queries, or API responses that are just taking a while to resolve.
- Render-blocking JavaScript and CSS. JS and CSS may defer the loading of the main content on a web page.
- Slow resource load times. The time it takes to load images, videos, blocks of texts, and other resources may worsen LCP performance.
- Client-side rendering. Many store owners convert their Magento sites into PWAs using client-side JavaScript logic and progressive libraries such as Vue.js or React.js for Magento. However, Magento progressive web apps that are mostly rendered on the client-side may affect your LCP as the logic is executed on the front-end. Therefore, if you are going to craft a progressive storefront, rely on professional Magento PWA development services to hit all the bases.
2. How to Optimize LCP of Your Magento Store
Technically, LCP is pretty easy to understand as all you have to do is look at your above-the-fold content on a page and determine the most prominent block or image in the viewport. Next, you need to optimize it as much as possible and remove anything that could prevent it from downloading.
As far as Largest Contentful Paint is concerned, we can measure it with one of the following tools:
- Chrome User Experience Report (based on the field data);
- PageSpeed Insights aggregates data from Lighthouse and the CrUX report;
- Search Console (Core Web Vitals report) (we’ve mentioned it previously in the article);
- web-vitals JavaScript library, a modular library that measures all the Web Vitals on real users;
- WebPageTest is a web performance tool providing deep insights into how a page performs under different conditions.
2.1 Optimize Your Magento Time to First Byte
Prior to making some fixes, you need to measure your TTFB (time to first byte) to determine whether your server response time is slow. The longer it takes for a server to render content from a browser, the longer the content appears in the viewport. Fast server response time contributes to every aspect of Magento performance optimization, not only LCP.
The easiest way to measure TTFB is by using the Google Chrome browser Inspect tool. Alternatively, you may use countless tools such as Gtmetrix or KeyCDN. Google claims 100 ms is the ideal TTFB. And everything over 500 ms is an issue.
You can boost Magento TTFB in a variety of ways:
- Upgrade your server infrastructure. In some cases, it makes sense to opt for a server in closer physical proximity to the end-user. Reducing the distance between the server and the user helps minimize delays in loading web page content.
- Analyze and improve the efficiency of your back-end code. Your code may be overloaded with heavy MySQL queries, so this may cause a delay. You are welcome to browse our guides on Magento back-end optimization and Magento MySQL optimization to fix code performance issues.
- Route users to a nearby CDN to speed up content delivery. Content Distribution Networks boost content delivery by caching files on remote servers and serving each user from a nearby server.
- Enable caching. Use Varnish as a caching tool that works as an extra layer between the server and the user. When combined with a CDN, Varnish can bring even more benefits. Alternatively, Magento provides full-page caching that improves response time and reduces server loading. Without it, each page might need to run tons of code and retrieve information from the database. Once the Magento full-cache is enabled, the browser can read the page directly from the cache.
- Configure Nginx to apply server caching and minimize resource usage.
- Cache resources with a service worker. The service worker can be used for many productive tasks, including Magento PWA development and TTFB optimization. The most prominent part about it is its ability to intercept requests from a server. This ability makes it possible to cache some parts of HTML content and update these parts when the content has changed.
You can find more tips on how to reduce server response time in our detailed Magento TTFB optimization guide.
2.2 Reduce JavaScript-Blocking Time
By limiting the number of JavaScript on a page, you’ll reduce the time it takes for a browser to execute JS code and respond to user interactions. Reducing the amount of blocking JS files leads to faster rendering and improved LCP.
This can be accomplished by:
- Using JS bundlings (when we merge multiple JS files together to reduce the number of server requests).
- Moving JS files to the bottom of the <body>. Most commonly, your JS files are at the top of the document. This causes a delay in rendering as the browser cannot proceed with page loading until it executes the JS first.*
- Deferring non-critical JavaScripts. Use async or defer for any scripts that are non-critical for above-the-fold content.
<script defer src=”...”></script>
<script async src=”...”></script>
- Moving inline scripts to an external JS file. Unlike inline scripts embedded in an HTML document, external JS files are hosted externally (uploaded on a server) but connected to the requested HTML document. Once inline scripts have moved to an external file, they are minified and added to a bundling. Thus, nothing prevents the page from rendering.
<script src='/JavaScript.js' type='text/javascript'/> // External JavaScript
You may browse our guide on Magento 2 PageSpeed Insight Optimization, where we highlight the fixes mentioned above in detail.
2.3 Don’t Use Lazy Loading for Your Above-the-Fold Image
Lazy Loading is a common Magento image optimization trick used by many. But as far as LCP is concerned, it is not a good practice. In essence, a lazy load is a prioritization tool that replaces images outside the viewport with placeholders. So, as the customers scroll, the media becomes visible on their screen. It is a fantastic way to improve perceived performance.
However, it would be best if you excluded the LCP element from lazy loading. Otherwise, it can make your LCP score even worse.
Feel free to lazy load everything that is out of view while the page renders (including menu icons, product images, etc.) except the largest image that appears above the fold. Just use a standard <img> or <picture> tag instead.
2.4 Optimize CSS Files to Reduce Blocking Time
Heavy CSS files can defer above-the-fold content rendering on your Magento store. First of all, you need to ensure that the amount of non-critical CSS is reduced to a minimum. There are several ways to do this:
Defer non-critical CSS
Since all external CSS styles are considered render-blocking, a page cannot be fully displayed till the styles are loaded. It makes sense to enable the “CSS Critical Path” on Magento Admin Panel to defer all non-critical CSS files that are loaded asynchronously. As a result, the time it takes to load render-blocking resources will be reduced.
Minify and Merge CSS
Merging and minifying CSS files is a basic technique that is useful not only for those who need to optimize Magento for Core Web Vitals but also for Magento mobile speed optimization. This method of reducing blocking time can be implemented right from the Production mode without switching to the Developer mode.
To merge and minify CSS altogether, just type:
php bin/magento config:set dev/css/merge_css_files 1
php bin/magento config:set dev/css/minify_files 1
Since a browser can support only a limited amount of connections per server, CSS merging will be a tremendous improvement that makes your test scores look better. After all, a few large files will be downloaded faster than a plethora of small ones.
2.5 Turn a Logo & Icon Fonts Into SVG
Icon fonts are a real LCP killer. The concern is that the icon won’t render until a large font file is downloaded. As long as SVG elements aren’t used to calculate Largest Contentful Paint, turning the logo and icon fonts into SVG helps save an unneeded request.
Besides, converting these web elements into SVG can provide great value for your Cumulative Layout Shift score, as well. Since this text-based format allows to specify the size attributes of an image, it doesn’t move around the page.
2.6 Enable Preload to Speed up Critical Content Display
The preload feature is used to inform a browser about some critical resources you want to load in the first wave before being found in HTML.
Preload can be a game-changer in terms of LCP optimization for Magento stores. It boosts the download priority of late-discovered fonts, carousels, critical assets, JavaScripts, above-the-fold images, and videos. The main idea about enabling preload is that a browser doesn’t need to wait for a JS script before loading the critical asset.
The bottom line: use <link rel=”preload” as=”image” href=”important.png”> for the largest paint to optimize Magento Core Web Vitals.
2.7 Optimize & Compress Images
For many Magento stores, images are the most prominent elements in the viewport on web pages. Banners, sliders, large carousels, hero images are all examples of this. The challenge in images is that they are one of the most common bottlenecks for fast page loading.
Improving your overall image optimization affects LCP. You can do this in the following ways:
- Remove unnecessary images from above-the-fold if they are not relevant to your content.
- Compress images, so they load faster. Use such tools as imagemin, libvips, WebP Convert, or any other services you like to compress images inside your store. Alternatively, TinyPNG, TinyJPG, and ImageOptim can help optimize image files before you upload them.
- Switch to modern image file formats. Cutting-edge formats contribute much to LCP savings. For instance, switching to WebP can save you up to 30% in size over JPEG with zero quality loss.
- Use an image CDN. Enabling a CDN speeds up the delivery of media files by choosing the servers that are nearest to the users. Some CDNs offer smart image compression as an extra perk.
Take a look at our ultimate guide on how to optimize images in Magento 2 that explains all these aspects in detail.
2.8 Drop Google Fonts in Favor of System Ones
Attractive Google fonts may add personality and functionality to your store’s look, but they are no longer helpers when it comes to LCP.
Here is the thing: before your page can display any content, it has to wait for whatever font you are using to load. When Google fonts are fetching, they cause a repaint of the entire layout. This repaint is a solid trigger for increasing the LCP time.
Stick to system fonts, such as Helvetica or Arial, whenever possible to prevent fetching a font resource and reduce LCP.
2.9 Defer Loading of Carousel’s Embeds Till They Are Called For
An image carousel is a UX component that displays content in a way similar to a presentation. But in the case of Core Web Vitals, above-the-fold carousels usually contain a page’s LCP element. Thus, they may significantly impact your final score.
Take a look at what Google says about how it measures LCP for carousels.
Hence, optimizing the largest above-the-fold carousel (if any) should be your key focus when improving Largest Contentful Paint for your Magento store.
Consider making the first slide load statically as an image. Other slides shouldn’t be shown until the user interacts with the carousel through navigation controls. With this approach, only the first slide would be considered as an LCP candidate.
So, autoplaying carousels are not the best practice when it comes to the Largest Contentful Paint optimization.
First Input Delay
First Input Delay (FID) is the second pillar of Core Web Vitals. This metric measures how responsive your store is when users interact with it for the first time (for example, when they tap a button, select an option, enter a text).
When a user first lands on a page and tries to interact with it, they feel frustrated if nothing happens in response to this interaction. The page may seem fully loaded but doesn’t respond to the input. This is because the browser is busy parsing or processing something else and can’t switch to another task. By “something else” we mean heavy JavaScripts, large JS bundles, or other render-blocking assets.
So, what is the ideal First Input Delay? 100 ms or less is considered a good FID. Anything that is above 100 ms to 300 ms denotes room for improvements. More than 300 ms counts as poor.
For Magento stores, First Input Delay is of great value in terms of search ranking, as well as contributes much to the customer retention rate and bounce rate. It is FID that forms the user’s first impression of your store.
As FID is centered around a page’s interactivity, it focuses on input events like clicks, taps, keypresses. Continuous actions such as scrolling or zooming aren’t taken into account when calculating the final score.
1. What Can Be the Reasons for Poor FID?
As we mentioned before, the only reason for low input latency is heavy tasks on the main thread. Here is the thing: when a browser is busy doing something else, it can’t respond to a user’s input until the task is completed. This “busyness” can be caused by:
- heavy JS files;
- long JS bundles;
- long tasks where the browser must pause.
Anything that creates unnecessary times between a user’s input and a page’s response contributes to a poor FID.
2. How to Optimize Magento for FID
First Input Delay is a metric that can be measured in the field only, as it requires real users who interact with a page. The best and the easiest way to measure your FID is using Search Console’s report or the Chrome UX report. All of them provide details about the Core Web Vitals metrics based on the field data.
It is important to note that FID is closely related to TBT (Total Blocking Time). Even though these are different benchmarks and measure different things, positive changes in TBT usually lead to improvements in FID. That said, you may use TBT to emulate FID in the lab.
So, let’s dwell on specific optimization techniques that will surely make your First Input Delay better.
2.1 Break up Long Tasks into Smaller Ones
Long tasks overload the main thread, not allowing it to process and execute a user’s input. But what task is considered long? Basically, it is any piece of code that blocks the thread for more than 50 ms. During this period, the customers may experience your UI unresponsive.
Breaking up long tasks into smaller ones and code-splitting seems to be a reasonable way out here.
2.2 Speed up Third-Party Scripts Execution
Many Magento sites are filled with different third-party tags and analytics, which may keep the thread busy and the store unresponsive for some time. This negatively affects interaction latency.
A good solution here is to use on-demand loading of third-party code. For example, you may enable on-demand loading to make a below-the-fold banner or ads fetch only when they are scrolled close to the viewport.
The main idea about it is prioritizing loading web elements that provide the greatest value to the users over those that can be loaded at the end of the line.
2.3 Use a Web Worker to Run JavaScripts on a Background Thread
Web workers can be used for Magento FID optimization as they are suitable means to run scripts on background threads. Unlike service workers which proxy your website network requests, web workers provide your application with the ability to run multiple JS executions on a parallel track. They are executed in a separate JavaScript environment and don’t impact the main thread.
That’s said, with web workers enabled, you can delegate some work to them to unweight the main thread and reduce input delay. This model could be an excellent fit for many use cases.
2.4 Defer Parsing of JavaScripts on Magento 2
While a page is loading, the browser normally parses content from top to bottom. But this process takes more time as the browser has to load JavaScript files if they are at the top of the page.
Defer JS loading until JavaScript files need to be executed. In this case, the browser will fetch essential web elements (HTML, CSS) in the first instance, and then, after the process is completed, all script tags can be parsed. It can be handy for Magento stores that use some extensions with heavy JS, such as Mega Menu.
You can either make code changes manually or use a Magento 2 JavaScript extension (for example, this one) that puts all JS files at the bottom automatically.
2.5 Loading Polyfills Only When Needed
Cutting-edge technologies like HTML 5 or CSS3 have brought us new possibilities. They help web developers build modern web apps, and end-users get a faster and more robust overall shopping experience.
However, there is a massive roadblock preventing these technologies from being fully implemented and used. This roadblock is old browsers!
And here is when polyfills come into play. These JS-made browser fallbacks allow modern features and functionality to work for the users visiting your store with old browsers. But there is one problem with polyfills. They force modern browsers to download tons of code they don’t need. All resulting in a poor First Input Delay.
The best solution here is to reduce the number of polyfills and restrict their usage to the needed environments.
Of course, if you are selling goods or equipment for the elderly and your target audience is aged people, you need to provide the best user experience. In this case, polyfills should be applied only for the browsers your visitors are using (you can access this data from the Google Analytics report). Otherwise, reducing unused polyfills and displaying a message similar to those that YouTube shows to their IE8 users would be a perfect solution.
Cumulative Layout Shift
Cumulative Layout Shift (CLS) is crucial in terms of Magento user experience. The problem of unexpected shifts in the content frustrates, annoys, and distracts customers the most.
Let’s assume that you landed on an online store to buy, say, sneakers. You’re scrolling the catalog page and are about to click on the pair you like. But all of a sudden, everything is changing on the page. Without warning, the layout moves, and you end up clicking somewhere else. From this moment, you are likely to feel frustrated and leave the store to buy the sneakers from another shop. This is how a poor Cumulative Layout Shift contributes to lost revenue and damaged trust. And from June 2021, a low CLS score will affect your search ranking, as well.
The case mentioned above is pretty typical for many Magento stores. The sudden layout shifts may occur when the customers are trying to click on an “Add to Cart” button, tempting to look through product details, or typing something in the search.
The moving of visible elements causes such surprising shifts. When other “ingredients” are suddenly resized or added, the entire layout jumps. Optimizing your store for a good CLS score contributes much to providing an outstanding UX and to your Magento 2 Сore Web Vitals optimization.
Cumulative Layout Shift measures visual content stability. The metric is calculated by summing the distance fraction (how unstable aspects affect the viewport) and impact fraction (the actual distance that the elements have moved) for each shift.
What is the ideal CLS score? Google claims anything below 0.1 to be good. If your CLS score is between 0.1 and 0.25, you need to fix minor issues to reduce the number of layout jumps. Meanwhile, anything that is above 0.25 is considered to be poor and may affect your rankings. In this case, your Magento CLS optimization should be in the spotlight.
Note that Google considers only unexpected jumps and doesn’t give menu clicks, scrolls, or other shifts caused by users’ interactions into consideration when calculating a CLS score.
1. What Causes Poor CLS?
Most commonly, the key reason for poor CLS is unsized images. This includes images, ads, embeds, and iframes without dimensions that produce the inability for a browser to allocate the needed amount of space while the element is loading.
Feel free to browse our Magento image optimization guide to identify and resolve issues with unoptimized images.
Apart from that, poor CLS may be caused by other factors such as:
- Using web fonts that trigger FOIT and FOUT.
- Dynamically injected content provoking unexpected shifts. Similar to unoptimized images that push the entire content, popup banners, sign-up forms, “related content”, or “install our app” sections may shift the rest of the page down. Such an issue is widespread among Magento stores that use above-the-fold to sell their customer as many products as possible.
2. How to Optimize a Magento Store for CLS
Cumulative Layout Shift (CLS) can be measured both in the field (real-user data) and the lab (in a synthetic environment). However, lab tools can measure jumps that occur during loading. Thus, the benchmarks may be less than what real users feel in the field.
Here are the tools to measure CLS in the lab:
- Chrome DevTools;
- WebPage Test;
- Lighthouse.
For the field measurement, you can use these tools:
- CrUX report;
- PageSpeed Insights;
- Core Web Vitals report in the Search Console;
- web-vitals JavaScript library.
Now, if you’ve got a poor CLS score on your web pages, it’s time to debug and focus on reducing your Cumulative Layout Shift all the way down to zero.
So, let’s dive into a few tips that will work well here.
2.1 Specify the Size Attributes for Each Video/ Image
Thanks to the Core Web Vitals introduction, it is well worth specifying width and height attributes for all the images within a Magento store to prevent layout shifts. It is images without dimensions that may push content on the page all the way down and impact your CLS score the most.
Look at the infographic below to get an idea of how images without size attributes can negatively affect user experience.
Setting up height and width attributes allows a browser to allocate the appropriate amount of space for images before they are fully downloaded. This is what it can look like:
<img data-src="onilab.jpg" width="380" height="120" alt="onilab">
2.2 Use System Fonts to Prevent Unexpected Shifts
We’ve already mentioned that using system fonts helps optimize LCP due to reducing the number of requests to the server. But what if we tell you that this practice helps improve Cumulative Layout Shift as well?
The point is that, unlike system fonts, Google fonts don’t come pre-installed on a user’s system. This means that a browser needs to download them while fetching the page, then apply them to the text.
In order to display content faster, a browser may opt for showing invisible text while the needed web font is downloading. This is known as FOIT, a flash of invisible text.
Alternatively, a browser may display an unstyled (fallback) font while the web font is rendering, commonly known as FOUT, a flash of unstyled text. FOIT and FOUT trigger unexpected shifting between fonts and affect both font size and line-height.
Thereupon, using system fonts is the fastest method to render text. We recommend using system fonts to expel the probability of FOIT and FOUT.
2.3 Precompute Sufficient Space for Embeds with Placeholders
Using a placeholder is a widespread technique used by many Magento websites to increase perceived performance and reduce layout instability that annoys potential customers.
If placeholders aren’t used, lazy-loading media may cause layout shifting. These shifts trigger extensive DOM layout operations. As a result, system resources are consumed improperly, and users feel disoriented due to unexpected jumps.
To avoid this, consider using placeholders occupying the exact dimensions as the images. You can see how placeholders work in the example below:
Use the src attribute for <img> tags to point to a placeholder image, and the poster attribute is for <video> tags. Mind using height and width attributes on both images and videos to ensure that the transition from placeholders to final media URLs won’t affect the size of the elements when they load.
Deferred loading is a rule of thumb for all below-the-fold embeds. Note that critical assets should be loaded with the <img> tag so as they don’t affect LCP.
2.4 Avoid Non-Composited Animation for Carousels
An unoptimized carousel on your Magento store can contribute to a poor CLS by using not smooth, non-composited animation. This triggers layout recalculation and badly affects the final CLS score. A minor shift may occur every time a slide in the carousel changes but it can be almost invisible to the naked eye. Nevertheless, it may destroy your Cumulative Layout Shift score.
To avoid this issue, use the CSS transform property that lets you transit these web elements. This makes your image carousel much faster and more user-friendly.
Wrapping Up
Optimizing Magento stores for the upcoming update should be front and center in the minds of merchants. Starting from mid-June 2021, poor page experience metrics can not only hurt your brand’s reputation but also will put your SEO ranking on the line.
The Core Web Vitals update will definitely affect how online stores are created, optimized, and maintained anytime soon. Instead of “write relevant content” it will soon be “create the best user experience possible”.
With the Magento 2 Core Web Vitals optimization strategies offered above, you can protect the hard-earned SEO of your store and win conversions. As a Magento development company, Onilab has ample experience and in-depth expertise that help us tackle optimization issues of different kinds and types. With our Magento optimization services, you’ll pass the Core Web Vitals test with flying colors. Just drop us a line!