JavaScript e CSS che bloccano il rendering in WordPress: 5 plugin per risolverlo

Non è passato molto tempo da quando Google ha annunciato che i siti Web che impiegano più di tre secondi per caricarsi non sono SEO-friendly.

In questa era di Internet e del marketing digitale, devi avere il sito web più veloce se vuoi competere efficacemente con migliaia di rivali in tutto il mondo. Non c'è dubbio che un sito web più veloce ha maggiori possibilità di attirare visitatori e aumentare il loro coinvolgimento nei loro contenuti.

L'esecuzione di un sito Web WordPress significa un numero significativo di script che vengono eseguiti contemporaneamente per rendere accessibile il tuo sito.

Tuttavia, non tutti questi elementi sono sempre essenziali per il caricamento. Se hai mai verificato le prestazioni del tuo sito web con Google Page velocità Insights, probabilmente ti sei imbattuto nell'opzione JavaScript e CSS di blocco del rendering che influisce sulla sua velocità.

Oggi parleremo di questi file estranei e ti illumineremo sui modi in cui puoi rimuoverli per migliorare il tuo sito.

 

Che cos'è JavaScript e CSS che bloccano il rendering?

In sintesi, JavaScript e CSS che bloccano il rendering sono una serie di fogli di stile e script necessari per essere eseguiti interamente prima che un sito si carichi e diventi visibile.

I temi e i plug-in che installi sul tuo sito Web WordPress aggiungono molti di questi file alla sezione front-end del tuo sito Web. E come avrai intuito, alcuni di essi rallentano il tempo di caricamento della pagina e impediscono il rendering delle tue pagine.

Quando un visitatore del sito Web apre il tuo sito Web, il browser Internet carica prima i file JavaScript e CSS necessari prima dell'HTML.

Questa è una procedura ordinaria poiché una pagina senza questi elementi essenziali sarà inutilizzabile. Il problema è che il browser Web non può eseguire il rendering della pagina prima che questi file vengano caricati completamente.

Il trucco qui è che puoi posticipare il caricamento di alcuni script senza causare problemi a ciò che i visitatori vedono all'apertura di una tua pagina.

I proprietari di siti Web possono apportare modifiche al proprio sito per impedire ai browser Web di caricare codici al di fuori di quanto necessario per la parte superiore della pagina che l'utente vede immediatamente.

In altre parole, i browser caricano solo i file essenziali per quella sezione prima che un utente scorra la pagina. Quest'area delle pagine web è chiamata ATF che sta per Above the Fold. Altre parti che richiedono agli utenti di scorrere verso il basso per poter vedere è la sezione non ATF.

Pertanto, se il tuo sito web carica i codici JavaScript e CSS relativi alle sezioni non ATF, il caricamento delle pagine richiede più tempo. Ed è per questo che Google cerca di dirti di interrompere l'esecuzione delle risorse non necessarie nei codici del tuo sito web.

 

Trova JavaScript e CSS che bloccano il rendering

Il modo più semplice per scoprire questo problema è eseguire un test di velocità utilizzando Google PageSpeed ​​Insights. Una volta visitata la pagina, tutto ciò che devi fare è inserire il tuo indirizzo URL nel campo richiesto e quindi fare clic sul pulsante "Analizza".

Se hai questo problema in esecuzione sulla pagina, vedrai un suggerimento che ti dice di eliminare JavaScript e CSS che bloccano la visualizzazione nei contenuti above the fold.

Sarebbe meglio se non lo dimenticassi più punteggio dei siti web da qualche parte tra 70 e 90, e anche i più performanti raramente raggiungono un numero vicino a 100. Quindi non dovresti mai forzare il tuo sito a raggiungere 100. Fai tutto il possibile per ottenere il punteggio più alto senza influenzare l'esperienza dell'utente negativamente.

A seconda del tema e degli strumenti che utilizzi sul tuo sito, alcuni script sono essenziale per la perfetta UX dovresti offrire al tuo pubblico. Pertanto, non è assolutamente saggio rimuoverli nel tentativo di raggiungere un punteggio leggermente più alto nella pagina dei risultati di questo strumento di Google.

 

Correggi JavaScript e CSS che bloccano il rendering

Esistono molte strategie per eliminare JavaScript che blocca il rendering. I metodi principali sono Async e Defer. Il primo metodo consente al browser dell'utente di scaricare JavaScript durante l'analisi di altre parti HTML.

