Optimizing Google Core Web Vitals for a Major Shoe and Footwear Retailer in North America

Our client is an American public company that predominantly sells designer and name- brand shoes. The company has 500+ locations in both the United States and Canada. In 2018, the company also acquired another organization, a legendary product design and brand development organization. With this acquisition, our client transformed into a global, industry-leading footwear company with product design, development, sourcing, production, and robust wholesaling capabilities with more than 1,000 points of distribution.

In early 2022, our client undertook an internal assessment of its e-commerce platform and decided to improve its scores for Core Web Vitals—an initiative by Google to provide unified guidance for quality signals necessary for delivering a great user experience on the web.

Put another way, Core Web Vitals represents a set of metrics that measure real-world user experience when it comes to loading performance, interactivity, and visual stability of web pages. All of these are critical for improving the ranking of customer’s pages in Google search engine results. Specific Core Web Vitals include:

• Largest Contentful Paint (LCP) which measures how long it takes for the largest content element on a web page to load.
• First Contentful Paint (FCP) which measures the time from when a user first navigates to a page to when any part of the page’s content is rendered on the screen.
• Cumulative Layout Shift (CLS) which measures how much of a page’s layout shifts unexpectedly as it loads.
• First Input Delay (FID) which measures how long it takes for a browser to respond to a user’s first interaction with a page.

Knowing that optimizing these Google Core Web Vitals was essential to getting more organic traffic to grow the organization’s business across its vast e-commerce platform (and related mobile apps), the leadership team decided to make this optimization effort a high-priority initiative requiring immediate action.

At the time, using Google Lighthouse, a free tool that assesses the overall quality and user experience of web pages based on the above metrics, our customer had a score in the range of 7 on a scale from 0 to 100 (best). The score is comprised of a weighted average of the specific Core Web Vitals metrics.

The head of digital, who already had a prior professional working relationship with JBS Dev, reached out for guidance and technical resources to quickly improve the organization’s Google Core Web Vitals while also achieving long-term roadmap objectives. This would involve making changes to the e-commerce site and setting acceptable target scores for Core Web Vitals.

Nathan Mathis, Senior Software Engineer and Delivery Lead at JBS Dev, said, “We were very pleased to have an opportunity to work with such an iconic brand and eager to get started optimizing Google’s Core Web Vitals across the customer’s expansive e-commerce platform.”

As a first step, in March 2022, the JBS Dev team met with the client’s digital team. Together they collaborated on approaches for remediating the existing e-commerce code base with the goal of improving Core Web Vitals for targeted web pages across the entire e-commerce platform (including all subsidiary brands) covering the most active areas of the site. This would also extend to all mobile apps. Two alternative approaches were thoroughly considered as potential solutions:

1. The existing website, built using Google’s open-source Angular front-end framework, would be optimized through incremental improvements to pages; or
2. The website would be migrated from Angular to React, which would allow pages to be rewritten from scratch with the optimization of Core Web Vitals prioritized during the implementation.

Ultimately, after much deliberation, the group decided to go with the first approach as it would be simpler, involve less risk, and not require the organization to move to another platform. With that decided, for the initial effort, JBS Dev recommended the following process:

• Determine existing baseline and target scores for Core Web Vitals
• Identify existing pages on the e-commerce site where these scores need to be improved
• Select an auditing/measurement tool such as Google Lighthouse that generates reports with scores using the Chrome browser
• Thoroughly review the existing code base
• Identify issues/areas for score improvement
• Determine the score impact and effort required to remediate the code and improve the Core Web Vitals score
• Remediate the code and check the new Core Web Vitals score to gauge improvement
• Repeat this process until acceptable Core Web Vitals scores are achieved

Following the above process, JBS Dev and our client targeted the following e-commerce pages on the platform for improvement:

• Home Page
• Product Listing Pages (PLPs) including the men’s shoe page and the women’s shoe page
• Product Detail Pages (PDPs)

After four months of remediating the code for the targeted web pages, our customer saw a significant improvement in its Google Lighthouse score. In June 2022, the score shot up from a range of ~7 to a range of ~25. This represented an increase of 257% in a relatively short window of time.

Many intricate and iterative changes made to the code base by JBS Dev were responsible for optimizing the overall score. Some of these changes were even suggested by the Google Lighthouse tool. Below are just a few examples of the work done to increase the score:

• Making sure that page elements loaded to provide a better user experience—this alone was responsible for big score changes related to Cumulative Layout Shift (CLS) which receives a 30% weight in determining the overall Google Lighthouse score.
• Reducing the time it takes to load the first big image on any webpage as measured by the First Contentful Paint (FCP) metric.
• Adding a “skeleton view” of webpage content, as a visual cue, before the actual content renders to encourage users to remain on the page for the content to fully load.
• Correcting image size issues throughout the pages that were slowing down both the desktop e-commerce platform and related mobile apps.

“Overall, our customer was extremely satisfied with the initial results achieved,” said Mathis. “We are now working on a regular basis with their organization to bring further performance enhancements and improvements to their e-commerce platform and mobile devices.” Currently, JBS Dev continues to augment the customer’s staff of multiple teams in several critical areas including SEO, content management, and customer retention.