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 l'aspetto corretto della pagina, altre possono essere ottimizzate o eliminate. Per massimizzare la velocità di caricamento del tuo sito web, è essenziale identificare e ridurre al minimo o eliminare le risorse che bloccano il rendering, ove possibile. Potresti aver 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". 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 la visualizzazione . 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:
Una soluzione è quella di incorporare il CSS critico , ovvero incorporare il codice CSS direttamente nel file HTML anziché chiamare un foglio di stile esterno. Questa soluzione può essere efficace per siti web di piccole dimensioni con poche pagine, ma non è pratica per siti web più grandi. Una volta identificate le risorse che bloccano il rendering, sarà necessario rimuoverle o incorporarle. L'incorporazione significa incorporare la risorsa direttamente nel codice, in modo che non debba essere caricata separatamente. Questa operazione può essere eseguita con file JavaScript e CSS. Plugin come Flyingpress, WP Rocket, Swift Performance o LiteSpeed Cache possono aiutarti ad automatizzare questa operazione.
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 potrebbe 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, puoi migliorare significativamente la velocità di caricamento del tuo sito web e offrire un'esperienza utente migliore 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, dovresti aver eliminato la maggior parte, se non tutte, le risorse che bloccano il rendering sul 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, essenziali per creare un sito web di alta qualità e intuitivo.
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 dei Core Web Vitals .
