Render-Blocking Resources

Overview

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.

Recommendations

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. Build tools like critical can help you extract and inline critical CSS.
  • 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.

Identify render-blocking code

Use the Coverage tab in Chrome DevTools to identify non-critical CSS and JS.

The Coverage tab.
Figure 1. The Coverage tab

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, some browsers do not download the stylesheet. Note that this attribute is not supported in all browsers.
  • Does not have a media attribute that matches the user's device.

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

  • Does not have an async attribute.

Audit source

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.