Come risolvere JavaScript e CSS che bloccano il rendering in WordPress

Imbattersi in problemi con JavaScript e CSS che bloccano il rendering sul tuo sito WordPress può essere frustrante. Questi problemi possono rallentare il tuo sito web e influire sulle sue prestazioni. Un sito lento può allontanare i visitatori e influire sul posizionamento sui motori di ricerca.

Quando controlli il tuo sito web su Google PageSpeed Insights, potresti vedere un suggerimento per eliminare queste risorse che bloccano il rendering. Sfortunatamente, lo strumento non fornisce istruzioni chiare su come risolvere questo problema in WordPress.

La buona notizia è che esistono strumenti che possono rendere la risoluzione di JavaScript e CSS che bloccano il rendering meno complicata di quanto sembri. Puoi utilizzare un plugin di caching come WP Rocket o Autoptimize per ottimizzare il tuo sito minificando e posticipando gli script, il che riduce i tempi di caricamento e migliora i punteggi PageSpeed.

In questo articolo, ti guideremo attraverso i passaggi per risolvere questi problemi sul tuo sito WordPress.

Cos'è JavaScript e CSS che bloccano il rendering?

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

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

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

Il browser di un utente dovrà caricare questi script e CSS prima di caricare il resto dell'HTML sulla 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 sono definiti JavaScript e CSS che bloccano il rendering.

I proprietari di siti web WordPress che cercano di ottenere un punteggio Google PageSpeed di 100 dovranno risolvere questo problema per raggiungere quel punteggio perfetto.

Cos'è un punteggio 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 testa il tuo sito web rispetto alle linee guida di velocità di Google e offre suggerimenti per migliorare il tempo di caricamento della pagina.

Ti mostra un punteggio basato sul numero di audit che il tuo sito supera.

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 più alto che una pagina può ottenere).

Hai davvero bisogno del punteggio Google PageSpeed perfetto "100"?

Lo scopo di Google PageSpeed Insights è fornirti linee guida per migliorare la velocità e le prestazioni del tuo sito. Detto questo, non sei obbligato a seguire queste regole rigorosamente.

Ricorda che la velocità è solo una delle tante metriche di ottimizzazione per i motori di ricerca (SEO) del sito web che aiutano Google a determinare come classificare il tuo sito. La velocità è così importante perché migliora l'esperienza utente sul tuo sito.

Una migliore esperienza utente richiede molto più della semplice velocità. Devi anche offrire informazioni utili, un'interfaccia utente migliore e contenuti coinvolgenti con testo, immagini e video.

Quindi, il tuo obiettivo dovrebbe essere quello di creare un sito web veloce che offra un'ottima esperienza utente.

Ti consigliamo di utilizzare le regole di Google PageSpeed come suggerimenti. Se riesci a implementarle facilmente senza rovinare l'esperienza utente, è fantastico. Altrimenti, dovresti cercare di fare il più possibile e poi non preoccuparti del resto.

Tenendo presente questo, daremo un'occhiata a cosa puoi fare per correggere JavaScript e CSS che bloccano il rendering in WordPress. Tratteremo 2 metodi che elimineranno le risorse che bloccano il rendering in WordPress. Puoi scegliere quello che funziona meglio per il tuo sito web:

• Metodo 1: Correggi script e CSS che bloccano il rendering con WP Rocket
• Metodo 2: Correggi script e CSS che bloccano il rendering con Autoptimize
• Cosa fare se JavaScript e CSS che bloccano il rendering esistono ancora

Immergiamoci e facciamo funzionare il tuo sito senza intoppi!

Metodo 1: Correggi script e CSS che bloccano il rendering con WP Rocket

Per questo metodo, utilizzeremo il plugin WP Rocket.

È il miglior plugin di caching e ottimizzazione per WordPress sul mercato, e ti permette di migliorare rapidamente le prestazioni del tuo sito web senza alcuna competenza tecnica o una configurazione complicata.

Innanzitutto, devi installare e attivare il plugin WP Rocket. Per maggiori dettagli, puoi consultare la nostra guida passo passo su come installare un plugin WordPress.

WP Rocket funziona subito: attiverà la cache con impostazioni ottimali per il tuo sito web. Puoi saperne di più nella nostra guida completa su come installare e configurare correttamente WP Rocket in WordPress.

Per impostazione predefinita, non attiva JavaScript e le opzioni di ottimizzazione CSS. Queste ottimizzazioni possono potenzialmente influire sull'aspetto del tuo sito web o su alcune funzionalità, motivo per cui il plugin ti consente di abilitare queste impostazioni facoltativamente.

Per fare ciò, devi visitare la pagina Impostazioni » WP Rocket e passare alla scheda ‘Ottimizzazione dei file’.

Da qui, scorri semplicemente fino alla sezione ‘File CSS’ e seleziona le caselle accanto a ‘Minifica CSS’, ‘Combina file CSS’ e ‘Ottimizza consegna CSS’.

