Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Render-Blocking Resources


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.


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

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.

More information

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.


Was this page helpful?