Blocking files

What we check

In the head of the home page (<head>) we count the stylesheets and scripts that stop the page build:

• stylesheets that are included normally (<link rel="stylesheet">, not counting pure print stylesheets),
• scripts without async, defer or type="module".

With more than five such files we give a note, with more than ten a warning. In the report you see how many stylesheets and scripts there are.

Why it matters

When the browser comes across a stylesheet or a normal script in the head of the page, it stops: it loads the file, processes it and only then carries on. Until then visitors see a white page.

With a fast line this is hardly noticeable. On a smartphone on the move, however, every file costs a request of its own with waiting time, and ten or twenty of them quickly add up to seconds.

The cause is almost always the same: every plugin, every widget and every font brings its own stylesheet or script that is loaded on every page, whether it is needed or not. A contact form plugin loads its files on the home page too, where there is no form at all.

How to fix it

1. Clear out

Remove plugins, widgets and font weights that are not needed. A file that is not loaded is the fastest.

2. Defer scripts

Scripts that are not needed for the first screen get the attribute defer:

<script src="slider.js" defer></script>

3. Combine files

Instead of ten small stylesheets the browser prefers to load one or two larger ones. This is called "bundling" or "combining".

WordPress

Performance plugins such as WP Rocket, Autoptimize, Perfmatters or LiteSpeed Cache can load scripts deferred, combine stylesheets and load files only on the pages where they are needed. After each setting, test the whole website: menus, forms and sliders sometimes react sensitively.

Page builders

Elementor, Divi and similar builders have performance options of their own, such as "Improved Asset Loading" or "Load CSS dynamically". Switch them on.

Wix, Jimdo, Squarespace

Here the provider decides how files are loaded. What can be influenced is mainly the number of embedded apps and widgets.

How to check it yourself

On pagespeed.web.dev the diagnostic "Eliminate render-blocking resources" shows the affected files with the time they cost.

Frequently asked questions

What is the difference between "async" and "defer"?

Both load a script without stopping the page build. "defer" runs the scripts in their order after the page has been built. "async" runs each script as soon as it is loaded. For most website scripts "defer" is the safer choice.

Can all stylesheets be loaded later?

Not easily. Without styling the page would first appear unstyled. A good way is to load a few combined stylesheets and put only the bare minimum for the first screen directly into the HTML.