Per l'impostazione ‘Ottimizza consegna CSS’, WP Rocket consiglia di scegliere il metodo ‘Rimuovi CSS inutilizzato‘.

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

Successivamente, devi scorrere fino alla sezione ‘File JavaScript’.

Da qui, puoi selezionare tutte le opzioni per il massimo miglioramento delle prestazioni.

Puoi minificare e combinare i file JavaScript come hai fatto per il CSS.

Puoi anche impedire a WordPress di caricare il file jQuery Migrate. Questo script viene caricato per fornire compatibilità ai plugin e ai temi che utilizzano vecchie versioni di jQuery.

La maggior parte dei siti web non necessita di questo file, ma dovrai comunque controllare il tuo sito web per assicurarti che la sua rimozione non influisca sul tuo tema o sui tuoi plugin.

Successivamente, scorriamo un po' più in basso e selezioniamo 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 di jQuery ti consente di caricare jQuery per i temi che potrebbero utilizzarlo inline. Puoi lasciare questa opzione deselezionata se sei certo che il tuo tema non utilizzi jQuery inline in alcun punto.

Non dimenticare di fare clic sul pulsante 'Salva modifiche' per memorizzare le impostazioni.

Dopodiché, potresti anche voler svuotare la cache in WP Rocket prima di testare nuovamente il tuo sito web con Google PageSpeed Insights.

Sul nostro sito di prova, siamo stati in grado di ottenere un punteggio del 100% sui dispositivi desktop e il problema del blocco del rendering è stato risolto sia nei punteggi mobili che desktop.

Metodo 2: Correggi script e CSS che bloccano il rendering con Autoptimize

Per questo metodo, utilizzeremo un plugin separato creato specificamente per migliorare la distribuzione dei file CSS e JS del tuo sito web. Sebbene questo plugin faccia il suo lavoro, non dispone delle altre potenti funzionalità che ha WP Rocket.

La prima cosa da fare è installare e attivare Autoptimize, un plugin gratuito per velocizzare le prestazioni del sito web. Se hai bisogno di aiuto, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, devi andare su Impostazioni » Autoptimize per configurare le impostazioni del plugin.

Innanzitutto, selezioniamo la casella accanto a 'Ottimizza codice JavaScript' nel blocco 'Opzioni JavaScript'. Qui, assicurati che l'opzione 'Aggrega file JS' sia deselezionata.

Successivamente, scorri verso il basso fino alla casella 'Opzioni CSS' e seleziona l'opzione 'Ottimizza codice CSS'.

Assicurati semplicemente che l'opzione 'Aggrega file CSS' sia deselezionata.

Ora puoi fare clic sul pulsante 'Salva modifiche e svuota cache' per memorizzare le tue impostazioni.

Prova il tuo sito web con lo strumento PageSpeed Insights. Con queste impostazioni di base, abbiamo risolto con successo il problema del blocco del rendering sul nostro sito demo.

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

Ad esempio, puoi consentire al plugin di includere JS inline e rimuovere script esclusi per impostazione predefinita, come seal.js o jquery.js. Quindi, fai semplicemente clic sul pulsante 'Salva modifiche e svuota cache' per salvare le modifiche e svuotare la cache del plugin.

Una volta terminato, controlla nuovamente il tuo sito web con lo strumento PageSpeed Insights.

Come funziona Autoptimize?

Autoptimize aggrega tutti i JavaScript e CSS accodati. Dopodiché, crea file CSS e JavaScript minificati e li serve in cache al tuo sito web come asincroni o differiti.

Questo ti permette di risolvere il problema degli script e degli stili che bloccano il rendering. Tuttavia, tieni presente che potrebbe anche influire sulle prestazioni o sull'aspetto del tuo sito web.

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

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

Sebbene gli strumenti sopra menzionati possano aiutare, i tuoi plugin potrebbero necessitare di determinati script per funzionare correttamente a un livello di priorità diverso. In tal caso, le soluzioni sopra menzionate possono interrompere la funzionalità di tali plugin o farli comportare in modo inaspettato.

Invece di eliminare completamente i problemi di blocco del rendering, consigliamo di adottare approcci alternativi per velocizzare il tuo sito web. Ad esempio, puoi utilizzare un servizio CDN per servire i tuoi file JavaScript e CSS statici e ridurre il tempo di caricamento.

Puoi leggere la nostra guida definitiva per aumentare la velocità e le prestazioni di WordPress per maggiori informazioni.

Speriamo che questo articolo ti abbia aiutato a imparare come correggere JavaScript e CSS che bloccano il rendering in WordPress. Potresti anche voler consultare il nostro articolo su come correggere facilmente l'errore “Questo sito non può essere raggiunto” e il nostro elenco di esperti dei errori più comuni di WordPress e come risolverli.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.