Optimizing eCommerce websites for user experience is key to lifelong relationships with customers. The major Google algorithm update is all about that. It helps you determine how well your store is performing for real users and what kind of experience it delivers to them.
The algorithm includes three page experience metrics known as Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These signals (and a few other ones) paint a holistic picture of UX quality on web pages.
Core Web Vitals became ranking factors in 2021 and were gradually rolled out to both mobile and desktop searches by February 2022. Focus on these metrics helps to enhance the UX, sidestep the competitors, save positions in Google, and eventually win more conversions.
Recently, Google announced a major change in Core Web Vitals: in March 2024, FID will be replaced by the metric called Interaction to Next Paint (INP). It means any Magento 2 Core Web Vitals optimization strategy needs to take into account this upcoming ranking change too.
Based on the expertise that we've got while optimizing Magento stores, we provide you with 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.
Table of Content
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 pop-ups;
- HTTPS.
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, are combined with the existing UX signals to fully assess the Page Experience.
Core Web Vitals are real-world, user-centric factors that help site owners measure UX on the web. As of now (2023), 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 begin processing an event in response to user 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 can find the Core Web Vitals report in Google's Search Console. This report comes from the and shows the performance of indexed URLs based on the field data. It provides valuable insights into how your pages perform and what fixes need to be made to resolve your issues.
The same metrics you see in PageSpeed Insights and Lighthouse. Google has underlined the importance of Core Web Vitals information and recommendations in these popular developer tools.
The main challenge with 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 and none of the checkpoints are red, it still has a chance of failing the Core Web Vitals test.
An important nuance to discuss is how Core Web Vitals affect your Magento 2 SEO rankings. Google made the page experience signals an official ranking factor in June 2021. But it didn't guarantee an instantaneous jump to the #1 spot in the SERPs for stores with Core Web Vitals optimized to perfection. Google highlights that page experience is one of the other 200+ factors that they use to rank sites. And as always, well-written and relevant content is crucial.
However, the page experience signals are becoming more and more important, so you should focus on making Core Web Vitals a key priority to stay visible in the search.
40 Hours of Magento Services. FOR FREE
Try our custom development, optimization, support, and design services. One week, free of charge, no strings attached.
Largest Contentful Paint (LCP)
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 .
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 worse conversions due to slow web 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. In this context, it's crucial to also , as efficient database performance is key to reducing server response times and improving overall site speed.
- 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 text, and other resources may worsen LCP performance.
- Client-side rendering. Many store owners using client-side JavaScript logic and progressive libraries such as Vue.js or . However, Magento progressive web apps that are mostly rendered on the client side may affect your LCP as the logic is executed on the frontend. Therefore, if you are going to craft a progressive storefront, rely on professional to cover 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:
- (based on the field data);
- aggregates data from Lighthouse and the CrUX report;
- (we've mentioned it previously in the article);
- , a modular library that measures all the Web Vitals on real users;
- 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 , 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 states that TTFB must be under 800 ms. And everything above 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 backend code. Your code may be overloaded with heavy MySQL queries, so this may cause a delay. You are welcome to browse our guides on and 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 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 .
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 (when we merge multiple JS files together to reduce the number of server requests).
- Moving JS code 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 outside (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 JavaScriptYou may browse our guide on , 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, lazy loading is a prioritization tool that replaces images outside the viewport with placeholders. So, as the customers scroll, the media becomes visible on their screens. 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 utilize lazy loading with everything that is out of view while pages render (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 . 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 1Since 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.
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, and hero images are all examples of this. The challenge with 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.
Here is a link to our ultimate guide on , which 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 (default) 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 .
Hence, optimizing the largest above-the-fold carousel (if any) should be your key focus when improving the 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 an LCP candidate.
So, autoplaying carousels are not the best practice when it comes to the Largest Contentful Paint optimization.
First Input Delay (FID)
Important! FID will be a part of Core Web Vitals only until the spring of 2024. Then it will be replaced by Interaction to Next Paint (INP), and we'll talk about this metric later in the article.
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 instance, when they tap a button, select an option, or enter a text).
When a person first lands on a page and tries to interact with it, they feel frustrated if nothing happens in response to this user 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 improvement. 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, and 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 time between a user's input and a page's response contributes to a poor FID.
2. How to Optimize Magento Store 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 easiest way to measure your FID is by using Search Console's report or the Chrome user experience 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 (). 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 user interaction latency.
A good solution here is to use on-demand loading of third-party code. For instance, you may enable on-demand loading to make below-the-fold banners 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 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 JavaScript files on Magento 2
While a web 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, ) 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, and this results 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.
Interaction to Next Paint (INP)
Important! INP is a pending Core Web Vital metric until March 2024. After that date, it'll replace FID as a measure of website interactivity.
Like FID, INP measures the page responsiveness to user interactions, but differently, more comprehensively. It observes not just the first interaction but the latency of several types of actions users perform on the page during one session: mouse clicks, touchscreen taps, and keyboard inputs. Hovering and scrolling aren't taken into account. Interaction time with the longest latency is reported as INP.
Another significant difference from First Input Delay is that Interaction to Next Point isn't limited to assessing the latency time itself. It captures three phases: the input delay, the processing time, and the presentation delay. All these phases forming INP present a far more accurate picture of page interactivity than FID.
All in all, what really tells a website visitor the page responds normally is visual feedback, with the browser painting the next frame with changes: a menu is opened, an added item is shown in the cart, etc. It's absolutely crucial for eCommerce websites.
Note that the factual results of interactions (like network fetches) aren't considered in INP; it's all about the perceived performance, in other words, the next paint blocking time. If visual feedback is delayed noticeably, users think the page is unresponsive. It may provoke more actions (like tapping several times) which only compound the situation: more calls to execute, duplicated items in the cart, and customer irritation/frustration.
So what is the ideal INP score? Google considers anything under 200 milliseconds a good page experience INP-wise. The latency between 200 and 500 ms points at issues worth tackling. An INP's value above 500 ms means a poor page experience for users.
1. What Causes Poor INP?
So, problems may occur at each phase. Let's say a user taps on the button to add an item to a cart: there can be abnormal latency before the start of processing, the processing itself might be too lengthy, and the next frame can be rendered with substantial delay.
Since INP includes FID, the reasons for its poor performance should be taken into account when optimizing Interaction to Next Point. Apart from that, there are more trouble points, and most of them are linked to poorly written code:
- Excessive/redundant events on the page;
- Unoptimized logic for processing events;
- Render-blocking operations/scripts on the main thread.
There are many more possible reasons for unsatisfactory INP, and they're often unique for each individual online store. All three phases are worth paying attention to. Developers often use an in-built Chrome profiler to conduct thorough diagnostics.
2. How to Optimize a Magento Store for INP
As you've already guessed, the tips for decreasing FID are relevant for INP optimization too. But tackling INP issues will be a lengthier task.
2.1 Reduce the Number of Event Listeners
If the page is stuffed with excessive or unnecessary events, we'll have a longer first phase (the start of handling the input). The same applies to listeners from third-party services tracking their events. First and foremost, review all external libraries you've connected and make sure they don't try to perform redundant actions.
2.2 Partly Defer Event Execution
While analyzing the frontend code, we often see cumbersome logic hampering the event processing phase. Suppose a user taps on the menu icon, but we not only need to show them the menu but also send the info about this user's action and save it somewhere.
But the visitor doesn't need to wait for this formal part to be handled. Then we can first start with processing the visual feedback while deferring the execution of less important logic.
2.3 Reduce Render-blocking Assets
If there are delays in presenting actual changes on the page (showing a menu, a pop-up after adding an item to the cart, a character after typing one, etc.), the most likely it's because the browser is busy with some scripts or other assets.
We remember that browser's main thread can execute just one task at a time. So it can't render the results of the user's input if it's loading/processing JS code or something else at the moment. Our task is to prevent these potential overlappings by revising and refining the code.
2.4 Select Tools Geared for Your Tasks
Say, a visitor types the phone number on the checkout page. It should be validated to prevent inputting and attempting to save the number in the wrong format. But to guarantee a good UX, the validation process should be invisible to users.
Most often, third-party libraries are in charge of validation. And the one you use might be too versatile (e.g., for checking international phone numbers, addresses, and credit cards), meaning it's too large. This, in turn, may cause performance issues since the browser needs to process all this code. The tip is very straightforward: try to select libraries and other resources fitting your specific tasks.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the visual stability of the content, which is crucial in terms of the 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 affects your search ranking as well.
The scenario described is quite common in numerous Magento stores, where unexpected layout shifts can disrupt the . These shifts often happen when customers are clicking on the "Add to Cart" button, browsing through product details, or entering queries in the search bar.
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 Magento 2 Сore Web Vitals optimization. As such, improving the stability of visible elements is crucial, just as knowing is essential for a seamless user experience.
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 CLS score is worth striving for? 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 of a browser to allocate the needed amount of space while the element is loading.
Feel free to browse our 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, pop-up 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 the above-the-fold area 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 improving the visual stability of your store pages by 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 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 that 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
Core Web Vitals optimization should be front and center in the minds of Magento store teams, especially with the upcoming introduction of a new indicator, INP. Remember, poor page experience metrics can hurt not only your brand's reputation but also its Google search ranking.
The Core Web Vitals update has definitely affected how eCommerce websites are created, optimized, and maintained. Sure, you need to write relevant content and be smart with SEO. But it's not enough, and Google more and more loudly advises: “Create the best user experience possible”. Consider Core Web Vitals metrics as a good prompt of what priorities to set: loading speed (LCP), interactivity (FID, later INP), and visual stability (CLS).
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 , Onilab has ample experience and in-depth expertise that help us tackle optimization issues of different kinds and types. With our , you'll pass the CWV test with flying colors. Just drop us a line!
