Performance debugging in DevTools

Chrome DevTools Performance Panel Reimagined: Summary

Key Concepts:

• Performance Panel: Chrome DevTools tool for analyzing website performance.
• LCP (Largest Contentful Paint): Measures perceived load speed.
• TTFB (Time to First Byte): Measures the responsiveness of a web server.
• INP (Interaction to Next Paint): Measures responsiveness to user interactions.
• Chrome UX Report (CrUX): Public dataset of real-user Chrome experience metrics.
• Throttling: Simulating slower network and CPU conditions to mimic real-world mobile performance.
• Flame Chart: Visual representation of code execution over time.
• Render-Blocking Requests: Resources that delay the initial rendering of a page.
• Third-Party Scripts: Scripts from external sources that can impact performance.
• Framework Integration: Displaying performance data in the context of the web framework used (e.g., Angular, Next.js).
• Annotations: Adding notes and highlights to the Performance panel timeline.
• AI Explanations & Suggestions: Using AI to understand and improve performance issues.
• setTimeout: JavaScript function to defer execution of code.

1. Introduction and Problem Identification

The video introduces the reimagined Chrome DevTools Performance panel and demonstrates how to use it to diagnose and fix website performance issues. The scenario involves a user reporting slow interactions on android.com. The presenter, Paul Irish, starts by experiencing the site firsthand and then uses the Performance panel to investigate.

2. Real-World Data and Throttling

• Chrome UX Report (CrUX): The presenter uses CrUX data to see how real users experience the site. This reveals a slower INP than initially observed.
  • CrUX data provides LCP breakdown (local load vs. 75th percentile from the field) and field INP.
• Throttling: To simulate real-world mobile performance, the presenter uses CPU and network throttling.
  • Network throttling is set to "Fast 4G" to match real-world round trip times.
  • CPU throttling is calibrated using a mini-benchmark to simulate a "Mid-tier mobile" device.
• Benefit: This allows developers to understand and replicate the performance issues experienced by their users.

3. Tracing and Insights

• Tracing: The presenter captures a reload trace with full instrumentation to analyze the site's performance.
• Insights: The Performance panel provides insights (upgraded from Lighthouse) to highlight potential performance wins.
  • Examples: Render-blocking requests, LCP by phase, INP by phase.
  • The INP by phase insight reveals a large processing duration.
• Third-Party Scripts: The panel provides a view of third-party script impact.
  • Users can dim third-party scripts to focus on their own code.
  • Scripts can be added to an "Ignore list" to collapse their icicles in the flame chart.

4. Flame Chart Navigation and Framework Integration

• Zooming and Panning: The presenter demonstrates the new zooming and panning controls in the flame chart, allowing users to choose their preferred style (scroll vs. WASD).
• Framework Integration: The panel can now display performance data in the context of the web framework used.
  • Instead of framework function names, it shows component names, hydration, rendering, and update information.
  • This is enabled through performance.measure and console.timeStamp.
  • Angular v20 has this in dev mode, and it's coming soon to Next.js.

5. Annotations and AI Assistance

• Annotations: The presenter adds annotations to the timeline to highlight key events and relationships.
  • Examples: "Render blocked by network," "Video starts here-ish."
• Auto-Annotations: The panel automatically annotates user events (e.g., "Tracked a user event, Tag Manager and Analytics").
• AI Explanations: The presenter uses AI to explain the purpose of specific work in the flame chart.
  • Example: "We're tracking user interaction events across web application. Google Analytics 4 and Universal Analytics?"
• AI Suggestions: The presenter uses AI to get personalized advice on how to fix performance issues.
  • Example: "Recommend breaking up long tasks, perhaps using setTimeout."

6. Fixing the INP Issue

• Problem: The INP issue is caused by a long processing duration in the trackEvent function, which is tracking user clicks for analytics.
• Solution: The presenter implements the AI's suggestion to use setTimeout to defer the non-critical analytics tracking work.
• Verification: After applying the fix, the presenter captures a new trace and verifies that the INP has improved significantly (from 190ms to 99ms).

7. Conclusion

The reimagined Chrome DevTools Performance panel provides a comprehensive set of tools for understanding and improving website performance. By combining real-world data, throttling, insightful visualizations, framework integration, annotations, and AI assistance, developers can quickly identify and fix performance issues, leading to faster and more responsive websites. The key takeaway is that the tool is designed to make the job easier and websites faster by providing actionable insights and facilitating effective problem-solving.