Google wants to improve UI/UX for web users
In June 2021, Google started using Core Web Vitals as part of its ranking algorithm. This means that the quality of user experience on a website, as measured by these Core Web Vitals, now influenced that site’s ranking in Google’s search results. This is another indication of how seriously Google takes user experience, and why it’s important for website owners and developers to pay attention to these metrics.
By providing clear metrics and guidelines, Google is helping to ensure that websites focus on these factors. They also provide a clear roadmap for merchants and development teams focused on Technical SEO gains.
It’s worth noting that Google has indicated the Core Web Vitals will evolve over time. There are plans to incorporate more page experience signals yearly to align with user expectations and increase the aspects of website quality they cover.
The metrics explained - LCP, FID & CLS
Google’s Core Web Vitals are a set of metrics that Google uses to measure the quality of a user’s experience on a webpage. A part of Google’s page experience signals, they measure how users perceive the experience of interacting with a web page beyond its pure information value.
The development of Core Web Vitals by Google was driven by the increasing importance of user experience as a ranking factor for websites – the better the user experience the higher Google intends to ranks the site in its organic search results. As the web evolved and became more complex, user experience factors such as page load time, interactivity, and visual stability became more important for users. This is further complicated by the shift in usage from desktop to mobile devices. At this writing, the majority of ecommerce platform interactions occur via mobile shopping experience
Largest Content Paintful (LCP)
Largest Contentful Paint (LCP) is a user-centric metric for measuring “perceived” load speed. It marks the point in the page load timeline when the page’s main content has likely loaded. In simple terms, it measures how long it takes for the largest content element in the viewport to become visible giving the user the perception that the page has loaded. .
The aim of this metric is to help you understand how quickly your users are able to see the content of your page.
A “good” LCP score is considered to be under 2.5 seconds. Any score between 2.5 to 4 seconds “needs improvement, and a score over 4 seconds is considered “poor”.
Improving LCP for Magento ecommerce websites can involve several aspects, including optimizing your server, render-blocking JavaScript and CSS, resource load times, client-side rendering, and more.
This article is not intended as a deep dive so we are omitting any discussion of Magento theme architecture, caching strategies or server architecture. But these are all factors in overall performance.
It’s also important to note that Google uses LCP as one of its ranking factors, making it a significant consideration for web development and SEO strategy.
First Input Delay (FID)
FID measures the time from when a user first interacts with your site (i.e., when they click a link, tap on a button etc.) to when the browser is actually able to respond to that interaction. Essentially how long it takes the user to “feel” the site is responding.
In simpler terms, it quantifies the experience users feel when trying to interact with pages. A low FID helps ensure that the page is usable. Conversely, a high FID implies that users are “sensing” a delay between an input action and the website responding.
A “good” FID score, according to Google, is less than 100 milliseconds. A score between 100 to 300 milliseconds “needs improvement”, while anything over 300 milliseconds is considered “poor”.
For a Magento store (again) improvement across multiple technical areas will result in score optimization. Theme architecture and development should be the at the strategy forefront for optimizing FID.
As with the other Core Web Vitals, FID is now a part of Google’s search ranking algorithm. This means that sites that perform well on this metric have a better chance of ranking higher in Google’s search results. Improving FID is not just about improving user experience, it also has an impact on a site’s visibility in Google search. For an ecommerce store, a strong FID scores helps optimize the user experience and impacts organic traffic
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is a set of metrics that measure the speed, responsiveness, and visual stability of a webpage. CLS measures perceived visual stability. Specifically the unexpected shifting of webpage elements while the page is still downloading.
In practical terms, it’s the metric that quantifies how much elements on the page move around during the load. For example, you may have had an experience where you’re reading an article online and the text suddenly moves, causing you to lose your place. This happens when a visible element is added to the page above the content you’re currently looking at, pushing it down. Similarly, it can happen when a visible element changes size or position, causing other elements to shift in response.
A “good” CLS score, according to Google, is less than 0.1. Any score between 0.1 to 0.25 “needs improvement”, while anything over 0.25 is considered “poor”.
Several factors can contribute to a high CLS score, such as images without dimensions, ads, embeds, or iframes without dimensions, dynamically injected content, web fonts loading and actions waiting for a network response before updating DOM. For a Magento ecommerce website there are opportunities to radically improve CLS on product detail pages and homepage with web optimized images and font loading. This “low hanging’ fruit is often overlooked during the initial development cycle.
Improving CLS, like FID and LCP, contributes both as a user improvement and SEO.
In 2020 the Google Chrome team confirmed that Core Web Vitals, intended to help site owners measure their users experience on the web, are a ranking factor.
Core Web Vitals, SEO and ecommerce sites
Google’s Core Web Vitals are an essential part of search engine optimization (SEO) for all websites, including ecommerce websites. They directly influence a site’s search engine ranking, affecting its visibility and, consequently, the amount of traffic it receives. Given the fierce competition among ecommerce businesses, even a slight change in search engine rankings can significantly impact the bottom line.
Here’s how each of the Core Web Vitals can affect an ecommerce website:
Largest Contentful Paint (LCP): LCP measures the speed at which a page’s main content is loaded. For an ecommerce website, a slow LCP might mean that customers have to wait longer for product images or descriptions to load. If this happens, customers might get frustrated and leave the site, leading to lost sales. On the other hand, a fast LCP can enhance the user experience, encourage more browsing, and ultimately lead to higher conversion rates.
First Input Delay (FID): FID measures the time it takes for a page to become interactive, which can affect how customers perceive the responsiveness of an ecommerce site. A high FID might make a site feel sluggish, frustrating customers who are trying to navigate product catalogs, add items to a shopping cart, or complete the checkout process. In contrast, a low FID can make a site feel fast and responsive, improving customer satisfaction and increasing the likelihood of repeat business.
Cumulative Layout Shift (CLS): CLS measures the visual stability of a page. For ecommerce sites, a high CLS might mean that customers have a hard time interacting with the site, possibly clicking on wrong items or facing trouble with navigation due to elements on the page unexpectedly moving around. A low CLS score can improve the user experience, making it easier for customers to browse products, read reviews, and complete their purchase.
As such, ecommerce businesses should consider Core Web Vitals as a critical part of their SEO strategy. Magento stores fall under this category and there is no distinction between the target objectives for a Magento commerce store and other ecommerce platforms. The method of implementing solutions does vary based on platform selection.
In summary, if an ecommerce website has poor Core Web Vitals scores, it may rank lower in search engine results, receive less organic traffic, and provide a less satisfactory user experience, all of which can lead to lower sales. On the other hand, improving Core Web Vitals can lead to better search engine rankings, more traffic, and a better user experience, boosting sales and revenue.
Magento and Google Core Web Vitals
Fundamentally, Google’s Core Web Vitals applies it’s standards to all ecommerce websites equally. There is no distinction made in Google’s scoring models with regards to ecommerce platform in use.
However, the method to optimize against Google’s Core Web Vitals metrics is platform dependent. This stems from the technologies uses, hosting solutions in play and optimization techniques available for the platform itself.
Magento and Adobe Commerce websites faces specific challenges related to theme architecture and crawlability/indexability. Conversely, they are both strong in data management and come with a set of built in tools to for url handling and canonicalization.
Search Engines: Crawlabilty, Indexability & Ranking
Google, along with other search engines, uses web crawlers (also known as spiders or bots) to discover, crawl, and index web pages, including those on Magento or Adobe Commerce websites. The process generally follows these steps:
Discovery: Google’s bots first discover a Magento webpage when it’s linked from an already indexed page or when the URL is submitted directly to Google via the Search Console. Magento supports the use of xml sitemaps but faces challenges in generating them. If the product catalog has been customized its not uncommon for the xml sitemap to require development effort to
Crawling: Once the page has been discovered, Google’s bots will visit (or “crawl”) the page to understand its content. They do this by looking at various elements such as the title tag, meta description, header tags, alt tags, and the actual content on the page. They’ll also look at the site’s robots.txt file and meta robots tag to see if the owner has restricted any areas from being crawled. For Magento this is often a problem. Googles has a “crawl budget” and Magento is notoriously slow making crawling a slow and lengthy process. For sites that rely of continually changing content the time delta between full recrawls can be preclude current relevant content from being fully indexed.
Indexing: If the page can be crawled and is determined to be of good quality (i.e., it provides value to users), it’s added to Google’s “index”—a massive database of all the webpages that Google has crawled and found valuable. The webpage is now eligible to be served up in response to relevant search queries. In short – now these pages can be found in search results. How high they rank and which search terms is a much longer conversation around SEO features.
It’s important to note that Magento and Adobe Commerce have specific SEO features to make this process more effective:
XML Sitemap: Both Magento and Adobe Commerce allow you to generate an XML sitemap that provides a roadmap of all the pages on your site. This sitemap can be submitted to Google Search Console to aid in the discovery process.
Robots.txt File: You can specify which pages or areas of the site the crawlers should not visit in the robots.txt file.
URL Rewrites: Magento allows you to create SEO-friendly URLs for your product and category pages, making them easier for both users and search engines to understand. These effectively server as url redirects.
Metadata: Magento and Adobe Commerce enable you to add unique meta titles and descriptions to your product and category pages, helping search engines understand the content of these pages. For detailed support of the full range of Metadata, Magento includes a customizable attribute structure that allows for the creation of additional tags. In turn these are able to be crawled to give Search Engines more detailed insight into your pages.
Schema Markup: Some Magento and Adobe Commerce themes support Schema markup (structured data), which helps Google understand the content on the page more accurately.
Canonical Tags: Magento and Adobe Commerce allow you to use canonical tags to prevent duplicate content issues by indicating the “original” page of content to Google.
To make your Magento or Adobe Commerce site more crawlable and indexable, it’s important to use these features effectively, along with following general SEO best practices. Remember to regularly monitor your site’s performance using tools like Google Search Console, which can provide valuable insights into how well your site is being crawled and indexe
Magento SEO and Google's Core Web Vitals
Search Engine Optimization (SEO) for Magento, or any other e-commerce platform, is directly impacted by Google’s Core Web Vitals. These vitals are part of Google’s page experience signals used in ranking web pages in search results. Therefore, they affect how well a Magento site performs in organic search rankings.
Below are some ways Google’s Core Web Vitals might impact Magento SEO and some suggestions on how to optimize:
Largest Contentful Paint (LCP): This metric is all about loading performance. Slow loading times may occur in Magento due to unoptimized images, excessive use of external scripts, or poor server response times. To improve LCP, consider optimizing and compressing images, using lazy loading, reducing server response times, and minimizing the use of blocking CSS/JavaScript.
First Input Delay (FID): This metric measures the interactivity and responsiveness of your Magento website. JavaScript execution can often be a major factor in slowing down interactivity. To optimize FID, reduce JavaScript execution time, split up long JavaScript tasks into smaller, asynchronous tasks, and remove any non-critical third-party scripts if possible.
Cumulative Layout Shift (CLS): This metric gauges visual stability. In Magento, dynamic content, images without dimensions, or fonts can cause layout shifts. The native responsive framework when customized needs to be tested and optimized for mobile. To improve the CLS score, always specify dimensions for images and embeds, avoid inserting content above existing content, and use CSS animations instead of changing elements’ dimensions and positions.
It’s essential to understand that optimizing these metrics isn’t just about improving scores in a technical audit; it’s about improving the overall user experience. Google’s Core Web Vitals have been incorporated into their ranking algorithm because they measure critical aspects of the user experience.
Magento store owners should regularly measure and optimize these Core Web Vitals, alongside other SEO best practices, to improve their site’s visibility in organic search results, decrease bounce rates, and improve conversion rates. Tools like Google’s PageSpeed Insights, Google Analytics, Search Console, and Lighthouse can be used to measure and understand these metrics.
Unfortunately, the native Luma theme has middling Core Web Vitals scores. Depending on the importance of organic traffic to growth goals and the complexity of the frontend the solution could be as simple as CDN and caching or something more complex like architecting a Progressive Web App or another Headless
ecommerce solution.
Summary
- Google’s Core Web Vitals provide criteria for developers and merchants to improve customer experience.
- The measurements include LCP (load speed), FID (interactivity) & CLS (stability). In the composite these are an indicator of the quality of user experience.
- Google uses these KPI’s as a ranking factor – the better your score the higher your pages can rank.
- For Magento ecommerce stores achieving “good” Core Web Vitals scores is a complex process that should start with design and architecture through post delivery optimizations.
- A well executed strategy in meeting Google Core Web vitals should increase user satisfaction and organic traffic through SEO features.
