How to Optimize Magento Stores to Suit Core Web Vitals Standards

Core Web Vitals

The need for an outstanding user experience has never been as urgent as now. And that’s the focus of eCommerce companies worldwide. As a result, some convert their stores to progressive web apps, which boosts the desktop and mobile experience, as seen in these Magento 2 PWA examples.

What can other steps towards a perfect customer experience (CX) include? They are the mobile-first approach, never-ending speed optimization, and tweaking website usability. These are Google ranking factors as well.

Google updated its search ranking rules, connecting them to the user perception of the store. Page experience metrics now influence website place in search engine results pages (SERPs).

There are three pillars of the so-called Core Web Vitals (CWV):

  • Largest Contentful Paint (LCP);
  • First Input Delay (FID);
  • Cumulative Layout Shift (CLS).

They show how well users interact with the website and help you enhance satisfaction if some of these indicators suffer. And that answers the question of why you need to measure them.

Let’s dig deeper into Core Web Vitals and what you can change to improve these KPIs on Magento-powered web stores.

Core Web Vitals: How Do They Affect Ranking?

CWVs are gradually becoming more important in Google’s ranking systems. At the end of August 2021, page experience joined other ranking variables such as:

  • mobile-friendliness;
  • high-quality and relevant content;
  • HTTPS (check how switching to HTTPS improves SEO);

So, you can’t achieve outstanding SEO results without proper website performance and usability. And that’s what should encourage you to fix these platform features.

According to a survey of 20,000 URLs, only 12% of mobile and 13% of desktop versions comply with the Core Web Vitals standards. I ran a test on the Paul Smith website. As you can see, it doesn’t pass the assessment.

You can notice blue tags next to the three sections in the screenshot. These are the Core Web Vitals signs on which Google focuses.

Three Cornerstones of Core Web Vitals

Largest Contentful Paint

LCP tells you about the loading time of the biggest piece of content on a mobile/desktop screen. Which LCP value is good? Aim at 2.5 seconds. The loading time of more than 4 seconds is too slow.

Check out the screenshots from the mobile versions of Dr. Denim, Eidon, and Fox Run online stores. The biggest images are what LCP measures.

What can affect LCP for Magento stores? The reasons may include:

  • slow server response;
  • JS and CSS causing sluggish page rendering;
  • media optimization issues;
  • rendering on the client’s end.

Measures to address poor LCP can be:

  1. Estimate time to the first byte. Employ a content delivery network (CDN) and review your back-end code (pay attention to database queries), caching, and hosting.
  2. Speed up your website’s rendering by placing JS towards the bottom of the <body>, removing unnecessary JS, or reducing the number of server requests with JS bundling.
  3. Merge and minify CSS files or defer non-critical CSS.
  4. Compress images, convert them to newer formats to reduce the size, and avoid lazy loading for above-the-fold content.
  5. Choose system fonts over Google fonts.

First Input Delay

FID helps identify interactivity (responsiveness) issues. It calculates the time of a page’s response to visitor actions. For example, when a visitor clicks some buttons or other elements rather than just scrolls the website or zooms on photos.

The ideal response time is less than 100 milliseconds, which is one-tenth of a second. A poor FID score starts at 300 milliseconds.

If the FID is unsatisfactory, there’s a fault with the browser. It’s overloaded with render-blocking tasks, such as large JS files and extensive JS bundles. So you begin with unloading the browser and allowing it to handle a user’s query immediately.

Speaking of a Magento store, that’s what you can do:

  1. Long bits of JS code keep the browser busy. Split up operations that stall the main thread for more than 50 milliseconds.
  2. Load the most critical web items first by implementing on-demand loading of third-party assets.
  3. Run JS (non-UI operations) in a background thread with the help of web workers to free up the main thread.
  4. Put JS files at the bottom of the <body>. Processing JavaScript files is time-consuming. If you put the JS code near the top of the page, the browser will first perform this function.

Ensure that the principal HTML and CSS have the highest priority in this order. For example, you can use extensions for Magento 2 to postpone the JS code execution. 

  1. Remove unnecessary polyfills. They are a piece of code to work on older browsers and provide advanced functionality. But they are excessive for modern versions and slow down their work. Your task is to prevent recent browsers from downloading polyfills and use them only when needed.

Cumulative Layout Shift

The third Core Web Vital is CLS. It demonstrates your website stability, whether your content slides up and down while the website loads.

How can you boost CLS for a Magento store? Dealing with unexpected layout changes may take the following steps:

  1. Specify the width and height of all media.
  2. Use system fonts instead of Google fonts to avoid unpredicted shifts.
  3. Placeholders of the same size as the future photos can help. It also enhances the user’s impression because they understand that the site is loading. It’s better than blank space, as you can compare it in the screenshot below from Nike.

Wrapping Up

You need to perceive Core Web Vitals not just as new ranking signals. There is a direct connection between poor CWVs and eCommerce website issues, such as:

  • Largest Contentful Paint matches with load speed;
  • First Input Delay interrelates with responsiveness;
  • Cumulative Layout Shift goes along with visual stability.

Google Search ranking now depends on whether they optimize their stores to the perfect CWV scores or not. Prioritizing user experience is as vital as the sold products, quality content, and decent customer service. The good news is that your SEO efforts will also have pleasant byproducts. For example, improved customer service or conversion. So why not start in-depth optimization right now?


Please enter your comment!
Please enter your name here