pagespeed-insights – How to remove JavaScript and CSS blocking the display of the top of the page


Good day!

Can't fix last rule from Google Page Speed ​​Insights:

Remove the JavaScript and CSS blocking the display of the top of the page. Number of blocking CSS resources per page: 1. They slow down the display of content.

Approximately 3% of the content at the top of the page can be rendered without waiting for the following resources to load. Try deferring it or loading blocking resources asynchronously, or embed their critical parts directly into the HTML code.

Optimize CSS performance on the following resources:

Tried different ways:

  1. moved the CSS to the bottom of the body,
  2. rendered styles in HTML document

But Google Page Speed ​​Insights still swears, how can I fix the problem?

Link to resource .


Set links to your css and js files at the bottom before the closed /body element. At the same time, for validation, apply property=stylesheet for the style link, something like this:

<link rel=stylesheet property=stylesheet href=code/example.css>

Play with setting async – only for js scripts: set and see what happens in the browser. I also recommend that you use source code compression with this tool and image compression with this tool to speed things up. async example: <script async src=code/modernizr.custom.53362.js></script>

Scroll to Top