What render-blocking resources are
Render-blocking resources are scripts and stylesheets the browser has to wait for before it shows anything. The fewer there are, the sooner your visitors see content.
How it works
The browser reads the HTML from top to bottom. When it meets a <script src="…"> without further attributes, it stops, loads the script, runs it and only then reads on. If the script sits in the head of the page, the screen stays blank all that time.
Stylesheets don't stop the reading, but they do stop the painting: the browser shows nothing until it has every stylesheet that applies to the screen. Otherwise the page would first appear unstyled and then jump.
bytereport counts scripts in the head of the page without defer, async or type="module", and every stylesheet except those for printing. A single blocking script or more than three stylesheets give a warning; more than three blocking scripts or more than six stylesheets, an error.
What matters
deferby default. The script loads in parallel and runs once the HTML has been read. The order of several scripts is kept.asyncfor independent scripts. The script runs as soon as it has arrived, in no fixed order. Suitable for things like visitor statistics that no other script waits for.- Few stylesheets. Bundle them into one or a few files. Print-only stylesheets get
media="print", so browsers don't wait for them. - Deliberate exceptions. Some scripts, a consent tool for example, are meant to load early and without
deferaccording to their vendor. Then leave it at that one.
<script src="/js/app.js" defer></script>
<script src="/js/stats.js" async></script>
<link rel="stylesheet" href="/css/print.css" media="print">If you want to go further, write the CSS for the first screen straight into the HTML and load the rest later. That is fine-tuning and only worth it once everything else is done.
How to set it up
Scripts and stylesheets in the head of the page are set by the theme or template, plus plugins and embedded services. Many CMS optimisation plugins can add defer and bundle stylesheets; check afterwards that everything still works. With custom templates, your agency changes how files are included. The details name every blocking file.