Render Blocking

Eliminare le risorse che bloccano il rendering

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?

render blocking

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.

Guide correlate

Per saperne di più Speed performance

Seo Audit

SEO Audit

Prestazioni SEO sulla pagina e checkup.

Oltre 300 parametri per l'analisi approfondita delle pagine.

Provalo adesso

Condividi questa Guida.

Ti è piaciuta? Condividila!

Share it!

Web tools per sviluppatori moderni. Provali!

Generatori, builder e validatori per migliorare le tue performance di ottimizzazione SEO e web

Home Back to top of the page