292

The Complete Guide for Magento Core Web Vitals for Best Page Experience

By: Skynet Technologies USA LLC
Mar 23, 22
Mar 23, 22
Magento Core Web Vitals

Your Magento store ought to deliver the best user experience to all your users. This is one significant facet of an ecommerce store that you cannot overlook. User experience and website performance are both directly connected. If website performance is not at par, the user experience will be substandard.

To know the page experience ranking signals, Google announced core web vitals in May 2021. These vitals help you determine how well your Magento website performs for real users. These core web vitals focus on website speed, its responsiveness, and visual stability. Google core web vitals aid in improving the user experience of your web/mobile application and get you a decent position in SERPs.

So, does your Magento website fulfill these core web vitals criteria?

If you are still struggling to find about how to improve the experience of your Magento store with Google Core Web Vitals, here is a complete guide to help you.

Google Core Web Vitals

Core web vitals by Google are metrics that measure the performance of the Magento website. The websites must follow the metrics to deliver an exceptional user experience. Though Google had UX-related signals in practice for many years, for example, mobile-friendliness, safe browsing, HTTPS, etc. UX signals with a combination of core web vitals are the measuring criteria for your Magento website’s unbeatable performance.

Core web vitals include loading, interactivity, and visual stability of your Magento website. And search signals for page experience combine these core web vitals and UX signals together.

Core Web Vitals Metrics

  • Largest Content Paint (LCP) (measures page loading)

    The largest content paint is the download time of the entire content on the page. How long a page with logo, header, title, images, and text takes to download, refers to the LCP. Slow loading of the Magento Ecommerce store obviously affects the UX and overall performance of the website. The ideal download time is 2.5 seconds or less. If your store is taking longer than 2.5 seconds, there are issues that you cannot afford to overlook.

  • First Input Delay (FID) (measures interactivity or responsiveness)

    This metric is a measurement of the responsiveness of your Magento website. Responsiveness is when a user tries to access your page from a device, and either the whole page or some of the elements of the page doesn’t respond or take too long to respond to the user.

    When you make your website more interactive, you add too many widgets and dynamic elements; these elements sometimes delay response to user’s inputs.

  • Cumulative Layout Shift (CLS) (measures visual stability)

    It is a problem of the unexpected shift of content without prior notification. If a user is surfing a Magento store and suddenly, the content changes, and the user ends up at some unwanted layout or page. What should be his/her reaction? The reaction is quite apparent. The user will get frustrated or annoyed and will leave the page.

    Such cases happen with the Magento store when the user clicks on the ‘Add to cart’ button or tries to type something in the search area, and a sudden layout shift occurs. The reason for this sudden shift is moving visible elements, for example, Ads without dimensions, images without dimensions, dynamically injected content, etc. Some other elements (apart from your search) are suddenly resized or added, and a layout shift happens.

Top Factors affecting Magneto ecommerce core web vital score

There are significant reasons that affect these three metrics scores. Before we go more into knowing the solutions to improve the web vital score, let’s know the factors that affect the Magento store core web vital score.

For meagre LCP

  • Server slow response time
  • Render Blocking JavaScript and CSS
  • Extra time to load dynamic elements
  • Client-side JS logic and progressive libraries

For bad FID

  • Heavy tasks on the main thread. For example, JS files, huge JS bundles etc.
  • Delay between user’s input and webpage response.

For poor CLS

  • Unoptimized images
  • Web fonts stimulating FOIT and FOUT
  • Dynamically injected content
  • Ads causing changes to layout

These are the factors that affect and ruin the Magento store core web vital score. Now, let’s find out how to overcome with the best possible solution for above factors.

How to optimize Magento core web vitals to score well?

By applying a few easy tricks, you can eliminate the above-mentioned problems and improve the Magento core web vitals score. Improved score implies better Magento store user experience and performance.

1. Optimizing LCP for your Magento ecommerce store

