Don't miss out on the action at this year's Chrome Dev Summit, happening on Oct 23rd and 24th. Learn more.

Render-Blocking Resources

Why the audit is important

Fast page loads result in higher user engagement, more pageviews, and improved conversion.

You can improve your page load speed by inlining links and scripts that are required for first paint, and deferring those that aren't.

How to pass the audit

In your report, Lighthouse lists all of the render-blocking links or scripts that it has detected. The goal is to reduce this number.

As mentioned in How the audit is implemented, Lighthouse flags three types of render-blocking links: scripts, stylesheets, and HTML imports. How you optimize depends on what type of resource you're working with.

  • For critical scripts, consider inlining them in your HTML. For non-critical scripts, consider marking them with the async or defer attributes. See Adding Interactivity with JavaScript to learn more.
  • For stylesheets, consider splitting up your styles into different files, organized by media query, and then adding a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device. See Render-Blocking CSS to learn more.
  • For non-critical HTML imports, mark them with the async attribute. As a general rule, async should be used with HTML imports as much as possible.

How the audit is implemented

This section explains how this audit is implemented, so that you can understand how the audit's score is calculated.

Lighthouse identifies three types of blocking resources.

A <script> tag that:

  • Is in the <head> of the document.
  • Does not have a defer attribute.
  • Does not have an async attribute.

A <link rel="stylesheet"> tag that:

  • Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet.
  • Does not have a media attribute that matches the user's device.

A <link rel="import"> tag that:

  • Does not have an async attribute.

Feedback