Table of Contents
- Overview of the Core Web Vitals
- Battle of the E-Commerce Titans
- Utilizing CrUX Competitive Reports
- Leveraging Blue Triangle
Overview of the Core Web Vitals
In the first 3 sessions, we focused on the Core Web Vitals, technical metrics set out by Google that help you to provide your customers with a smooth user experience. They also affect how Google sees you, & play a part in SEO rankings. Check out the previous sessions here.
Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
The Core Web Vitals, as of Winter 2023, are:
- Largest Contentful Paint (LCP): Measures the time from navigation to the time when the browser renders the largest bit of content from the DOM.
- First Input Delay (FID): Measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.
- Cumulative Layout Shift (CLS): Measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
Battle of the E-Commerce Titans
“Leaders start with the customer and work backwards. They work vigorously to earn and keep customer trust. Although leaders pay attention to competitors, they obsess over customers.” Amazon's Job Portal
We can look at our competitors all day long, but the end goal is looking within and improving our own customer’s digital experience to remove friction.
Amazon started out as an online only business. Every impression of the business started with a user requesting the webpage. Amazon knows this, and they obsess over providing their customers with a good experience on all fronts. Customers have now developed quite an ‘Amazonian’ expectation for digital experiences. That is fast and reliable websites available 24/7/365 that provide a quick and straightforward way to transact, refund, and repeat purchase whilst remembering your preferences and reducing friction along their journey.
Utilizing CrUX Competitive Reports
Using Amazon as an example, how do we start to understand the experience that users are getting when they’re visiting our competitor’s sites?
Enter Google & Blue Triangle. Google’s Chrome User Experience Report is a data set that provides real user experience metrics for how a subset of Chrome users (those that have opted in to data collection through Chrome settings) experience your website by URL & device (desktop, mobile). It’s the official dataset of the Web Vitals program, and this is the same data that you’ll be accessing when running a pagespeed insights report.
Blue Triangle has developed the ability to capture & archive Google’s data from within the portal. To configure within Blue Triangle, you simply provide a list of site names, page categories, and paste the URLs in for each site you want to monitor. For more detail on Blue Triangle's Executive CrUX report, check out this article. There is also a product training all about our executive reports available here. Blue Triangle then uses Google’s raw numbers which you can see in the bottom half of the page and gives them a rank. The Best to Worst rank is how Blue Triangle ranks you in this cohort of sites.
Example Report:
This report not only highlights areas your site is doing well in accordance to Google’s thresholds with real user data, but also provides an opportunity to see areas for potential improvement. It allows you to see barriers user are encountering across your site & by device.
The CrUX report cannot be run for historical data. We recommend configuring a report even if you are not currently utilizing it. This can be useful for performing retrospective and competitive analysis on peak periods such as Black Friday, Christmas, or Back-to-school, if that’s where your niche’s peak is. Having a CrUX report configured provides a timeline as to the experience that real users are receiving on your site.
What Does It Mean?
We don’t just want another set of numbers to take apart and digest, so how do we go about making sense of this data?
Unless I’m investigating something specific, I start off looking at the high levels. For example, as a non technical Product Owner focusing on the delivery of home decor, I’ve decided to look at homepages, category pages, and a product page for some of our top competitors.
Here, we can see that Amazon and its competitors generally have responsive sites according to their FID scores, but where there’s more variability is the content loading speeds, and the visual stability of the page as it does load. We can see Amazon is also delivering the most important content to its users in a timely manner via the LCP metric. If I was performing a competitive analysis through the lens of Amazon, I’d be interested in why my CLS product page score
- wasn’t in line with my other pages' performance
- is significantly behind Walmart
Leveraging Blue Triangle
Blue Triangle enables you to surface and dig into why the Core Web Vital scores are what they are.
Largest Contentful Paint & Cumulative Layout Shift
Let’s have a look at our loading metrics for Amazon and Walmart’s home page. I’ve taken images from our filmstrips feature within the synthetic monitors and placed 4 frames of Amazon and Walmart loading in side by side. We can see exactly how visually stable the page is, as well as visually where the largest piece of content is loading in for your users. There’s also technical data we can then dig into that provide the breakdowns of what is driving the Core Web Vital scores using Google’s recommended methods and code.
First Input Delay
We can have a look into what’s causing the web page to be busy in the background as well via the synthetic aggregate waterfall. That allows us to trend all resources and content that’s loading on the page, including long running JavaScript code if you utilize our synthetic monitors.
Once we’ve identified areas of potential performance improvement, we can implement these changes within our website and come back into the Blue Triangle portal to verify with real user data and synthetics the impact on our web page load.
Core Web Vitals Report
For more information on how to configure a Core Web Vitals Report, check out this article.
Core Metrics by Site Report
For more information on how to configure a Core Metrics by Site Report, check out this article.
Customer Journey Analysis
Finally, let’s take a look at the Customer Journey Analysis page, which allows us to visualize our bottlenecks and target areas of specific improvement, and identify our top most converting paths. These paths could be e-commerce and transaction related or action-oriented if your niche is financial services or education (i.e college enrollments). At the start of the training session, we defined an ‘Amazonian’ expectation of digital experience. I wanted to highlight the goal of competitive analysis which that’s looking inward between departments or looking outward at our closest competitors is to remove friction from the user’s journey on your site. Our pain points on this chart are marked in red and orange, and we want to take them from pain points to areas of the site that present as little friction as possible.
Example: