Rendering Theoretical 1

Back

Rendering Tool Demo

Welcome to the Rendering Tool Demo website. This site demonstrates the capabilities of the Rendering tool in browser DevTools.

How to Access the Rendering Panel

  1. Open DevTools by pressing F12 or Ctrl+Shift+I (or Cmd+Option+I on Mac)
  2. Click the three-dot menu (⋮) in DevTools
  3. Select More tools > Rendering
  4. A new Rendering panel will appear, typically at the bottom of DevTools

The Rendering panel helps you identify and debug visual performance issues, layout problems, and paint inefficiencies.

Paint Flashing

Enable paint flashing to see areas of the page that are being repainted.

Click me to change color

How to use:

  1. In the Rendering panel, check Paint flashing
  2. Click the box above several times
  3. Notice the green highlights that appear around the box - these indicate areas being repainted

Why it matters: Excessive repainting can cause performance issues. Identifying what triggers repaints helps optimize rendering performance.

Layout Shift Regions

Highlight regions of the page that are shifting during layout changes.

This will expand

How to use:

  1. In the Rendering panel, check Layout Shift Regions
  2. Click the "Trigger Layout Shift" button above
  3. Watch for blue highlighted regions showing where content shifted

Why it matters: Layout shifts create poor user experience. The Cumulative Layout Shift (CLS) metric is a key Web Vital for measuring page stability.

Layer Borders

Show borders around layers to visualize layer boundaries.

Layer 1 (transform)
Layer 2 (will-change)
Layer 3 (normal)

How to use:

  1. In the Rendering panel, check Layer borders
  2. Notice the orange borders that appear around composited layers
  3. Hover over different elements to see layer information

Why it matters: Understanding layer composition helps diagnose performance issues. Too many layers can consume memory, while too few may cause excessive repainting.

FPS Meter

Display the frames per second (FPS) meter to monitor rendering performance.

How to use:

  1. In the Rendering panel, check FPS meter
  2. Click "Start Animation" to run a simple animation
  3. Watch the FPS counter in the top-right corner of your browser
  4. Try throttling your CPU (in Performance panel) to see how it affects FPS

Why it matters: Smooth animations require maintaining 60 FPS. The FPS meter helps identify performance bottlenecks that cause frame drops.

Scrolling Performance Issues

Highlight areas of the page that have scrolling performance issues.

This content has expensive scroll handlers. Scroll to see potential issues.

How to use:

  1. In the Rendering panel, check Scrolling performance issues
  2. Scroll inside the box above
  3. Watch for highlighted areas indicating potential performance issues

Why it matters: Scroll jank creates a poor user experience. This tool helps identify expensive event handlers or visual updates that occur during scrolling.

Highlight Ad Frames

Visualize ad iframes on your page to identify their impact and placement.

Sample Website Header

This is sample content demonstrating how ads appear on a webpage.

The browser can highlight frames that are used for advertisements.

ADVERTISEMENT
BANNER ADVERTISEMENT

How to use:

  1. In the Rendering panel, check Highlight ad frames
  2. Ad iframes will be highlighted with a purple overlay
  3. This helps identify advertisements across your site

Why it matters: Identifying ad frames helps debug layout issues caused by ads and understand their impact on page performance and user experience.

Disable Local Fonts

See how your page displays when local fonts are not available.

This text uses system fonts (Arial, Helvetica)

This text uses serif fonts (Times New Roman)

This text uses monospace fonts (Courier)

This text uses a custom font (if available)

How to use:

  1. In the Rendering panel, check Disable local fonts
  2. Observe how the text above changes as local fonts are replaced with standard fonts
  3. Notice how this affects layout and text appearance

Why it matters: Testing without local fonts helps ensure your site remains legible when custom fonts fail to load or aren't available. It's an important resilience test for your design.

Emulate CSS Media

Emulate different CSS media types (screen, print) and media features (prefers-color-scheme).

This content responds to different media types and features.

This is visible only in screen mode
This is visible only in print mode
This has different styling in dark mode

How to use:

  1. In the Rendering panel, find the Emulate CSS media type dropdown
  2. Select "print" to see how the page would look when printed
  3. Then select "screen" to return to normal view
  4. Below that, find Emulate CSS media feature prefers-color-scheme
  5. Try "dark" and "light" settings to see how your site responds

Why it matters: Testing different media conditions lets you ensure your site works correctly across contexts without having to actually print or change system settings.

Emulate Vision Deficiencies

Simulate how your page appears to users with different vision deficiencies.

Red
Green
Blue
Yellow
Purple

How to use:

  1. In the Rendering panel, find Emulate vision deficiencies
  2. Try different options like "Protanopia" or "Deuteranopia"
  3. Observe how the colored boxes above would appear to users with these conditions

Why it matters: Accessibility is crucial for inclusive web design. This tool helps ensure your color choices work for all users, including those with color vision deficiencies.

Rendering Performance Best Practices

Practice Exercise

Use the Rendering panel to analyze this page and answer the following questions:

  1. Which elements on this page are being promoted to their own compositing layer?
  2. What happens to the FPS when you run the animation while throttling CPU?
  3. Which elements cause layout shifts?
  4. How does this page appear to users with Tritanopia?

Tip: Take screenshots or notes of what you observe to better understand the rendering behavior.