Sebbene non interrompa completamente l'analisi durante il download del file, il file Parser HTML fa una pausa per eseguire lo script durante il download. D'altra parte, l'approccio Defer consente al browser di scaricare JavaScript durante l'analisi di altre parti HTML e non esegue lo script a meno che l'analisi HTML non sia terminata.

L'eliminazione del CSS che blocca il rendering è più impegnativo poiché potresti ritardare i codici necessari per il caricamento del contenuto ATF. La procedura è un po' complicata e richiede una buona conoscenza dello sviluppo web.

Tuttavia, ci rivolgiamo agli utenti medi che gestiscono il proprio sito Web da soli.

Sappiamo tutti che WordPress è un sistema modulare che consente agli utenti medi di modificare tutto senza scrivere una sola riga di codice. Anche la risoluzione di questo problema è la stessa e puoi risolvere rapidamente il problema installando il plug-in appropriato.

 

I migliori plugin per WordPress per correggere JavaScript e CSS che bloccano il rendering

Nei prossimi paragrafi ne introdurremo cinque plugin WordPress con le migliori prestazioni che ti aiutano a risolvere questo problema nel modo più profondo.

Attenzione: Prima di utilizzare uno dei seguenti strumenti, assicurati di eseguire il backup del tuo sito Web per prevenire eventuali perdite di dati.

 

Autoptimize

I Autoptimize plug-in è realizzato esplicitamente per affrontare i problemi suggeriti dagli strumenti di analisi del sito Web come Google PageSpeed ​​Insights. Migliora la consegna di file JavaScript e CSS senza concentrarsi troppo su altri aspetti delle prestazioni del sito web.

Se stai cercando funzionalità di ottimizzazione di base, questo plugin ti darà ciò di cui hai bisogno. Una buona parte di questo strumento è che converte le immagini del tuo sito Web nel formato WebP ottimizzato.

Una volta installato e attivato l'ottimizzazione automatica, è necessario selezionare le caselle delle opzioni "Ottimizza codice JavaScript" e "Ottimizza codice CSS" che si trovano nelle impostazioni del plug-in. Fare attenzione a non selezionare le caselle sotto queste due opzioni che aggregano i file CSS e script.

Sebbene questo plugin sia disponibile gratuitamente, puoi anche acquistare pacchetti premium che ti aiutano con la configurazione del sito web.

 

WP Rocket

WP Rocket è un nome noto tra gli strumenti di ottimizzazione di WordPress che ti assiste in diversi aspetti come la modifica JavaScript e CSS, le impostazioni di caricamento lazy. Il processo di installazione di WP Rocket è piuttosto semplice, ma potresti trovare difficile in primo luogo capire come vengono fatte le cose sull'interfaccia.

È subito pronto all'uso e applica le impostazioni ottimali sul tuo sito Web subito dopo l'installazione. Considerando l'inevitabilità di malfunzionamenti del sito Web dovuti a modifiche allo script, il plugin non attiva le impostazioni JavaScript e CSS di blocco del rendering per impostazione predefinita.

Ma puoi facilmente attivare questa funzione andando sulle impostazioni del plugin e cercando le relative opzioni nelle sezioni "File CSS" e "File JavaScript".

Il plug-in principale costa $ 49 all'anno e include anche un anno di supporto. Inoltre, puoi trovare più extra gratuiti anche per il plugin principale su WordPress.

 

Caricatore di conigli

Caricatore di conigli è un plug-in all'avanguardia per l'ottimizzazione delle prestazioni di WordPress progettato per rendere un sito Web più veloce, fluido ed efficiente.

Simile all'acclamato WP Rocket, RabbitLoader non solo porta le prestazioni del tuo sito a nuovi livelli, ma introduce anche alcune funzionalità innovative che lo distinguono dagli altri giocatori del gioco.

Magia della memorizzazione nella cache: RabbitLoader fa un ulteriore passo avanti offrendo un sistema di caching dinamico che si adatta in tempo reale ai cambiamenti sul tuo sito, assicurando che i tuoi visitatori vedano sempre i contenuti più recenti senza sacrificare la velocità.

Ottimizzazione dell'immagine: Le immagini possono rallentare in modo significativo un sito Web, ma la funzionalità di ottimizzazione delle immagini di RabbitLoader è un punto di svolta. Comprime e ridimensiona automaticamente le immagini a una dimensione ottimale senza compromettere la qualità, garantendo che il tuo sito si carichi rapidamente senza sacrificare l'attrattiva visiva.

