In the world of e-commerce, Core Web Vitals are a set of essential user experience metrics that reflect how users perceive and interact with a website.
They are part of Google's initiative to improve web performance and ensure seamless experiences for users.
Simply speaking – the better your site performance, the happier your online customers are.
Read on to learn how improving Core Web Vitals can transform your bottom line.
What Are The Most Important Google Web Vitals Ecommerce Owners Should Know?
The three key metrics that make up Core Web Vitals are:
- Largest Contentful Paint (LCP): LCP measures the time it takes for the largest content element on a webpage to become visible to the user. It is crucial as it indicates how quickly the main content loads, significantly affecting the perceived loading speed.
For example, when loading the Instagram app you can see the LCP element that is prioritized is Instagram’s logo.
- Interaction to Next Paint (INP) (officially replaced First Input Delay (FID) on March 12, 2024): INP evaluates a webpage's responsiveness to user interactions by analyzing the latency of all eligible interactions throughout a user's session on the page. The final INP value represents the duration of the longest recorded interaction. An INP below 200 milliseconds ensures you provide users with a smooth browsing experience.
- Cumulative Layout Shift (CLS): CLS quantifies a webpage's visual stability by measuring the number of unexpected layout shifts during loading. A good CLS score prevents elements from moving around, which can be frustrating for users trying to click on buttons or links.
Below, an ad loads later than the rest of the page’s content, causing the entire layout to shift, which makes the news article hard to read.
Importance Of Core Web Vitals For Ecommerce Success
Why do Core Web Vitals matter for ecommerce success?
Optimizing for Core Web Vitals ensures your e-commerce website delivers a smooth and pleasant shopping experience, keeping customers engaged and more likely to purchase.
Moreover, let’s not forget that improvements across major KPIs are only one upside of optimizing for Core Web Vitals.
Beyond the first purchase, happy customers are likely to spend 140% more than unsatisfied ones and are 38% more prone to recommend your online store to other people.
Case Studies: How Improved Core Web Vitals Impact Ecommerce Websites in Real Life
With only 44.1% of 18M origins having good Core Web Vitals, there’s an undeniable opportunity for merchants to gain a competitive edge.
In fact, Reddico went on a hunt to explore how well the Top500 Retail Brands for 2021 are doing in terms of Core Web Vitals. Here’s what they found:
- LCP averaged 3.5 seconds, and with 2.5 seconds needed to “Pass”, 64.6% of the Top500 failed or needed a significant improvement. The biggest causes of poor LCP scores in ecommerce websites are large images and JavaScript-embedded content (such as reviews from a third-party platform).
- 88% of the Top500 websites passed FID with scores lower than 100ms, with only 2% failing.
- More than half (52%) of the Top500 scored “Poor” for CLS on mobile devices. For online store owners, cookie disclaimers, promo pop-ups, and image sliders proved a big issue in terms of CLS. However, minor design tweaks can solve this in a way that stops them from interfering with other content, links, and imagery that users want to access as quickly as possible.
Note: At the time of the study, FID was still the official responsiveness metric of Google's Core Web Vitals. As of March 12, 2024, Interaction to Next Paint has replaced FID.
Other retail brands are also leveraging Google’s web vitals to improve user engagement and conversion rates:
Currys pls (former Dixons Carphone)
This electronics retailer focused on improving their website's load times to enhance user experience. After making changes to their web performance, they saw a 10% increase in their retail website's speed, resulting in a 2% uplift in their eCommerce revenue.
Snapdeal
This large online marketplace in India optimized its website for Core Web Vitals and saw a 3-second improvement in FCP (First Contentful Paint). As a result, they saw a 30% increase in their conversion rate and a 25% decrease in bounce rate.
Zitmaxx Wonen
A Dutch furniture retailer saw significant improvements in their Core Web Vitals after optimization. They experienced a 15% improvement in load times, leading to a 20% increase in their session durations and a 14% improvement in their conversion rate.
The Connection Between Core Web Vitals and Ecommerce Sales
Optimizing for Core Web Vitals ensures every visit counts from the first time a user loads your website to the “Thank you” page after a successful conversion.
In a collaborative study with Google, Deloitte found that a mere 0.1s improvement in loading speed affects the entire buyer’s journey.
Let’s zoom into how optimizing for Google’s web vitals can have a big impact on your bottom line.
Decreasing Bounce Rates and Exit Rates with Core Web Vitals
Offering a 0.1s faster ecommerce website with a smooth browsing experience encourages users to stay longer leading to up to 8.6% more pages viewed in a session.
Slow-loading websites often frustrate users and lead them to 'bounce' before the site fully loads. If you improve your online store’s LCP, users can view and interact with your content more quickly, making them 8.3% less likely to go to your competitors.
Pages with high exit rates often reveal issues with unresponsive buttons and links, and unexpected layout shifts leading to frustrated, confused users. By improving FID and CLS, your online store reacts quickly to user interactions and provides a more stable, pleasant browsing experience that prevents premature exits.
Improving User Engagement with Core Web Vitals
With 44% of online shoppers who tell friends and family about a bad online shopping experience you can’t settle for anything less than “delightful.”
Optimizing for speed, responsiveness, and interactivity ensures your online store sees a 5.2% improvement in customer engagement for every 1-millisecond boost in load speed.
And with a great browsing experience, better customer satisfaction score (CSAT) and click-through rates (CTR) are not far behind.
Core Web Vitals' Influence on Ecommerce Conversion Rates
On an e-commerce website, slow interactions during the checkout process can lead to high cart abandonment rates, negatively impacting conversion rates.
Once a user adds an item to the cart, it’s a sprint that needs to be distraction and obstacle-free. This means guaranteeing common bottlenecks like unexpected fees and limited delivery options are eliminated.
But also, guaranteeing 0.1s faster load time, paired with FID and CLS optimizations, will unlock 8.4% more conversions and a 9.2% average order value (AOV) increase.
Analysis of Popular Ecommerce Platforms and Core Web Vitals
When choosing an e-commerce platform, it's crucial to consider how well it performs in terms of Core Web Vitals.
Opting for a platform that prioritizes Core Web Vitals can give your online store a competitive advantage and better support your efforts to increase online sales.
Using real-user data from the official Core Web Vitals Technology Report (CrUX), we compared six major e-commerce platforms:
- WooCommerce
- Shopify
- Wix
- Adobe Commerce (formerly Magento)
- BigCommerce
- OpenCart
With 57.36% of merchants who pass Core Web Vitals, Shopify is the clear leader when it comes to performance optimization on platform level.
With a team of dedicated experts, the Shopify platform offers personalized help and educational resources to help online store owners prepare for acquiring customers in the ways that matter most.
Amassing 6.3 million websites in their database, WooCommerce shows the lowest % of users passing Core Web Vitals. However, the platform also supports the richest extension ecosystem that provides powerful optimization solutions like NitroPack that solve this issue and boost Woo stores to Shopify-level of performance.
Moreover, to address the widening performance gap and its users' needs, WordPress introduced a Core Performance Team made up of long-time contributors. Since then, we’ve seen ongoing enhancements and a stable roadmap dedicated to performance issues.
Proprietary CMSes vs Open-Source CMS: Which Brings Better Performance to Ecommerce Websites?
Whether you’re on the verge of releasing a new online store or pondering a switch to another platform, there are a few aspects to consider before choosing.
To ensure your online store’s long-term success, you need to have a stable platform that stays on top of the latest performance guidelines. Moreover, you need flexibility in terms of essential tools like credit card payment processing, online shopping carts, inventory management systems, customer relationship management (CRM), marketing automation, product page optimization, and mobile optimization.
In 2022 during the WCEU, Felix Arntz touched upon why proprietary CMSes are outperforming WordPress and similar open-source platforms:
- Infrastructure ownership and a controlled stack
- Significantly smaller extension ecosystems
- Faster buy-in due to a clear hierarchy within a single entity
- Timely investments in performance
Both types of platforms come with their strengths and drawbacks.
Proprietary CMSes are optimized to a certain level out of the box but might feel too limiting when it comes to more custom improvements.
While open-source CMSes provide only a basic level of performance enhancements, they do offer greater flexibility to mix-and-match sophisticated optimization solutions like NitroPack on a server level to achieve phenomenal Core Web Vitals results.
Core Web Vitals and SEO/SEA
Google's Core Web Vitals first became a ranking factor in 2021. In February 2022, the change was fully rolled out to all mobile and desktop searches.
Today, “Google for Developers” “highly recommend site owners achieve good Core Web Vitals for success with Search…”
How Google Uses Core Web Vitals in Search Ranking
Earlier this year, during the Yandex source code leak we had the chance to dig deep into how the search engine evaluates websites for SERPs.
And while the Yandex algorithm isn’t the same as the one used for Google Search, it did confirm that content-related requirements dominate how the SERP is built as opposed to speed and performance ones.
In truth, the Core Web Vitals are only a part of Google’s page experience signals. Other signals are mobile-friendliness, HTTPS, and intrusive interstitials.
During the I/O Summit in 2020, Google directly addressed the relationship between Core Web Vitals and SEO performance:
The quote that stood out the most is:
“In general, we (Google) prioritize pages with the best information overall even if some aspects of page experience are sub-par. A good page experience doesn’t override having great, relevant content.”
Moreover, John Muller later highlighted that “...Core Web Vitals is more than a random ranking factor, it’s also something that affects your site’s usability after it ranks (when people actually visit).”
Essentially, if you’re not prepared to offer your visitors the best possible browsing experience, even with huge amounts of organic traffic, your online store will have low conversion rates.
Impact of Good Core Web Vitals on Search Engine Advertising (SEA)
Search Engine Advertising in Google Search is all about landing a higher quality score of the page of an ad so you can lower the cost per click (CPC).
And better Core Web Vitals have been linked to improved SEA results definitively:
- One of Lever Interactive's clients increased their Quality Score leading to -17% CPC and -31% CPA, which also meant a 20% increase in conversion rates on faster landing pages;
- Getting a high quality score also means you can get up to 50% discount on your CPC prices; imagine the impact on your advertisement budget;
- Netzwelt saw advertising revenues increase by 18%, ad visibility increase by over 75%, bounce rates decrease by 50%, and page views increase by 27% by optimizing for Core Web Vitals.
- Ever since the Page Experience update and the Visibility index, pages that meet all of Google’s requirements are ranked 1 percentage point higher than the average. While slower domains will rank 3.7 percentage points lower than fast ones.
Optimizing Common Core Web Vitals Issues in Ecommerce Websites
Due to their nature, ecommerce websites are more likely to be resource-heavy than, say, blogs and service-based websites.
Online stores rely on large image and video libraries, rich JavaScript and CSS files for various animations and transitions, and many third-party scripts to manage billing, analytics, automation, and more.
Unfortunately, this means ecommerce websites are more prone to performance issues.
Let’s explore the most common ones and what optimizations to apply:
Slow Server Response Times
This can impact your LCP, as it measures the time it takes for the largest content element on your webpage to become visible. If your server is slow to respond, it can delay the process significantly.
How to solve it: Upgrade your hosting service to a more robust, responsive option, or consider using a Content Delivery Network (CDN) to cache your site content closer to your users.
JavaScript and CSS Issues
Render-blocking JavaScript and CSS can delay a page from loading and cause an increase in LCP. Similarly, heavy JavaScript execution can delay interactivity, leading to poor INP scores.
How to solve it: Minify and compress your JavaScript and CSS files to reduce their size, and defer non-critical JavaScript/CSS to speed up content rendering.
Non-optimized Images
Large, non-optimized images can drastically slow down page load times and adversely affect your LCP. That’s why proper image optimization is a must.
How to solve it: Use next-gen image formats like WebP, and utilize compression tools to reduce file size without losing quality. Implement responsive images using srcset and sizes attributes to serve appropriately sized images based on the user's device.
Third-Party Scripts
Heavy reliance on third-party scripts and too many plugins can lead to slower load times and poor FID scores, as these scripts may block the main thread.
How to solve it: Audit and limit the number of third-party scripts, especially those that aren't critical to the initial page rendering. You can also defer or asynchronously load these scripts.
Unstable Layouts
Any elements on your page that move around during the loading process can cause a poor CLS score. This is often due to dynamic content, images without dimensions, ads, embeds, or iframes without reserved space.
How to solve it: Ensure elements have a reserved space to avoid content shifting. This can be achieved by setting size attributes on your images and video elements, or by using CSS aspect ratio boxes.
Heavyweight Elements
Using too many heavyweight elements, like videos, high-resolution images, or complex SVGs, can also affect LCP.
How to solve it: Optimize the size and format of your video and complex SVG elements. Consider lazy loading offscreen images and videos to save bandwidth.
Poor Mobile Website Responsiveness
As Google uses mobile-first indexing, ecommerce sites not properly optimized for mobile can suffer from poor Core Web Vitals.
How to solve it: Implement a responsive design that adapts to different device sizes and improves the efficiency of your mobile site version.
Too Many HTTP Requests
If a website sends out too many HTTP requests for various elements (images, scripts, stylesheets), it can negatively impact load times and, thus, LCP and INP.
How to solve it: Implement HTTP/2, which supports multiple simultaneous requests over the same connection. Reduce the number of requests by using techniques such as CSS Sprites, combining CSS/JavaScript files, and using inline images with data URLs when appropriate.
Future-Proofing Your Ecommerce Site with Core Web Vitals
Core Web Vitals will continue to evolve as technology and user expectations change. E-commerce businesses must stay up-to-date with the latest best practices to ensure their websites consistently deliver excellent user experiences.
Preparing for Interaction to Next Paint (INP)
In March 2024, Google officially replaced First Input Delay with Interaction to Next Paint (INP) as the new metric for responsiveness.
How is the new web vital metric any different? INP assesses a page's overall responsiveness to user interactions by observing the latency of all qualifying interactions during a user's visit to a page. The final INP value is the longest interaction observed.
The interactions that play a part in INP’s calculations are:
- Clicking with a mouse;
- Tapping on a device with a touchscreen;
- Pressing a key on a physical or digital keyboard.
And even though INP is still labeled as pending, this does not mean you shouldn’t start preparing right away to improve your INP score.
Continuous Monitoring and Optimization for Sustained Ecommerce Success
Optimizing Core Web Vitals is not a one-time fix.
Revisiting your performance reports like Google PageSpeed Insights and DevTools every 28 days is essential to ensure your ecommerce site delivers top-notch user experiences.
By including site performance in your monthly reports as a KPI you are actively addressing any potential bottlenecks that might affect your bottom line, especially during high-traffic events.
Take it Away
In conclusion, Core Web Vitals play a pivotal role in driving e-commerce success.
By understanding these metrics and implementing optimization strategies, online businesses can create fast, stable, and user-friendly websites that lead to increased engagement, higher conversion rates, and, ultimately, more satisfied customers and increased online sales.
Remember, just like a well-organized and responsive physical store, a smooth-running e-commerce website can drive customer loyalty and maximize your online sales potential.
