Enable the "Identify scrolling performance issues" in Browser DevTools
Welcome to the Rendering Tool Hands-On website. This page provides practical exercises to help you apply what you've learned about the Rendering tool in browser DevTools.
Enable the "Highlight repainted areas with paint flashing" option and interact with the page to see which areas are being repainted.
Enable the "Highlight layout shift regions" option and refresh the page to see regions experiencing layout shifts.
Enable the "View layers and tiles with layer borders" option and inspect the borders of layers and tiles on the page.
Enable the "View frames per second in real time with frame rendering stats" option and observe the frame rendering statistics.
Enable the "Identify scrolling performance issues" option and scroll through the page to identify any performance issues.
Enable the "Highlight ad frames" option and identify ad frames on the page.
Enable the "Disable local fonts" option and observe the changes in font rendering.
This page demonstrates the use of @font-face rules to define custom fonts. The text below uses a custom font defined with @font-face.
This text is using the custom font defined with @font-face.
Enable the "Emulate a focused page" option and observe the changes.
Enable the "Enable automatic dark mode" option and observe the page in dark mode.
Use the dropdowns to emulate various CSS media features and observe the changes:
This paragraph is visible in both normal and high contrast modes.
This paragraph is only visible in normal contrast mode.
This paragraph is only visible in high contrast mode.
Enable the "Highlight repainted areas with paint flashing" option and use the Performance panel to analyze paint timing. Identify which elements are causing the most repaints and optimize them.
Common Issue: Frequent repaints due to unnecessary style changes.
Solution: Minimize style changes and batch DOM updates.
Common Issue: Repaints triggered by hover effects.
Solution: Use CSS transitions to minimize repaints.
Enable the "View frames per second in real time with frame rendering stats" option and monitor the frame rendering stats. Identify performance bottlenecks and optimize the rendering pipeline.
Common Issue: Low frame rate due to complex animations.
Solution: Optimize animations and use CSS transforms for better performance.
Common Issue: Low frame rate due to resizing elements.
Solution: Avoid resizing elements during animations.
Enable the "Enable automatic dark mode" option and optimize the page for dark mode. Ensure that all elements are readable and visually appealing in dark mode.
Common Issue: Poor readability in dark mode.
Solution: Adjust colors and contrast to ensure readability in dark mode.
Common Issue: Insufficient contrast in dark mode.
Solution: Ensure sufficient contrast between text and background colors.