Come risolvere il blocco del rendering di JavaScript e CSS in WordPress

State cercando di eliminare i JavaScript e i CSS che bloccano il rendering in WordPress?

Se testate il vostro sito web su Google PageSpeed insights, probabilmente vedrete un suggerimento per eliminare gli script e i CSS che bloccano il rendering. Tuttavia, non fornisce alcun dettaglio su come farlo sul vostro sito WordPress.

In questo articolo vi mostreremo come correggere facilmente i JavaScript e i CSS che bloccano il rendering in WordPress per migliorare il punteggio di Google PageSpeed.

Che cosa sono i JavaScript e i CSS che bloccano il rendering?

I JavaScript e i CSS che bloccano il rendering sono file che impediscono a un sito web di visualizzare una pagina web prima del caricamento di questi file.

Ogni sito web WordPress ha un tema e dei plugin che aggiungono file JavaScript e CSS al front-end del sito.

Questi script possono aumentare il tempo di caricamento della pagina del sito e possono anche bloccare il rendering della pagina.

Il browser dell’utente dovrà caricare gli script e i CSS prima di caricare il resto dell’HTML della pagina. Ciò significa che gli utenti con una connessione più lenta dovranno attendere qualche millisecondo in più per vedere la pagina.

Questi script e fogli di stile vengono definiti JavaScript e CSS che bloccano il rendering.

I proprietari disiti web WordPress che cercano di ottenere un punteggio di Google PageSpeed pari a 100 dovranno risolvere questo problema per raggiungere il punteggio perfetto.

Che cos’è il punteggio di Google PageSpeed?

Google PageSpeed Insights è uno strumento di test della velocità del sito web creato da Google per aiutare i proprietari di siti web a ottimizzare e testare i loro siti. Questo strumento verifica il vostro sito web rispetto alle linee guida di Google per la velocità e offre suggerimenti per migliorare il tempo di caricamento della pagina.

Mostra un punteggio basato sul numero di verifiche superate dal sito. La maggior parte dei siti web ottiene un punteggio compreso tra 50 e 70. Tuttavia, alcuni proprietari di siti web si sentono obbligati a raggiungere 100 (il punteggio massimo che una pagina può ottenere).

Avete davvero bisogno del punteggio perfetto “100” di Google PageSpeed Score?

Lo scopo di Google PageSpeed insights è quello di fornire linee guida per migliorare la velocità e le prestazioni del vostro sito web. Non siete obbligati a seguire queste regole in modo rigoroso.

Ricordate che la velocità è solo una delle tante metriche di ottimizzazione dei motori di ricerca (SEO) che aiutano Google a determinare il posizionamento del vostro sito. La velocità è così importante perché migliora l’esperienza dell’utente sul vostro sito.

Una migliore esperienza utente richiede molto di più della semplice velocità. Occorre anche offrire informazioni utili, una migliore interfaccia utente e contenuti coinvolgenti con testi, immagini e video.

Il vostro obiettivo dovrebbe essere quello di creare un sito web veloce che offra un’ottima esperienza all’utente.

Si consiglia di utilizzare le regole di Google PageSpeed come suggerimenti. Se è possibile implementarle facilmente senza rovinare l’esperienza dell’utente, allora è fantastico. Altrimenti, dovreste cercare di fare il più possibile e poi non preoccuparvi del resto.

Detto questo, vediamo cosa si può fare per correggere i JavaScript e i CSS che bloccano il rendering in WordPress.

Verranno illustrati due metodi per eliminare le risorse che bloccano il rendering in WordPress. Potete scegliere quello che funziona meglio per il vostro sito web:

Metodo 1: Correggere gli script e i CSS che bloccano il rendering con WP Rocket

Per questo metodo, utilizzeremo il plugin WP Rocket. Si tratta del miglior plugin per la cache e l’ottimizzazione di WordPress presente sul mercato, che consente di migliorare rapidamente le prestazioni del sito web senza alcuna competenza tecnica o una configurazione complicata.

Per prima cosa, è necessario installare e attivare il plugin WP Rocket. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

WP Rocket funziona subito e attiva la cache con le impostazioni ottimali per il vostro sito web. Potete saperne di più nella nostra guida completa su come installare e configurare correttamente WP Rocket in WordPress.

Per impostazione predefinita, non attiva le opzioni di ottimizzazione di JavaScript e CSS. Queste ottimizzazioni possono potenzialmente influire sull’aspetto del sito web o su alcune funzionalità; per questo motivo il plugin consente di attivare queste impostazioni in modo opzionale.

Per farlo, è necessario visitare la pagina Impostazioni ” WP Rocket e poi passare alla scheda ‘Ottimizzazione dei file’.

Da qui, scorrere la sezione File CSS e selezionare le caselle “Minimizza CSS”, “Combina file CSS” e “Ottimizza consegna CSS”.

Per l’impostazione “Ottimizza consegna CSS”, WP Rocket consiglia di scegliere il metodo“Rimuovi CSS inutilizzati“.

Oltre a offrire le migliori prestazioni, può contribuire a ridurre le dimensioni della pagina e le richieste HTTP.

