Se gestisci il tuo sito Web tramite Lighthouse, potresti aver notato un suggerimento per rimuovere le risorse che bloccano il rendering.
Ritardando JavaScript e inserendo importanti stili CSS in linea, puoi eliminare le risorse in WordPress che rallentano il rendering. Questo è supportato dalla maggior parte dei plugin di cache, Autoptimize e Async JavaScript. Sia Elementor che Divi hanno modi integrati per sbarazzarsi delle risorse che impediscono il rendering della pagina, utilizzando CSS differiti e in linea. Anche la rimozione di CSS, JavaScript e codice di terze parti non necessari può aiutare nella risoluzione.
In questo articolo, definiremo le risorse che bloccano il rendering e esamineremo i vantaggi di eliminarle dal tuo sito web. Quindi, ti mostreremo cinque modi alternativi per sbarazzartene.
Cosa sono le risorse di blocco del rendering?
Comprendere il tipico processo di caricamento del sito Web è fondamentale prima di esaminare più da vicino le risorse che bloccano il rendering. L'intero contenuto del tuo sito Web deve essere visualizzato (o scaricato) dal browser del visitatore dopo aver fatto clic su un collegamento ad esso. Legge tutto il codice HTML, CSS e JavaScript sul tuo sito Web dall'alto verso il basso. Il tuo sito web non sarà visibile ai visitatori fino a quando il browser non avrà terminato di leggere questa coda di script. Potrebbero dover attendere molto tempo se sono presenti risorse che bloccano il rendering. Fondamentalmente, un file CSS o JavaScript che impedisce al browser di caricare altri contenuti durante l'elaborazione è una risorsa che blocca il rendering. Ciò potrebbe interrompere il processo di rendering e rendere la pagina incompleta o vuota.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti oraQuando sul tuo sito Web sono presenti risorse che bloccano il rendering, nella parte superiore del codice vengono caricati file aggiuntivi. Prima di visualizzare il sito Web, gli utenti devono attendere che questi file vengano elaborati. Le risorse che bloccano il rendering hanno il potenziale per influenzare diversi indicatori di performance del sito web. Ad esempio, il più grande disegno di contenuto misura il tempo necessario per caricare il contenuto principale di una pagina. La prima volta che il materiale dal DOM (Document Object Model) del tuo sito viene visualizzato dal browser è noto come il primo contentful paint. Il tempo di blocco totale è il tempo che intercorre tra il primo disegno contenuto e il tempo di interazione (quanto tempo impiega una pagina per diventare completamente interattiva).
Sebbene non siano necessarie per il caricamento, le risorse che bloccano il rendering possono ostacolare il rendering. L'esperienza utente del tuo sito Web potrebbe risentirne (UX). Quindi è fondamentale eliminarli per impedire ai visitatori di lasciare le tue pagine.
Vantaggi dell'eliminazione delle risorse che bloccano il rendering
Gli utenti di Internet generalmente non amano aspettare il caricamento dei siti web. Un sito Web rapido può invogliare gli utenti a esplorare il tuo materiale e impedire loro di visitare un rivale. Rimuovendo gli elementi di blocco del rendering, stai effettivamente rendendo il codice del tuo sito web il più leggero possibile, il che può essere il segreto per migliorare la velocità della pagina. Poiché le prestazioni del sito e il coinvolgimento degli utenti sono due fattori che i giganti dei motori di ricerca come Google prendono in considerazione durante la valutazione dei siti Web, la rimozione dei file che bloccano il rendering può aiutare a migliorare il posizionamento nei motori di ricerca del tuo sito.
Come eliminare le risorse che bloccano il rendering in WordPress
Forse ti starai chiedendo come rimuovere gli elementi che bloccano il rendering dal tuo sito web ora che sai come individuarli in WordPress. Fortunatamente, abbiamo messo insieme un elenco di molti approcci che puoi adottare per ottenere questo risultato, a partire da quelli più semplici.
Ottimizza il caricamento CSS
Aumentare la velocità di caricamento dei CSS sul tuo sito Web è una tecnica per eliminare le risorse che bloccano il rendering. Un browser carica la tua pagina web dall'alto verso il basso, come detto in precedenza. Ciò può far sì che il processo di caricamento richieda più tempo quando è necessario elaborare determinati file. È fondamentale ricordare che solo alcuni file CSS devono essere caricati per visualizzare la pagina. Pertanto, puoi visualizzare prima i file più importanti quando ottimizzi il caricamento CSS. I CSS che bloccano il rendering possono essere rimossi manualmente, ma puoi anche installare un plug-in per semplificare le cose. Puoi ottimizzare il tuo sito Web direttamente dalla dashboard di WordPress utilizzando Jetpack Boost. Questo plug-in semplifica l'implementazione del caricamento lento, il rinvio di JavaScript non essenziale e il miglioramento del caricamento CSS. Uno dei modi più semplici per sbarazzarsi delle risorse che bloccano il rendering in WordPress è farlo.
Inizia cercando Jetpack Boost in Plugin Aggiungi nuovo nella dashboard di WordPress. Installa e attiva il plug-in sul tuo sito web.
Puoi andare su Jetpack My Jetpack se hai già caricato Jetpack. Cerca Boost e seleziona Attiva dall'elenco dei prodotti Jetpack.
Dopo che il plug-in è stato attivato, fai clic sulla scheda Jetpack Boost e scegli Inizia.
Il tuo sito web riceverà immediatamente una valutazione delle prestazioni da Jetpack. Vedrai un voto in lettera insieme alle informazioni sui tuoi punteggi desktop e mobile.
Quindi, attiva questa funzione scorrendo verso il basso fino a Ottimizza caricamento CSS. Quando attivato, Jetpack Boost aumenterà il CSS cruciale per il tuo sito Web in modo che si carichi più velocemente.
Rinvia JavaScript non essenziale
Puoi prendere più misure per sbarazzarti delle risorse che bloccano il rendering in WordPress al di fuori solo dell'ottimizzazione del caricamento CSS. Anche JavaScript non essenziale può essere posticipato per velocizzare ulteriormente il caricamento del tuo sito web. JavaScript non essenziale può essere ritardato per ritardare alcuni processi fino a dopo il caricamento del contenuto. È possibile impedire al browser di eseguire i file JavaScript se non sono necessari per il caricamento di una pagina. Fortunatamente, l'utilizzo del plug-in Jetpack Boost semplifica l'operazione. Puoi facilmente posticipare JavaScript non essenziale dopo aver ottimizzato il processo di caricamento CSS. Attiva l'interruttore dell'area Defer Non-Essential JavaScript. Questa sezione si trova sotto la sezione Ottimizza caricamento CSS.
Il plug-in aggiornerà la sua valutazione delle prestazioni complessive della tua pagina dopo aver abilitato questa impostazione. Verrà visualizzato il tuo punteggio prima e dopo l'utilizzo di Jetpack Boost.
Dai un'occhiata ai punteggi negli screenshot presi sia prima che dopo aver completato questo processo. Noterai che l'aumento della velocità della pagina è stato ottenuto ritardando JavaScript non essenziale e caricando CSS in modo più efficiente. I browser possono caricare i tuoi contenuti più rapidamente perché non devono eseguire script di grandi dimensioni.
Rinvia le immagini fuori schermo
Sebbene le immagini non siano una risorsa che impedisce il rendering delle pagine, potresti pensare di velocizzare il loro tempo di caricamento. I siti Web hanno spesso immagini fuori schermo che non vengono visualizzate fino a quando un utente non interagisce con la pagina, come lo scorrimento. Puoi rimandarli con il caricamento lento perché non sono necessari per il caricamento della pagina web. Solo le immagini che i visitatori possono vedere vengono caricate in modo pigro. Queste foto verranno caricate appena prima di essere visualizzate sulla pagina una volta che l'utente scorre. Un browser tenterà di caricare tutte le immagini su una pagina contemporaneamente se il caricamento lento non è abilitato. Più tempo impiega il tuo materiale a caricarsi, più è probabile che i visitatori abbandonino il tuo sito.
Il caricamento regolare potrebbe non essere un problema se un visitatore utilizza un computer desktop. Smartphone e tablet, invece, hanno schermi più piccoli e meno banda. Il tuo sito Web potrebbe consumare più larghezza di banda e richiedere più tempo per il caricamento per gli utenti di telefoni cellulari se carica completamente tutte le sue foto contemporaneamente. Questo problema viene risolto tramite caricamento lento.
Per abilitare il lazy loading sul tuo sito, utilizza Jetpack Boost. Basta cercare l'opzione Lazy Image Loading e abilitarla.
Se lo fai, lo spettatore vedrà le immagini caricate sul tuo sito web solo quando scorre la pagina verso il basso. Anche se le foto non sono una risorsa che rende i blocchi, l'abilitazione del caricamento lento può velocizzare la tua pagina.
Elimina le risorse che bloccano il rendering con Elementor/Divi
Sia Elementor che Divi includono opzioni per rimuovere le risorse che ostacolano il rendering.
Abilita il caricamento CSS migliorato e Font-Awesome Inline nelle impostazioni di Elementor Experiments per caricare CSS e font inline, rendendoli non bloccabili. Il caricamento delle risorse migliorato elimina CSS/JavaScript non necessari, il che migliora i fondamentali web vitals in vari modi.
Applicando CSS cruciali, rimandando CSS/JavaScript e caricando i caratteri in linea, le opzioni di prestazioni di Divi possono anche ridurre le risorse che bloccano il rendering.
Rimuovi manualmente JavaScript che blocca il rendering
Puoi anche eliminare manualmente le risorse che bloccano il rendering, sebbene l'installazione di un plug-in di ottimizzazione sia un'opzione molto più semplice. Idealmente, dovresti pensare a questa scelta solo se sei un programmatore esperto. Se desideri ridurre il numero di plug-in sul tuo sito Web, anche questa procedura potrebbe essere utile. Puoi assegnare ai tuoi file una proprietà asincrona o differire per consentire a JavaScript di funzionare in modo più efficiente. Il browser verrà istruito a eseguire il rendering degli script non critici separatamente contrassegnandoli come tali. Entrambe le caratteristiche possono essere utilizzate per velocizzare il caricamento delle informazioni HTML.
Il file HTML viene analizzato in modo tipico fino a quando non incontra il file di script. L'analisi si interromperà quindi mentre individua lo script. Dopo averlo scaricato ed eseguito, l'analisi continua.
Durante l'elaborazione dell'HTML rimanente, il browser può scaricare JavaScript grazie alla funzione asincrona. Dopo il download, può interrompere l'elaborazione HTML ed eseguire lo script.
L'attributo defer funziona in modo simile, consentendo al browser di scaricare lo script mentre analizza l'HTML. La differenza è che ritarda anche l'esecuzione dello script fino al completamento dell'analisi HTML.
Devi includere una parte di codice nel tuo file functions.php per implementare una di queste proprietà. Devi prima individuare il tag script> della risorsa che blocca il rendering. quanto segue come attributo asincrono:
<script src="resource.js" async></script>In alternativa, considera come può apparire uno script quando viene utilizzata la proprietà defer:
http://resource.jsMentre un plugin può prendersi cura di questi attributi per te, farlo da solo potrebbe soddisfare meglio le tue preferenze. In tal caso, è fondamentale capire quando applicare ciascun attributo. È necessario utilizzare una proprietà defer per gli script non essenziali che dipendono da un altro script. L'opzione async è appropriata per qualsiasi altro script.
Applica gli attributi asincroni o differisci con un plug-in
Usa un plugin come Async JavaScript se hai problemi a modificare manualmente gli script. Hai il controllo completo su quali script hanno la proprietà async o defer grazie a questo strumento.
Dopo aver installato il plug-in, selezionare Abilita JavaScript asincrono in Impostazioni JavaScript asincrono.
Successivamente, vai alla sezione intitolata Async JavaScript Method. Puoi scegliere se abilitare gli attributi async o differire qui.
È una buona idea escludere questi script perché molti plugin dipendono da jQuery. L'applicazione di proprietà asincrone a jQuery può causare la rottura del tuo sito web.
In caso di dubbio, puoi utilizzare l'attributo defer, ma escludere completamente jQuery è la migliore linea d'azione.
È ora possibile specificare quali script si desidera eseguire in modo asincrono o rinviare. Devi stare attento a mettere ogni script nella sezione appropriata.
È possibile elencare tutti gli script che si desidera escludere da questa procedura nella sezione Esclusione script.
Ci sono anche opzioni per escludere plugin e temi nella parte inferiore della pagina. Gli script per qualsiasi tema o plug-in che menzioni qui non saranno applicabili alle caratteristiche asincrone o differite.
Dopo aver apportato le modifiche necessarie, è possibile fare clic su Salva impostazioni. Questo approccio può essere un utile compromesso tra la modifica manuale degli script e l'utilizzo di un plug-in per gestire l'attività per te. In alternativa, puoi eliminare questi passaggi aggiuntivi utilizzando un'applicazione all-in-one come Jetpack Boost.
Avvolgendo
Facendo in modo che i browser dei visitatori pospongano il rendering dei contenuti above the fold durante il download di risorse che non sono immediatamente necessarie, le risorse di blocco del rendering aumentano i tempi di caricamento della pagina percepiti del tuo sito WordPress. Dovresti ritardare il caricamento delle risorse che non sono immediatamente necessarie per aiutare i visitatori a caricare più rapidamente l'area visualizzabile della tua pagina. Usa plugin predefiniti per sbarazzarti delle risorse che bloccano il rendering su WordPress. Puoi combinare Autoptimize e Async JavaScript, due plugin creati dallo stesso sviluppatore, per una soluzione gratuita. Potete utilizzare WP Rocket, che offre una particolare interazione con Kinsta e può assistervi con molte ulteriori modifiche alle prestazioni di WordPress, se siete disposti a pagare per questo.
