This article was originally published on the Magento Association website as a Commerce Co-op blog on October 20, 2021.
For more than a decade, Google has advocated for website speed and has released updates to underline its critical importance. The latest, Core Web Vitals (CWV), came into effect this year and has merchants scrambling. Rightly so, because poor CWV scores can mean a drop in search ranking and organic traffic. With website speed impacting pretty much everything in e-commerce — including user experience, conversions, average cart size and revenue — it has to become the core of your digital strategy.
However, in a survey conducted in 2020, it was reported that only 13% of e-commerce storefronts passed CWV. Furthermore, 97% of the domains cleared one or more CWV metrics, 93% of which cleared the same one: First Input Delay, or FID. e-Commerce merchants seem to be struggling with Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).
If you’re not sure what CWV means for your Adobe Commerce (formerly Magento) storefront, worry no more. Enhancing the user experience through automated page performance optimization is where you need to focus.
CWV are a subset of Web Vitals, each representing a specific aspect of a user’s experience when visiting a site. This includes the page loading experience (LCP), interactivity (FID) and visual stability of page content (CLS). Each metric measures a critical piece of the user experience. The field data provided by CWV shows how a website is performing across a wide range of users and, subsequently, a wide range of devices.
According to eMarketer, worldwide retail mobile commerce is set to grow 18.6% by the end of 2021, with the UK and BRIC (Brazil, Russia, India and China) nations seeing 19–34% growth. Google certainly saw this coming and prioritized mobile-friendliness for search ranking.
Following are the three key areas that Core Web Vitals measure, and what can impact them:
Largest Contentful Paint (LCP)
LCP is largely hampered by bulky images; on static pages, it’s almost always the banner image that’s the troublemaker. However good your CDN is, the best practice would be to compress images. Minifying CSS and JavaScript files, and removing unnecessary/unused third-party plugins like social sharing buttons and video player embeds can also help.
First Input Delay (FID)
You want a user to start exploring your content without delay. Many things can upset that, with heavy JavaScript execution being the main villain. By adopting progressive loading of code and features, and on-demand loading of third-party scripts, merchants can optimize their pages for interactive readiness.
Cumulative Layout Shift (CLS)
Any webpage needs visual stability; no visitor likes their page experience to be disturbed by the page layout shifting in response to ads popping up. Using images, ads, iframes and embeds with correct dimensions is a sure-shot way to avoid CLS.
Tips for Taming
All e-commerce websites have many dynamic elements, such as pricing, personalization, product catalogs, promotions and multiple third-party integrations, like shipping, fulfilment, payment — all of which can add precious seconds to page load time. Merchants, and their developers, need to reconsider and optimize these aspects if they want to keep ranking, traffic, and revenue high.
Here are a few remedies that I can prescribe:
Real-time Monitoring
User monitoring, through tools like Webscale Real User Monitoring (RUM), helps e-commerce merchants get ahead of CWV. Through Webscale, the RUM tag measures important page-load metrics like LCP, FCP, TTFB, DOM Interactive, DOM Content Loaded, Page Load Time and Ready State Interactive. Metrics are collected and published through the a portal so that merchants can track progress with real-time reports and take timely action.
Content Delivery
Beyond visibility, custom technologies and products can help resolve performance challenges to improve CWV scores. For example, products like Webscale CloudEDGE CDN use intelligent caching, leveraging cloud resources and serverless computing to deliver content from nodes closest to a user, reducing the time it takes for your content to reach their browser. Companies like Cloudflare and Akamai have similar offerings. Based on data from our customers, something like this can help you see 80% or more improvement in CWV scores for both desktop and mobile.
Managing Images
Image managing tools help automate image optimization and management for merchants, ensuring online buyers receive the right image for their specific device, every time, and ideally always from the cache closest to the end user. This is a critical piece of the puzzle for mobile scores. Some examples of tools that do this, beyond our own, include ImageEngine and Cloudinary.
Before I conclude, I want to leave you with a question that I get a lot: Can going headless improve CWV, among its other benefits? To this, I must note that, with the traditional “monolithic application” under pressure, headless architectures, and those coupled with a PWA deployment, are gaining traction. While they may be costly initially, the ROI is significantly more justified now that your search visibility and organic traffic are at risk. So, the simple answer is yes, they can, if done correctly and with the right partners.
The Magento community can help here as it offers myriad tailor-made, cloud delivery infrastructure solutions that are designed around the needs of headless storefronts and PWAs, with complete visibility into how the performance and availability are impacting the user experience across multiple devices.
To guide merchants on where to focus optimization efforts, check out my team’s recently released Core Web Vitals “Simplified” eBook.
