Render-Blocking Resources

Identifies scripts and stylesheets that can block page rendering.

What is this check?

Render-blocking resources are files (typically CSS and JavaScript) that the browser must download, parse, and execute before it can render any of the visible page content.

Why is it important?

If these files are large or slow to load, they create a bottleneck that leaves the user looking at a blank white screen for a long time, even if the rest of the page is ready.

What is the impact?

This is a primary cause of a slow First Contentful Paint (FCP) and a poor user experience. It's a critical performance issue to address.

Example Implementation

<!-- This script will block rendering -->
<script src="large-blocking-script.js"></script>

<!-- Deferring the script prevents it from blocking -->
<script src="non-blocking-script.js" defer></script>

<!-- Async also works for independent scripts -->
<script src="analytics.js" async></script>