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. Ciò include file CSS e JavaScript esterni e qualsiasi altra cosa che possa ritardare la visualizzazione della pagina da parte del browser.
Mentre alcune risorse che bloccano il rendering sono necessarie, come i file CSS che garantiscono l'aspetto corretto della pagina, altre possono essere ottimizzate o eliminate. Per massimizzare la velocità di caricamento del vostro sito web, è essenziale identificare e ridurre al minimo o eliminare le risorse che bloccano il rendering, ove possibile. Avrete notato questa raccomandazione durante il test del 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". Si tratta di risorse che devono essere caricate prima che il browser possa iniziare il rendering della pagina. In genere, si tratta di file CSS e JavaScript esterni.
È possibile utilizzare gli Strumenti per gli sviluppatori di Google Chrome per identificare una risorsa che blocca il rendering. Caricate il vostro sito web in Chrome, quindi aprite gli Strumenti per gli sviluppatori. Fare clic sulla scheda Copertura e verificare che l'opzione "Disattiva cache" sia selezionata. In questo modo sarà possibile visualizzare la versione più aggiornata del sito web.
A questo punto, ricaricare il sito web. Gli Strumenti per gli sviluppatori mostreranno un elenco di tutte le risorse caricate durante il rendering della pagina. Cercare le risorse che hanno una linea rossa accanto. Si tratta di risorse che bloccano il rendering.
3 modi per eliminare una risorsa che blocca il rendering in WordPress?
Ci sono diversi modi per farlo in WordPress.
Metodo 1:
Uno di questi è quello di inlineare i CSS critici, cioè incorporare il codice CSS direttamente nel file HTML invece di richiamare un foglio di stile esterno. Questa soluzione può essere efficace per i siti web di piccole dimensioni con poche pagine, ma non è pratica per i siti web più grandi. Una volta identificate le risorse che bloccano il rendering, è necessario rimuoverle o inserirle in linea. Inlining significa incorporare la risorsa direttamente nel codice, 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 aiutarvi ad automatizzare questa operazione.
Metodo 2:
Un'altra opzione è quella di caricare le risorse non critiche dopo il caricamento iniziale della pagina. Questo può essere fatto usando tecniche di caricamento asincrono, come il caricamento di file JavaScript dopo che il documento è stato analizzato o usando gli attributi defer.
Metodo 3:
Infine, si può anche provare a ridurre il numero di risorse necessarie per ogni pagina. Ciò può significare combinare più file CSS o JavaScript in un unico file o utilizzare immagini più piccole che si caricano più velocemente. Riducendo il numero di risorse che bloccano il rendering, è possibile migliorare significativamente la velocità di caricamento del sito web e offrire una migliore esperienza ai visitatori. Se avete bisogno di più tempo per lavorare con il codice, alcuni plugin possono aiutarvi ad automatizzare questo processo, come Autoptimize, WPRocket ecc.
In alcuni casi, le risorse che bloccano il rendering possono essere necessarie per il corretto funzionamento del sito web. In questi casi, è necessario trovare un modo per ottimizzarle in modo che si carichino più velocemente.
Conclusione
Se avete seguito i consigli di cui sopra, dovreste aver eliminato la maggior parte, se non tutte, le risorse che bloccano il rendering sul vostro sito web. Se avete ancora bisogno di aiuto, consultate il nostro servizio professionale di ottimizzazione della velocità di WordPress. Vi aiuteremo a migliorare le prestazioni e la velocità del vostro sito web, che è essenziale per creare un sito web di alta qualità e di facile utilizzo.
Ricordate che altri fattori possono influenzare le prestazioni del vostro sito web, come il tempo di risposta del server, le dimensioni dei file e la qualità del codice. Tuttavia, l'eliminazione delle risorse che bloccano il rendering è un approccio eccellente per migliorare la velocità e le prestazioni del sito e i voti di Core Web Vitals.
