Alex Husar is the Chief Technology Officer at Onilab. For over eight years, he’s been working on Magento migration and development projects as well as building progressive web apps (PWAs). Alex is an expert in full-stack development who shares his expertise and in-depth knowledge on modern technologies and Computer Software Engineering.
Ecommerce businesses all over the globe have never been as focused on delivering the best possible user experience as now. The mobile-first approach, never-ending performance optimization, and the move towards headless ecommerce architecture are among core signs of this trend.
It’s about to accelerate in the coming months and years. Google has recently announced significant changes in its search ranking, connected exactly with the way people perceive websites. Page experience metrics will soon join other crucial indicators that influence websites’ positions in SERPs.
There are the Core Web Vitals:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
These signals reflect how successfully users interact with web pages. The aim of measuring them is to improve the level of satisfaction from such experiences considerably.
Firstly, in this article for Process Street, we’ll get acquainted with the peculiarities of Core Web Vitals. And, secondly, we’ll consider what tweaks you could make to ameliorate these metrics on Magento-based online stores.
- Why worry about Core Web Vitals?
- How to measure Core Web Vitals
- Magento: Improve Largest Contentful Paint (LCP)
- Magento: Fix First Input Delay (FID)
- Magento: Stabilize Cumulative Layout Shift (CLS)
Let’s get started!
Why worry about Core Web Vitals?
Starting from mid-June 2021, Google will gradually increase the role of Core Web Vitals in its ranking systems. Reportedly, the process will take a bit more than a couple of months. At the end of August, page experience indicators will become full-fledged ranking factors alongside others, like qualitative and relevant content, mobile-friendliness, or HTTPS.
In other words, the importance of websites’ performance and usability is steadily reinforcing when it comes to excellent SEO results. So this is a thick hint to every online business owner: it’s high time to enhance these parameters of your platform drastically.
A recent analysis of 20,000 URLs showcased that only 12 percent of mobile and 13 percent of desktop versions can pass the Core Web Vitals assessment. For example, take a look at the screenshot from the PageSpeed Insights report on the Adidas website. As you see, all CWVs on mobile for this prominent store are far from perfection.
So, let’s examine these new metrics Google will use in its new ranking process:
- Largest Contentful Paint (LCP) can point at the page speed loading issues. Literally, it determines how quickly the biggest piece of content on the page appears on a mobile/desktop screen. Basically, it can be a photo/video/banner/gallery/text block.
- First Input Delay (FID) provides wholesome insights into possible interactivity (responsiveness) problems. It estimates how swiftly a page reacts to particular actions by users. These can be pressing a button, clicking a link, etc.
- Cumulative Layout Shift (CLS) is all about the visual stability of web pages. It examines whether the content changes its place on the screen while a website is loading. Such shifts cause much irritation as users can inadvertently tap in the wrong place.
Core Web Vitals could not only influence the position of your online store in search engine results but also prompt weak points really worth fixing. You’ll agree that the aspects stated above hugely contribute to the impression of your potential and current customers, won’t you?
Thus, eliminating these problems will simultaneously raise your online shop in SERPs and ameliorate other critical metrics: the bounce rate, conversions, and so forth. Put simply, CWVs noticeably aid in customer journey optimization.
How to measure Core Web Vitals
Fortunately, the assessment of Core Web Vitals for any site is not secret knowledge. On the contrary, Google itself widely explains the essence of these indicators, provides free tools to evaluate them, and gives helpful advice on coping with the detected troubles.
There are several ways to examine your website and get some prompts for further work. We’d recommend you to use one of the following (all of them are free):
Now, let’s consider Core Web Vitals in greater detail. Then we’ll discuss basic and advanced ways to get the needed marks.
Magento: Improve Largest Contentful Paint (LCP)
Obviously, LCP has a direct impact on the user’s perception of a website. It assesses how long it takes to load the largest picture or other multimedia element on the page within the viewport. It’s reasonable to pay so much attention exactly to the biggest piece. If the main content on the page is already in place, for a customer, it means that the screen has already filled with some useful information, and the site is successfully loading.
Below there are the screenshots from the mobile versions of Nike, Adidas, and Puma online stores. The biggest images are subjects of the LCP assessment.
LCP Pro Tip: Google regards a speed of up to 2.5 seconds as good, while a loading time of more than 4 seconds is poor.
How to fix your LCP score
Among the reasons for unsatisfactory LCP for Magento stores are:
- Issues affecting the server response
- JS and CSS that slow down the page rendering
- Wrongly optimized/unoptimized media files
- Client-side rendering
Fortunately, there are a number of ways to solve your LCP problem and get your Core Web Vitals score higher.
Check whether the server response itself is normal (estimate time to first byte, or TTFB).
If not (the result is more than 500 ms), then you should use a content delivery network (CDN) as well as revise your hosting option, caching strategies, and back-end code (especially database queries).
Reconsider the amount and placement of JavaScript code on your website
You can move JS to the bottom of the
Merge and minify CSS files and defer non-critical CSS.
Work out large CSS files so that they don’t hinder from rendering the above-the-fold content.
Wisely optimize images.
Make sure that you don’t use lazy loading for media that can be the focus of LCP measurement. Compress images for faster loading and transform your files into newer formats. For instance, convert JPEG into WebP, which is 1/3 the size while preserving quality.
Give preference to system fonts over Google fonts.
Although it seems appealing to use non-standard fonts for your online shop, the need to wait until they’ve loaded adversely affects the LCP score.
Magento: Fix First Input Delay (FID)
FID demonstrates the level of your website’s responsiveness. When a user performs some actions like pressing buttons (not just scrolling the page or zooming photos), the delay between the very first input and the result will be the FID indicator.
Superb FID is particularly important for online shops as using them implies numerous interactions with a website on the way from the main and product pages to the checkout. When a person taps the “Add to cart” button, and an online store hesitates a bit to process this event, the user is likely to feel annoyed.
Google estimates FID in milliseconds. The best situation is if it takes less than 100ms to give the response to an action. This is just one-tenth of a second! At the same time, Google does not consider a speed over 300ms as good.
So, even though bad FID may not be visible to the naked eye, Google reckons that the positive changes of this metric make the overall perception of any online shop far better.
How to fix your FID score
There is only one main reason for imperfect FID: a browser is overloaded with other tasks so it can’t instantly process a user’s query. As a rule, this render-blocking stuff includes large JS files and long JS bundles.
Therefore, your main task is to unload the browser. Have a look at how you can do so in the case of a Magento store:
Split up tasks that block the main thread.
Focus on tasks that take more than 50 milliseconds. Long pieces of JS code prevent the browser from executing the user’s inputs.
Prioritize loading the most valuable web elements.
Do this by implementing on-demand loading of third-party assets.
Add a web worker.
In order to unblock the main thread, partly run JS (non-UI tasks) on a background one with the help of web workers.
Postpone the JS code processing.
While a web page loads, browsers should parse everything in the given order. If developers locate JavaScript files on the top of the page, a browser has to do these longer tasks first.
To boost the speed of this process, alter the order: the primary HTML and CSS must have the highest priority in this queue. For Magento 2, there are extensions that can transfer JS files to the bottom of the
.Watch out for the use of polyfills.
Websites created with modern versions of HTML, CSS, and JS are forced to use polyfills to run on older browsers. But for new browsers, polyfills are not only unnecessary but also harmful in terms of performance. To prevent recent browsers from downloading polyfills, restrain their usage to those cases where they’re really vital.
Magento: Stabilize Cumulative Layout Shift (CLS)
CLS reflects the level of a web page’s visual stability.
You may have encountered the following situation:
You want to make a purchase through an online store. However, when you try to click the product category, the page’s layout “jumps” and you end up selecting the wrong category. This is annoying when you’re simply trying to find a particular product, but what if it happens during the checkout stage? Most users will agree that a mistake during checkout is unacceptable.
That’s why keeping CLS as low as possible is so essential for online retailers who want to provide customers with a superior user experience that converts into sales. After all, this metric will have a considerable impact on how Google treats your site.
CLS is measured in fractions of a unit. Any value less than 0.1 is good, but if it exceeds 0.25, it means visual instability worth tackling.
How to fix your CLS score
To be honest, layout shifts are quite widespread among Magento-based stores. So, you need to find out what led to the issue and how to resolve it.
There are three most common reasons behind poor CLS:
- Images and other media files without specified dimensions. Consequently, a browser doesn’t know in advance how much space to allocate while the element is loading.
- Web fonts that cause FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text).
- Dynamically embedded content (e.g., an “install our app” button).
Here are some actionable steps that help to cope with unexpected layout shifts:
Preset the width and height attributes of all your media.
Specifying width and height attributes will “reserve” space for the media and prevent the page from “jumping” after it loads.
Choose system fonts.
While waiting for the end of web fonts download, a browser might show you FIOT of FOUT. As a result, unpredicted shifts in the layout are inevitable.
Use placeholders to show where photos will be while they’re loading.
This step also improves perceived performance: placeholders instead of blank space indicate that the loading is in process, so the site is working (see the screenshot below from Reebok).
The future of Magneto stores and CWV rankings
Core Web Vitals as new ranking signals for Google underline some common problems for ecommerce websites: loading speed (Largest Contentful Paint), responsiveness (First Input Delay), and visual stability (Cumulative Layout Shift).
The rise of their value in the whole Google Search ranking structure gives a clear hint to online business owners. A pleasant (without any compromises) user experience must become another cornerstone for brands alongside the product, content, and customer service.
Soon, CWVs will take a huge part in defining the place of your website in search engine rankings. And the good news is that addressing the outlined issues also brings about the delivery of better service to customers. This will be a sort of a “byproduct” of your SEO efforts. So, let’s start moving towards even more profound optimization that will favorably affect your store’s position in SERPs as well as in the consumers’ eyes.
Is your Magento store optimized for the shift in Google rankings? Share your strategies in the comments!
The post How to Optimize Magento Stores to Suit Core Web Vitals Standards first appeared on Process Street | Checklist, Workflow and SOP Software.
0 Commentaires