How fast is your online store ? If you don’t know, check it out now !
In fact, you should know how fast your E-Commerce is, by next May! Because? A few months ago, Google announced that it will change its algorithms and rate sites on three additional parameters:
- loading
- interactivity
- visual stability
These metrics, called Core Web Vitals, are becoming new ranking signals that will come into action in May 2021.
Speed and SEO
The days when SEO was just about filling your website with a long list of keywords and backlinks are over. Today, in fact, Google is starting to pay more attention to a new fact: Web Performance .
In May 2020, Google carried out a study which showed that users demand a better user experience, with fast sites and low waiting times. Speed has however always been an important indicator for a good user experience and now more than ever, it will be a discriminating factor for SEO.
In fact, starting from May 2021 , in addition to affecting the conversion rate, the speed and therefore also the web performance, they will be counted for SEO. This will be measured on a series of new metrics, known as Core Web Vitals .
What does Core Web Vitals mean?
These metrics were designed to help Google understand the experience users have when they access your web pages. Essentially, it is a user experience assessment based on three pillars:
- loading (LCP)
- interactivity (FID)
- visual stability (CLS)
Put simply, each metric depends on the speed of your website.
The metrics of the Core Web Vitals for Google are based on these criteria:
- How fast does the content appear on the screen? (LCP)
- How fast does the page react to user interaction? (FID)
- Does the content move across the screen while the site is loading? (CLS)
Here then the Core Web Vitals can also become an advantage for your store . For example, if you and your competitor have similar and relevant content, Google will reward a site that loads faster.
But now let’s see in detail the singularities of each metric.
Largest Contentful Paint (LCP)
Many people confuse this metric with the time it takes for the page to load completely. However, keep in mind that LCP is not simply the loading time of a page, but rather the time it takes for the heavier content to actually appear on the screen .
Let me explain … When you enter an Ecommerce and click on an article, you arrive on the product page. This page contains; header, logo, text and image. Images are very often quite large and take up more screen space. The LCP would then be the time it takes to fully load the image.
So basically, how can the LCP be controlled?
Google offers a number of tools that help you identify the largest element on a web page. There are also many other tools to verify this. If you want to know what they are, read our article 4 Tools to measure Magento speed and optimize its performance .
You will find lots of info to be able to check the speed of your store and above all a useful overview of the critical issues present .
Once you’ve checked your LCP score, compare it to Google’s data. In fact, according to the search engine company, you shouldn’t be over 2.5 seconds.
How to optimize the LCP?
To try to optimize the LCP, here is a small list that may be useful to you:
- Optimize images . Preload, compress and reduce the weight of all the visual elements that are present on your site. The lower the number of MB, the less time it takes to load.
- Optimize the server . Cache all static files or use ready-to-use CDN solutions . The advantage of the CDN is that it delivers content from the closest server to the user. So product images and descriptions load faster.
- Optimize JavaScript and CSS . Review and cut any unnecessary code from CSS or JS files. It is better to dedicate a separate CSS / JS file for each block instead of writing all the JS logic and styles into one bulky file.
- Optimize client-side rendering . Don’t use many component nesting operations in the DOM tree. Try using fewer setTimeout functions to render and add elements to the DOM in the case of “document.ready” and “window.onload” events.
First Imput Delay (FID)
This metric reflects your site’s responsiveness – essentially, it measures the time it takes to respond to any user interaction .
For example, if the user enters your E-commerce store, touches a button and… nothing happens, something is wrong! The user is unhappy and leaves your site.
But why does this happen?
All of this happens when the browser is still performing other operations in the background and is simply not ready to execute a command. These kinds of delays are quite common for Magento sites. This is because browsers are asked to execute too many JavaScript commands and browsers simply cannot execute them quickly. As a result, users remain on hold until clicking the button, selecting an option or entering text changes something on the screen.
What is the FID?
It’s a measure of all user interactions that occur while your site is still loading. Google wants your site to respond to user interaction even when it hasn’t finished loading yet. The only two exceptions are zooming and scrolling – these user inputs are not incorporated into the FID score.
Here’s a breakdown of what Google considers responsive:
One special thing about FID is that it cannot be measured without users actually interacting with your site. This means that Google cannot estimate your FID score based solely on theoretical data. They will take data from real users, also known as field data.
Improving FID means reducing unused JavaScript (the coding language responsible for executing user commands). If you cut unnecessary JavaScript and reduce the time it takes to run its tasks, you’ll go a long way with your FID score.
However, JavaScript optimization is tricky. Sometimes, you’ll have to sacrifice some of your site’s features, to see performance leaps.
Cumulative Layout Shift (CLS)
Unlike the two previous metrics, the Cumulative Layout Shift solves a different problem, directly related to the user’s feeling.
In fact, the CLS measures all the layout changes of your site during loading. Let me explain, if you are in an online smartphone store, you click on a product and instead of being redirected to the product sheet, you enter a different tab, with a different layout, which perhaps is linked to another product or even to an advertisement!
It is clear that at that point, I am sure you will be quite annoyed and that you will probably not complete the purchase.
Why can elements on your site change?
This can be accessed for example, when all the content on the page appears to be fully loaded and visible, but the download of a large item has not yet finished. As this happens, all other content is “pushed”, which results in sudden layout changes.
Another important factor that can blow your content layout is ads. They often take up a lot of screen space and load slower than the rest of the content. And as soon as they are uploaded, all content on the site is subject to change.
Here, the CLS is calculated based on how much the elements of your site have moved and the impact that the movement has brought to the customer. Google considers anything less than 0.1 to be “good”, as you can see based on the CLS criteria below:
Of course, Google only considers unexpected movements. This means that if a shopper clicks on your menu and some elements of your page move, it won’t affect your CLS score.
The issue of product images is also important to get a good CLS score. Many developers forget to specify the width and length attributes of images, leaving the browser to decide how they should appear on the screen. Since the product description usually loads before images, online shoppers start reading it first. However, as soon as an image loads, it pushes the text up or down and stops the reading process. If you specify the image size via CSS or HTML, space for that image will be reserved during loading times and customers will be able to browse your site without interruption.
AMP and PWA
The interesting thing about Google’s new update is that AMP is no longer a requirement to be included in the Top Stories section. As of May 2021, all online stores that meet the Core Web Vitals criteria would be eligible to enter the section.
This is very interesting news because it shows how Google is really doing what it can to ensure a great user experience. This is also great news for all PWA websites! In 2015, Google itself introduced PWA technology to create sites with a better user experience.
Now with clear benefits for mobile users and a user-centric approach, PWA stores have a high chance of winning the battle against traditional sites and AMPs.
Want useful tools for Core Web Vitals ?
Many tools are already at hand. Google has made sure that site owners have all the resources they need to adapt to the new changes. Here are 6 essential ways to analyze and improve your site on Core Web Vitals.
- Speed Hostgento . The new Hostgento tool that allows you to check the performance, speed and critical points of your store.
- Chrome UX Report . The all-new Chrome API allows you to check your site’s performance over the past 28 days.
- Search Console . Use the Core Web Vitals report to identify pages that need improvement.
- PageSpeed Insights . A great tool for getting a quick overview of all Core Web Vitals scores.
- Lighthouse . Get practical guidance on how to optimize Core Web Vitals metrics.
- Chrome DevTools . Just like Lighthouse, the free tool provides instructions on how to improve your CWV scores.
- Web Vitals Extension . Use this quality extension to view key user experience metrics for any site you visit.
Conclusions
The merchants will then compete on speed. But one important thing to remember is that these changes aren’t being introduced to make the online world more competitive. Or The target set Core Web Vitals is to improve the online experience . Then use these metrics as indicators for the success of your online store.
The key to success is to try to always provide the best online experiences to your customers.
Free 30-days trial Hosting corewebvitals Fast, Secure and Optimized
Switch to Bhoost with 30 days free and migration included
Free 30-days trial
