Skip to content

Performance and CrUX

Understanding and optimizing your storefront's performance is crucial for a great user experience.

While tools like Google's Lighthouse and PageSpeed Insights provide valuable "lab data," it's important to also focus on "field data", which reflects real-world user experiences.

The Chrome User Experience (CrUX) report is a public dataset that provides field data from actual Chrome users.

For in-depth debugging and optimization, browser-based tools are invaluable.

Chrome's Performance Panel, for instance, offers a granular view of your site's runtime performance, going beyond the high-level scores of Lighthouse.

It helps you diagnose bottlenecks that may not be obvious from a simple audit.

Third-Party RUM Tools

Beyond the browser's built-in tools, numerous third-party services offer Real User Monitoring (RUM).

These tools collect performance data from your actual users' browsers and aggregate it into a dashboard.

This provides a comprehensive view of how your site performs for different users in various locations, on different devices, and with varying network conditions.

Popular RUM tools can help you quickly spot widespread issues and track your site's performance over time.

Here are a few solutions:

How to use the Performance Panel (Chrome)

  1. Open Developer Tools: Right-click on your page and select "Inspect," or press Cmd+Option+I (Mac) or Ctrl+Shift+I (Windows/Linux).
  2. Go to the Performance Tab: Click on the "Performance" tab.
  3. Start Profiling: Click the "Record" button (the circle) and then reload your page or interact with it.
  4. Stop and Analyze: Once you've captured the interaction, click "Stop". The panel will display a detailed flame chart showing all browser activity, from script execution and rendering to painting. This allows you to identify long-running tasks and understand what the browser is doing at any given moment.

Testing with the PerformanceObserver API

The PerformanceObserver API provides a way to listen for and collect performance measurement events directly in the browser. This is extremely useful for gathering custom metrics or observing specific performance entries like Largest Contentful Paint (LCP).

You can create a PerformanceObserver to watch for specific event types. The observer's callback function will be invoked whenever a new entry for the observed type is recorded.

Example: Observing LCP Candidates

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Log the LCP candidate entry
    console.log('LCP candidate:', entry.startTime, entry.element);
  }
});

// Start observing the 'largest-contentful-paint' event type.
observer.observe({ type: 'largest-contentful-paint', buffered: true });

HTML attribute: elementtiming

To improve the accuracy of performance tracking for specific elements, you can use the elementtiming attribute. This attribute marks an element (like an image or a block of text) so that it can be tracked by the PerformanceObserver.

When you add elementtiming="some-identifier" to an element, you can then retrieve performance entries for it, giving you precise data on when that specific element becomes visible to the user.

Example Usage:

<main>
  <img src="hero.jpg" elementtiming="main-hero-image" alt="Main hero image">
  <h2>Recent Products</h2>
  ...
</main>

You can then use the PerformanceObserver to listen for the element entry type and identify your custom-timed element by its identifier.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.identifier === 'main-hero-image') {
      console.log('Main hero image loaded at:', entry.startTime);
    }
  }
});

observer.observe({ type: 'element', buffered: true });

By using these advanced tools, you can move beyond simple scores and gain a deeper, more actionable understanding of your site's real-world performance.

Sources: - MDN: PerformanceObserver - MDN: elementtiming attribute