Render Blocking Resources


How to Fix

In order to pass this test, you have to reduce the impact of render-blocking resources.

First, you have to identify what's critical and what's not. You can use the Chrome DevTools (Coverage tab) to identify non-critical CSS and JS.

Once you've identified critical code, you can try the below methods to eliminate render-blocking resources:

  • inline critical JS within a script tag in your HTML document
  • inline critical CSS required for the first paint inside a style block in the head of the HTML document
  • move the script and link tags at the end of the HTML document
  • add async or defer attributes to non-critical script or link tags
  • split CSS styles into different files, organized by media query
  • compress and minify your text-based resources