Caricamento lento: Sia WP Rocket che RabbitLoader offrono il caricamento lento per immagini e iframe, ma RabbitLoader va oltre offrendo il caricamento JavaScript differito.

Compatibilità: RabbitLoader è progettato per funzionare perfettamente con un'ampia gamma di temi e plugin WordPress, proprio come WP Rocket. Che tu abbia un semplice blog o un complesso sito di e-commerce, RabbitLoader è progettato per migliorare le prestazioni del tuo sito senza conflitti.

 

W3 Total Cache

W3 Total Cache è un potente potenziatore delle prestazioni che gestisce non solo i problemi di memorizzazione nella cache, ma anche i problemi causati da script e fogli di stile.

Puoi rimuovere facilmente JavaScript e CSS che bloccano il rendering abilitando prima l'opzione Minify dalle impostazioni del plug-in e impostandola sulla modalità manuale.

Successivamente, dovresti fare clic sulla scheda "Elimina risorse di blocco del rendering" e copiare l'indirizzo completo del collegamento dei file necessari per bloccare script e fogli di stile. Ora puoi usare questi link e inserirli nella 'sezione JS' del Prestazioni>Minimizza scheda.

W3 Total Cache ha più di un milione di installazioni attive e puoi scaricarlo sul tuo sito gratuitamente dal sito Web WordPress.org.

 

Pacchetto Speed ​​Booster

Pacchetto Speed ​​Booster è uno strumento affidabile per ottimizzare fogli di stile, JavaScript, caricamento lento e rimozione del disordine. Il team di sviluppatori aggiorna continuamente questo plugin per tenerlo aggiornato con gli ultimi aggiornamenti e misure di sicurezza.

Se vendi prodotti e servizi online, il Ottimizzazione specifica per WooCommerce le caratteristiche di Speed ​​Booster Pack ti aiuteranno molto ad aumentare la visibilità del tuo negozio su internet.

Puoi correggere rapidamente JavaScript e CSS che bloccano la visualizzazione sul tuo sito Web WordPress facendo clic sulla scheda "Avanzate" dal menu Speed ​​Booster Pack del pannello di amministrazione.

Per JavaScript, attiva le opzioni "Sposta gli script nel piè di pagina" e "Rimanda l'analisi dei file JavaScript". Quindi, vai al menu "Ottimizzazione CSS" e scegli tra le opzioni disponibili per migliorare le prestazioni del tuo sito.

Speed ​​Booster Pack è una soluzione gratuita disponibile sul sito Web WordPress.org.

 

Ottimizzazione JCH

Ottimizzazione JCH è l'ultimo elemento di questo elenco di plugin suggeriti che viene fornito con strumenti utili per velocizzare il caricamento della pagina. Ad esempio, ti aiuta a ridurre il numero di richieste HTTP necessarie per caricare le tue pagine e, allo stesso tempo, a ridurre le dimensioni di tali pagine.

Generatore di sprite è un'altra interessante funzionalità disponibile in questo plugin che riduce il numero di richieste HTTP per caricare le immagini di sfondo.

Utilizzando JCH Optimize, puoi rimuovere JavaScript e CSS che bloccano il rendering se esegui l'upgrade a un piano premium. Tutto ciò che serve è attivare le opzioni "Premium" o "Optimum" dalla sezione "Impostazioni automatiche". Allo stesso modo, le impostazioni di consegna CSS sono disponibili solo nella versione Pro.

Puoi installare questo plugin gratuitamente da WordPress.org, ma devi acquistare un piano premium per sbloccare il suo pieno potenziale. I piani tariffari partono da $ 29 per sei mesi e raggiungono $ 99 per l'accesso a vita.

 

Sommario

La velocità di caricamento del sito Web è uno degli elementi più critici per attirare, coinvolgere e trattenere il pubblico. Dovresti dargli un'alta priorità quando ottimizzi il tuo sito web per i motori di ricerca e utilizzare lo strumento Google PageSpeed ​​Insights per misurare le tue prestazioni in questo campo.

L'elemento JavaScript e CSS che blocca il rendering è uno dei suggerimenti più comuni che potresti vedere quando utilizzi il potente strumento di Google. Puoi facilmente risolvere questo problema installando uno dei cinque plugin che abbiamo introdotto in questo articolo e velocizzare la velocità di caricamento delle tue pagine in gran parte.

Ci auguriamo che questo tutorial sia utile e che tu possa godere di un sito Web a caricamento rapido per i migliori risultati possibili.