Good scores in LCP can help your Magento store to rank higher in SERPs.

  • Improve server response time

    To improve server responsiveness, you should follow the steps below.

    • Activate a CDN: Content delivery network stores your content across the world instead of saving it on a single server. So, whenever your Magento store gets a request, the server displays the content to the user. This process takes less time to respond to the user.
    • Enable caching: When you activate caching, your web page doesn’t get load every time when user requests it. Caching improves the page loading speed to multiple times.
    • Back-end code efficiency: Optimizing back-end code is essential for superior performance of your Magento store. If your codes are overloaded with huge MySQL queries, then it harms the page responsiveness badly.
    • Configure Nginx: This configuration helps in applying server caching with minimizing resource usage.
  • Reduce JavaScript blocking time

    • Using JS bundling: By merging multiple JS files reduce the server requests and enhance the responsiveness.
    • Shift JS files towards the end of <body>: If JS files are on the top of the page, they cause poor Magento store performance. Shifting them to the bottom of the <body> tag will improve the page loading speed.
    • Deferring non-critical JavaScript: Non-critical JavaScript can be deferred for above-the-fold content

      <script defer src= “...”></script>
      <script async src= “...”></script>

    • Moving inline scripts to an external JS file: Once you move inline scripts to an external JS file, it can get minified and added to JS bundling. It makes the rendering faster.

      <script src=’/JavaScript.js’ type=’text/javascript’/> // External JavaScript

  • Do not use lazy loading for above-the-fold image

    Though lazy loading is a good option for prioritizing content to appear as users scroll down the page. But as far as Magento store is concerned, it harms the page score when LCP optimization is necessary. If you want to apply the lazy load, then leave the LCP content and apply it to the other elements. You can use standard <img> or <picture> tag.

  • Optimize CSS files

    • Defer non-critical CSS: Until all the CSS styles are loaded, browser won’t display the full content due to render-blocking of external CSS styles. There is ‘CSS critical path’ in Magento admin panel, activate it to defer all the non-critical CSS to reduce the loading time of render-blocking resources.
    • Minify and merge CSS: Using this technique, you can optimize Magento core web vitals. Magento mobile speed optimization can also be done by minifying the CSS. This method can be applied from Production Mode without switching to Developer Mode.

      PHP bin/Magneto config:set dev/CSS/merge_css_files1
      PHP bin/Magento config:set dev/CSS/minify_files1

  • Turn logo and icon fonts into SVG

    Logo and icon fonts are the biggest culprit in LCP low score. When you turn logo and icon fonts into SVG, it not only improves the download speed of the page but also aids in CLS score. Because the text-based format permits to specify the size attributes of the image and not move around the page.

  • Enable pre-load to speed-up critical content display

    This feature informs browser about the critical content you want to load first without downloading HTML or JavaScript. The idea behind pre-load is that browser doesn’t need to wait for JS download for critical content display. Pre-load improves the Magento store speed like anything.

    <link rel= “preload” as= “image” href= “image.png”>
  • Optimize and compress images

    Unoptimized images are the bottlenecks of Magento store responsiveness. By compressing and optimizing the images, you will boost the Magento page speed optimization to the next level.

    • Remove all the unwanted images.
    • Use compressing tools to compress the images. For example, imagemin, libvips, WebP convert, etc.
    • Switch to modern image formats like WebP instead of using JPEG. It saves the size up to 30% and that too without losing the image quality.
    • Enabling image CDN can improve the Magento score drastically.

2. Optimize FID for Magento Store

As we’ve discussed above, FID is a metric that is measured by real users. To improve FID score, you need to work on total blocking time (TBT) of the Magento store.

  • Break the tasks: You should split the codes to avoid the delay. The longer tasks take more time to load. If a piece of code is blocking the thread for 50ms, implies a delay. So, splitting the code can be an alternate solution of this problem.
  • Enable on-demand third-party script: Magento stores are stuffed with many third-party tags and analytics that keep the thread busy and store unresponsive. On-demand loading of third-party scripts can be a helpful solution for this issue. For example, if you enable on-demand loading to fetch a below-the-fold banner or ad only if user scrolls and gets closer to the element, then it will appear only if it is close to the viewport.
  • Use web workers: Web workers are also suitable for Magento optimization. They run JS files in a parallel track and don’t impact the main thread due to different JS environment.
  • Don’t overuse Polyfills: Polyfills are JS-based browsers fallbacks that help your Magento store to open in an outdated browser as well. But stuffing too many Polyfills can lower the FID (First Input Delay) score. So, use Polyfills only when necessary.

3. Optimizing Magento store for CLS

Higher rankings in SERPs and good scores in core web vitals are directly proportional to each other. Focus on CLS to improve Magento store performance.

  • Specify the size attributes for each media: Defining height and width of an image or video in a Magento store prevents the layout shift. The images or videos that don’t have dimensions push the content and influence the CLS score badly. Specifying size will allow browsers to allocate the space for it.
  • Use System fonts to prevent unexpected shifts: Google fonts are not always available in the user’s system. When you use system fonts, you ensure browser doesn’t need to download the Google fonts while loading the page. It also reduces the FOIT (flash of invisible text) and FOUT (flash of un-styled text) issues. FOIT and FOUT both trigger unexpected shifting between fonts.
  • Precompute sufficient space for embed with placeholders: Placeholders aid images or videos to capture the exact place in Magento store. It improves the layout shift and CLS score as well.
  • Avoid non-composited animation for carousels: An unoptimized carousel can ruin the CLS score. A non-composited animation can trigger the layout recalculation every time and influence the Magento CLS score negatively. CSS transform property can be used to solve this problem and to make the carousels faster and user friendly.

Implementing or optimizing Magento store core web vitals’ is not a one-time task, it requires consistent efforts and ongoing optimization to improve the page experience.

Tools to measure core web vitals

Field tools:

  • Chrome user experience report
  • PageSpeed insights
  • Search console (core web vitals reports)
  • Web vitals JavaScript library

Lab tool:

  • LightHouse
  • Chrome Dev Tools
  • Web dev’s measure tool
  • Web page test

Web Vitals chrome extension is a field and lab combined tool.

Conclusion

Core web vitals are essential to fulfil for an exceptional performance of Magento store. These metrics assist in improving your Magento store ranking in web crawlers by enhancing the user experience. Implementing core web vitals are crucial to remain in the competition, maintain the conversion, and gain huge profits.

Skynet Technologies is an official Adobe Bronze Solution Partner.

We have a cross-functional team of Magento developers, designers, and marketers who all work in a collaborative atmosphere with the end goal of providing the best user experience for our clients. We specialize in full-service Magento ecommerce development including Magento solution architecture, UI/UX design, platform migration & upgrades, API / integrations, multi-vendor multi-channel marketplace, multi-tenant solution, performance optimization, Google core web vitals implementation, digital marketing, omnichannel strategy, Magento store ADA compliance & security, product information management solution, and more.

We have been offering various SEO services that improve your SERPs and are quick to adopt any new changes in Google search algorithms. We could foster new perspectives about optimizing your website and act as a catalyst in helping you achieve your business goals. Get in touch with us at [email protected] or submit the following request free quote form to know more.