Render Blocking
Delete render-blocking resources
Compressor Speed performance
Delete render-blocking resources
The first paint of the page is often blocked by a list of URLs shown by SeoChecker report, so it is important to lower their influence: you could inline critical resources, delay non-critical resources and if there is something unused, remove it.
When does SeoChecker spot a render-blocking resource?
There are several cases spotted by SeoChecker both in scripts and stylesheets.
For what concern the scripts, SeoChecker flags it if:
- it is situated in the <head> of the document;
- it doesn't have an async attribute;
- it doesn't have a defer attribute.
The stylesheet is flagged if <link rel=”stylesheet”>:
- doesn't have a disabled attribute: it forbids the browser to download the stylesheet.
- doesn't have a media attribute coherent with the user's device (media=”all” is render-blocking).
Delete render-blocking resources
To identify render-blocking scripts you can check the Coverage tab in Chrome DevTools.
When you have identified them, you can proceed to delete them.
Render-blocking scripts
To delete render-blocking scripts, move the spotted code from the URL to an inline script tag in your HTML page; once the page has finished loading, it will be able to manage the functionality of the page's core.
Render-blocking stylesheets
There are two ways to delete render-blocking stylesheets:
- inside a <style> block at the head of the HTML page, inline critical styles required for the first paint and use the preload link to load the rest of the styles in different moments;
- you can split up the styles into various files managed by media query and then insert a media attribute to every stylesheet link. In this way, when the browser loads a page it will block the first paint to retrieve the stylesheets that correspond to the user's device. Later, we suggest minifying your CSS.