Performance optimization Pitstop #DevToolsTips

Key Concepts

• Core Web Vitals: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), INP (Interaction to Next Paint).
• Performance Panel (Chrome DevTools): Tool for analyzing website performance.
• Performance Insights: Actionable advice for improving performance metrics.
• AI Assistance: Feature within DevTools for tailored performance advice.
• Speculation Rules: API that allows browsers to pre-render pages, improving load times.
• Scheduler.yield API: API that breaks up long tasks, allowing the main thread to remain responsive.
• Main Thread: The primary thread in a browser responsible for executing JavaScript, rendering, and handling user interactions.
• Long Task: A JavaScript task that runs for an extended period, potentially blocking the main thread.

Performance Panel and Core Web Vitals

The video begins by introducing a racing-themed website and highlighting a common performance pitfall: a layout with a large hero image. The presenter, Matias, demonstrates how to use the updated Performance Panel in Chrome DevTools to analyze performance.

• Core Web Vitals at a Glance: Upon loading the Performance panel, users can immediately see Core Web Vitals like LCP, CLS, and INP as recorded during page load. These metrics can be influenced by environment settings.
• LCP Analysis: For the example website, the LCP is around 1.4 seconds, which is considered acceptable. The LCP element is identified as the background image.
• Potential Improvements: Despite the acceptable LCP, small improvements are possible.

Performance Insights and AI Assistance

The video then introduces Performance Insights, a feature designed to provide easily accessible guidance for performance improvements.

• Accessing Insights: To access Performance Insights, users need to record a performance profile on load. This is done by clicking "Record" and "Reload" in the lower-right corner of the Performance panel.
• Insight Sidebar: After the recording, the insight sidebar can be opened by clicking the toggle in the top-left corner.
• Actionable Advice: Clicking on specific insights, such as "LCP request discovery," provides actionable advice and zooms into the relevant section of the trace.
• AI-Powered Tailoring: The "Ask AI" button within an insight opens the AI assistance panel, allowing users to chat with an AI for tailored advice specific to their site.
• Example Fix: For the hero image issue, the presenter demonstrates that without touching code, enabling a "blur placeholder," prioritizing the banner image, and using a system font can significantly improve the LCP timing. A second trace confirms this improvement.

Speculation Rules for Faster Navigation

The next section focuses on improving the loading time of driver profile pages, which currently take over 5 seconds to load.

• The Problem: These pages are from a different application owned by another team, making direct code fixes difficult.
• The Solution: Speculation Rules: The presenter introduces Speculation Rules, an API that allows browsers to pre-render a list of pages.
• Enabling Speculation Rules: This is demonstrated by toggling a checkbox on the main page and reloading.
• Inspecting Speculation Rules:
  • Elements Panel: Users can search for "speculation rules" in the Elements panel to find the JSON configuration within a script element.
  • Application Panel: A more user-friendly way to inspect speculation rules is through the Application panel. Under "Background Services," select "Speculative Loads" and then "Speculations." This view shows both the rules and their results.
• Impact: With speculation rules enabled, the driver profile pages are pre-rendered, resulting in an LCP close to zero when clicked.

Scheduler.yield API for Responsive Animations

The final performance optimization discussed is the Scheduler.yield API, used to address issues with long tasks blocking the main thread.

• The Scenario: Cars on the racetrack are animated using requestAnimationFrame, running on the main thread. Placing an obstacle on a track triggers collision detection, which involves heavy computation also on the main thread, blocking the animation.
• The Problem: This leads to a nearly 2-second INP timing, noticeable even on fast devices.
• The Solution: Scheduler.yield API: This API allows breaking up long tasks and yielding control back to the main thread. This ensures that critical work, like updating animation frames, can proceed before the task continues.
• Demonstration: Enabling the "scheduler.yield" checkbox and reloading the page demonstrates its effect. Placing an obstacle again shows that the animation now runs every other tick, providing visual feedback and reducing INP.
• Further Information: The presenter directs viewers to documentation on web.dev for more information about long tasks.

Conclusion

The video concludes by summarizing the key takeaways:

• Understanding and utilizing Performance Insights for actionable advice, including AI-powered tailoring.
• Debugging and implementing Speculation Rules for faster navigation to pre-rendered pages.
• Applying the Scheduler.yield API as a simple fix to break up long tasks and improve main thread responsiveness.

The presenter encourages viewers to explore the Performance panel in DevTools and share the link with others.