Table of Contents & Menu
On this page
Navigation

Performance and CrUX

Optimizing storefront performance is vital for user experience. Supplement "lab data" (from tools like Lighthouse and PageSpeed Insights) with "field data" from real users. The Chrome User Experience (CrUX) report provides this real-world data.

For in-depth debugging, Chrome's Performance Panel offers a granular view of runtime performance, helping diagnose bottlenecks beyond simple audits.

Third-Party RUM Tools

Real User Monitoring (RUM) services collect performance data directly from your users' browsers. These tools provide a comprehensive view of your site's performance across different users, devices, locations, and network conditions, helping you spot widespread issues and track performance trends.

Recommended RUM 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: Click "Stop" after capturing. The panel displays a detailed flame chart of browser activity (script execution, rendering, painting), helping identify long-running tasks and browser behavior.

Testing with the PerformanceObserver API

The PerformanceObserver API lets you listen for and collect performance events directly in the browser. This is useful for gathering custom metrics or observing specific entries like Largest Contentful Paint (LCP). Create an observer to watch for event types; its callback function activates when a new entry 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

The elementtiming attribute improves performance tracking accuracy for specific elements. Add elementtiming="some-identifier" to an element (e.g., an image or text block) to mark it for `PerformanceObserver` tracking, providing precise data on its visibility.

Example Usage:

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

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 });

These advanced tools provide a deeper, more actionable understanding of your site's real-world performance, moving beyond simple scores.

Sources: - MDN: PerformanceObserver - MDN: elementtiming attribute