Quando si parla di prestazioni web, uno dei fattori critici è l'eliminazione delle risorse che bloccano il rendering. Le risorse che bloccano il rendering ritardano il rendering di una pagina e possono includere elementi come file JavaScript e CSS. Queste risorse devono essere caricate prima che il browser possa iniziare il rendering della pagina. Questo include file CSS e JavaScript esterni e qualsiasi altra cosa che potrebbe ritardare il browser nella visualizzazione iniziale della pagina.
Sebbene alcune risorse che bloccano il rendering siano necessarie, come i file CSS che garantiscono la corretta visualizzazione della pagina, altre possono essere ottimizzate o eliminate. Per massimizzare la velocità di caricamento del tuo sito web, è fondamentale identificare e ridurre al minimo o eliminare, ove possibile, le risorse che bloccano il rendering. Potresti aver notato questo suggerimento durante il test di un sito WordPress con lo strumento PageSpeed.
Come identificare una risorsa che blocca il rendering?
Quando si cerca di migliorare le prestazioni del proprio sito web, ci si può imbattere nel termine "risorse che bloccano il rendering". Questo termine si riferisce a tutte le risorse che devono essere caricate prima che il browser possa iniziare a visualizzare la pagina. In genere, questo include file CSS e JavaScript esterni.
Puoi utilizzare gli Strumenti per sviluppatori di Google Chrome per identificare una risorsa che blocca il rendering. Carica il tuo sito web in Chrome, quindi apri gli Strumenti per sviluppatori. Fai clic sulla scheda Copertura e assicurati che l'opzione "Disabilita cache" sia selezionata. In questo modo visualizzerai la versione più aggiornata del tuo sito web.
Ora ricarica il tuo sito web. Gli Strumenti per sviluppatori ti mostreranno un elenco di tutte le risorse caricate durante il rendering della pagina. Cerca tutte le risorse contrassegnate da una linea rossa . Queste sono le risorse che bloccano il rendering.
3 modi per eliminare una risorsa che blocca il rendering in WordPress?
Esistono diversi modi per farlo in WordPress.
Metodo 1:
Un criticodirettamente nel codice HTML, anziché richiamare un foglio di stile esterno. Questa soluzione può essere efficace per siti web di piccole dimensioni con poche pagine, ma non è pratica per siti più grandi. Una volta individuate le risorse che bloccano il rendering, è necessario rimuoverle o incorporarle direttamente nel codice HTML. L'incorporazione diretta nel codice HTML significa inserire la risorsa direttamente nel codice stesso, in modo che non debba essere caricata separatamente. Questo può essere fatto con file JavaScript e CSS. Plugin come Flyingpress, WP Rocket, Swift Performance o LiteSpeed Cache possono aiutare ad automatizzare questo processo.
Metodo 2:
Un'altra opzione è caricare le risorse non critiche dopo il caricamento iniziale della pagina. Questo può essere fatto utilizzando tecniche di caricamento asincrono, come il caricamento di file JavaScript dopo l'analisi del documento o l'utilizzo di attributi defer.
Metodo 3:
Infine, puoi anche provare a ridurre il numero di risorse necessarie per ogni pagina. Questo può significare combinare più file CSS o JavaScript in un unico file oppure utilizzare immagini più piccole che si caricano più velocemente. Riducendo il numero di risorse che bloccano il rendering, puoi migliorare significativamente la velocità di caricamento del tuo sito web e offrire una migliore esperienza utente ai tuoi visitatori. Se hai bisogno di più tempo per familiarizzare con il codice, alcuni plugin possono aiutarti ad automatizzare questo processo, come Autoptimize, WPRocket, ecc.
In alcuni casi, le risorse di rendering-blocking potrebbero essere necessarie per il corretto funzionamento del tuo sito web. In questi casi, dovrai trovare un modo per ottimizzarle in modo che si carichino più velocemente.
Incartare
Se hai seguito i consigli sopra riportati, dovresti aver eliminato la maggior parte, se non tutte, le risorse che bloccano il rendering del tuo sito web. Se hai ancora bisogno di aiuto, dai un'occhiata al nostro servizio professionale di ottimizzazione della velocità di WordPress. Ti aiuteremo a migliorare le prestazioni e la velocità del tuo sito web, elementi essenziali per creare un sito web di alta qualità e di facile utilizzo.
Ricorda che altri fattori possono influenzare le prestazioni del tuo sito web, come il tempo di risposta del server, le dimensioni dei file e la qualità del codice. Tuttavia, eliminare le risorse che bloccano il rendering è un ottimo approccio per migliorare la velocità e le prestazioni del tuo sito web e Core Web Vitals .