Successivamente, è necessario scorrere fino alla sezione File JavaScript. Da qui è possibile selezionare tutte le opzioni per migliorare al massimo le prestazioni.

È possibile minificare e combinare i file JavaScript come si è fatto per i CSS.

È anche possibile impedire a WordPress di caricare il file jQuery Migrate. Si tratta di uno script che WordPress carica per fornire compatibilità ai plugin e ai temi che utilizzano vecchie versioni di jQuery.

La maggior parte dei siti web non ha bisogno di questo file, ma è comunque necessario controllare il sito per assicurarsi che la sua rimozione non influisca sul tema o sui plugin.

Quindi, scorrere ulteriormente verso il basso e selezionare le caselle accanto alle opzioni “Carica JavaScript differito” e “Modalità sicura per jQuery”.

Queste opzioni ritardano il caricamento di JavaScript non essenziali e la modalità sicura jQuery consente di caricare jQuery per i temi che potrebbero utilizzarlo in linea. Si può lasciare questa opzione deselezionata se si è certi che il proprio tema non utilizzi jQuery in linea da nessuna parte.

Non dimenticate di fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

In seguito, si può anche cancellare la cache in WP Rocket prima di testare nuovamente il sito web con Google PageSpeed Insights.

Sul nostro sito di prova, siamo riusciti a ottenere un punteggio del 100% sui dispositivi desktop e il problema del blocco del rendering è stato risolto sia per i dispositivi mobili che per quelli desktop.

Metodo 2: Correggere gli script e i CSS che bloccano il rendering con Autoptimize

Per questo metodo, utilizzeremo un plugin separato creato appositamente per migliorare la distribuzione dei file CSS e JS del vostro sito web. Anche se questo plugin svolge il suo compito, non ha le altre potenti funzioni di WP Rocket.

La prima cosa da fare è installare e attivare Autoptimize, un plugin gratuito per accelerare le prestazioni del sito web. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin per WordPress.

Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” Ottimizzazione automatica per configurare le impostazioni del plugin.

Innanzitutto, è necessario selezionare la casella accanto a “Ottimizza codice JavaScript” nel blocco Opzioni JavaScript. Assicurarsi che l’opzione “Aggregate JS-files” sia deselezionata.

Quindi, scorrere fino alla casella Opzioni CSS e selezionare l’opzione “Ottimizza codice CSS”.

Assicurarsi che l’opzione “Aggregare i file CSS” sia deselezionata.

A questo punto è possibile fare clic sul pulsante “Salva le modifiche e svuota la cache” per memorizzare le impostazioni.

Verificate il vostro sito web con lo strumento PageSpeed Insights. Sul nostro sito demo, siamo riusciti a risolvere il problema del blocco del rendering con queste impostazioni di base.

Se ci sono ancora script che bloccano il rendering, si può tornare alla pagina delle impostazioni del plugin e rivedere le impostazioni delle opzioni JavaScript e CSS.

Ad esempio, è possibile consentire al plugin di includere JS inline e rimuovere gli script esclusi per impostazione predefinita, come seal.js o jquery.js. Quindi, è sufficiente fare clic sul pulsante “Salva le modifiche e svuota la cache” per salvare le modifiche e svuotare la cache del plugin.

Una volta terminato, controllate nuovamente il vostro sito web con lo strumento PageSpeed Insights.

Come funziona l’ottimizzazione automatica?

Autoptimize aggrega tutti i file JavaScript e CSS in attesa. Successivamente, crea file CSS e JavaScript minificati e serve le copie in cache al vostro sito web come async o deferito.

Ciò consente di risolvere il problema degli script e degli stili che bloccano il rendering. Tuttavia, si tenga presente che può anche influire sulle prestazioni o sull’aspetto del sito web.

Cosa fare se i JavaScript e i CSS che bloccano il rendering esistono ancora?

A seconda di come i plugin e il tema di WordPress utilizzano JavaScript e CSS, può essere difficile risolvere completamente tutti i problemi di JavaScript e CSS che bloccano il rendering.

Anche se gli strumenti di cui sopra possono essere utili, i vostri plugin potrebbero aver bisogno di alcuni script a un livello di priorità diverso per funzionare correttamente. In questo caso, le soluzioni di cui sopra possono interrompere la funzionalità di tali plugin, oppure potrebbero avere un comportamento inaspettato.

Invece di cercare di eliminare completamente i problemi di blocco del rendering, vi consigliamo di adottare approcci alternativi per velocizzare il vostro sito web. Ad esempio, è possibile utilizzare un servizio CDN per servire i file statici JavaScript e CSS e ridurre i tempi di caricamento.

Per ulteriori informazioni, potete leggere la nostra guida definitiva per aumentare la velocità e le prestazioni di WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come correggere JavaScript e CSS che bloccano il rendering in WordPress. Potreste anche leggere il nostro articolo su come WPBeginner aumenta la velocità di caricamento delle pagine con 6 consigli e il nostro confronto tra le migliori società di hosting WordPress gestite.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.