Sommario:

Come differire il CSS che blocca il rendering?
Come differire il CSS che blocca il rendering?

Video: Come differire il CSS che blocca il rendering?

Video: Come differire il CSS che blocca il rendering?
Video: How to Eliminate Render-Blocking Resources on WordPress (CSS + JavaScript) 2024, Maggio
Anonim

La soluzione più comune, per differire il caricamento del tuo CSS di blocco del rendering , e ridurre render - blocco andata e ritorno è chiamato loadCSS da Filament Group. L'ultima versione sfrutta l'attributo non ancora completamente supportato che consente il caricamento asincrono di CSS.

Quindi, come posso risolvere il blocco del rendering?

Correggi il blocco del rendering JavaScript utilizzando W3 Total Cache Successivamente, è necessario visitare la pagina Prestazioni »Impostazioni generali e scorrere verso il basso fino alla sezione Riduci. Per prima cosa è necessario selezionare "Abilita" accanto all'opzione Riduci a icona e quindi selezionare "Manuale" per l'opzione della modalità Riduci. Fare clic sul pulsante Salva tutte le impostazioni per memorizzare le impostazioni.

In secondo luogo, cos'è l'eliminazione delle risorse di blocco del rendering? render - risorse di blocco rallenta i tempi di caricamento della pagina percepiti del tuo sito WordPress costringendo i browser dei visitatori a ritardare rendering contenuto above the fold mentre il browser scarica immediatamente i file non necessari. Per eliminare il rendering - risorse di blocco su WordPress, puoi utilizzare plug-in standard.

Oltre a sopra, CSS blocca il rendering?

render Blocco CSS . Per impostazione predefinita, CSS è trattato come un render risorsa di blocco, il che significa che il browser non lo farà render qualsiasi contenuto elaborato fino al CSSOM è costruito. L'HTML è ovvio, visto che senza il DOM non avremmo niente da render , ma il CSS requisito potrebbe essere meno ovvio.

Come faccio a sapere se ho risorse di blocco del rendering?

Per identificare le risorse che bloccano il rendering:

  1. Cerca le risorse non critiche caricate prima della riga di avvio del rendering (tramite webpagetest.org).
  2. Prova a rimuovere le risorse tramite Google Dev Tools per vedere come viene influenzato il contenuto della pagina.
  3. Una volta identificato, collabora con gli sviluppatori per trovare la soluzione migliore per rinviare le risorse di blocco del rendering.

Consigliato: