Chapter 1: How to debug Core Web Vitals using CSS selectors

Many Real User Monitoring (RUM) tools offer valuable insights about elements affecting Core Web Vitals (CWV) metrics. These tools can identify CSS selectors for various key elements: the Largest Contentful Paint (LCP) element, elements suffering significant Cumulative Layout Shift (CLS), or elements that users interact with before a slow Interaction to Next Paint (INP) occurred.

When RUM tools report CSS selectors, they show you which specific elements are affected. By identifying these struggling elements, you can investigate what's impacting them and implement targeted fixes.

In this series, we'll guide you through the complete debugging process. You'll learn how to interpret CSS selectors from RUM reports, connect them to performance bottlenecks, and implement targeted fixes that improve your Core Web Vitals scores.

But before diving into debugging Core Web Vitals issues using this information, let's address a fundamental question: what exactly is a CSS selector?

CSS Selector, a key path Jump to heading #

CSS selectors are like digital address labels that identify specific elements on a webpage and they can be used for different purposes on websites. First, they tell browsers which elements to style – like turning links blue or making buttons larger. But they're also powerful identification tools used by developers and automation tools to find specific elements on a webpage.

For example, a CSS selector might look something like this:

#Main > div > main > div.hero-section > section > div > div > h1

While this might look like a complex string of characters, it's actually just giving very specific directions – like a detailed map. Think of it as saying: "Start at the main entrance (#Main), go through the lobby (div), enter the main hall (main), find the hero section (div.hero-section), and locate the main headline (h1)". Just as you'd need precise directions to find a specific office in a large building, CSS selectors provide exact paths to find specific elements on a webpage.

Locating a CSS selector in Chrome DevTools Jump to heading #

As we now know, RUM tools can report CSS selectors for each Core Web Vital. For example, let's consider we get the selector of an element with poor Interaction to Next Paint (INP) scores. To find what’s causing the slow responsiveness and improve this metric, first we have to identify the element that users click:

• Use the CSS selector to locate it on the page
• Then determine what’s causing the slow interaction.

This section explains how to locate elements by CSS selector on a page using Chrome DevTools.

First, open Chrome DevTools. To do this on Windows or Linux, press F12 or Ctrl + Shift + I. On a Mac, press Cmd + Option + I. Once DevTools is open, navigate to the "Elements" panel where you can inspect the HTML and CSS of the page.

To search for a specific CSS selector, use the search function within DevTools. Press Ctrl + F (or Cmd + F on Mac) to open the search bar, and enter the CSS selector you want to find. This will highlight the relevant elements in the HTML.

If you can't immediately spot the selector, don't worry – check a few common scenarios first: verify the cookie notice status (whether it's accepted or rejected), consider any pop-up conditions such as newsletter prompts, and examine other page load conditions that might trigger the element to appear.

In some cases, it's crucial to emulate specific user conditions to effectively locate a CSS selector. For instance, the appearance and behavior of elements can vary between mobile and desktop views, or under different network speeds and CPU loads. By simulating these conditions in the Performance panel of Chrome DevTools, you can ensure that you're inspecting the correct state of the page. This approach helps you accurately identify and work with the CSS selectors relevant to the user experience you're targeting.

Multiple elements matching a CSS selector Jump to heading #

It's important to note that a single CSS selector can sometimes match multiple elements within the Document Object Model (DOM). This occurs when the selector's criteria apply to more than one element on the page. For instance, consider the selector .button-primary. If multiple buttons on the page share the class button-primary, this selector will target all of them simultaneously.

Let's see this with an example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Store</title>
  </head>
  <body>
    <!-- First product card -->
    <div class="product-card">
      <div>
        <h2 class="title">Premium Headphones</h2>
        <p>High-quality wireless headphones</p>
        <span class="price">$199</span>
      </div>
    </div>

    <!-- Second product card -->
    <div class="product-card">
      <div>
        <h2 class="title">Wireless Speaker</h2>
        <p>Portable Bluetooth speaker</p>
        <span class="price">$149</span>
      </div>
    </div>
  </body>
</html>

In the above example, the CSS selector .product-card > div > h2.title will match both product titles because:

• Both are inside a div with class product-card
• Both are inside a direct child div
• Both are h2 elements with class title

When diagnosing and addressing Core Web Vitals issues with CSS selectors, it's essential to keep this behavior in mind to ensure that you accurately identify the target element among potentially multiple matches, thereby making the most of the insights provided by RUM tools.

CSS Selectors in Shopify Reports   Jump to heading #

Shopify collects real‑user web performance data that you can query in Admin. By default, you’ll find 9 Performance reports to help you assess how your store performs on each Core Web Vital.

While these reports are valuable for spotting performance issues, they don’t include the CSS selectors that help debug and fix them. But we’ve got you covered. This article explains how to get the most from our data—including how to create a report that includes CSS selectors.

Conclusion  Jump to heading #

With this understanding, you can now proceed to explore how to use CSS selectors to debug Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) issues in the subsequent chapters of our series:

Throughout this series, we demonstrate how CSS selectors serve as powerful diagnostic tools for identifying, debugging, and resolving Core Web Vitals issues. By leveraging the methodologies outlined in these chapters, you can systematically analyze performance bottlenecks, implement targeted solutions, and ultimately improve both your Core Web Vitals metrics and the end-user experience of your site.

Cover photo by Zan Lazarevic on Unsplash