Se avete mai testato il vostro sito WordPress su Google PageSpeed Insights, Google vi ha probabilmente detto che dovete eliminare le risorse che bloccano la visualizzazione del vostro sito WordPress. In effetti, questo potrebbe essere il motivo per cui state leggendo proprio questo post in questo momento.
Questo probabilmente vi fa porre due domande:
- In primo luogo, cosa sono le risorse che bloccano la visualizzazione?
- Come si possono eliminare le risorse che bloccano la visualizzazione in WordPress?
In questo post, risponderemo ad entrambe le domande. Ecco tutto quello di cui parleremo in questo articolo:
- Cosa sono le risorse che bloccano la visualizzazione e perché costituiscono un problema
- Come eliminare le risorse che bloccano la visualizzazione in generale
- Come utilizzare i plugin gratuiti o a pagamento per risolvere il problema su WordPress
Preferite guardare la versione video?
Cosa significa “Eliminare le risorse che bloccano la visualizzazione”?
Per capire cosa sono le risorse che bloccano il rendering e perché danneggiano i tempi di caricamento del vostro sito, dobbiamo iniziare con uno sguardo generale su come un browser rende una pagina web.
Quando un visitatore arriva sul vostro sito, il suo browser comincia dalla parte superiore del codice del vostro sito e lo legge proseguendo verso il basso. Dall’alto verso il basso.
Se in quel processo incontra un file CSS o JavaScript, deve smettere di “leggere” mentre aspetta di scaricare ed elaborare quel file. Il tempo che passa “in pausa” per scaricare e analizzare quelle risorse potrebbe essere impiegato in qualcosa di molto più produttivo, come il caricamento della parte di contenuto del vostro sito web che è immediatamente visibile quando qualcuno arriva sulla pagina.
Guardiamo ad un caso estremo per comprendere perché questo può essere un problema.
Diciamo che avete questo fantastico effetto JavaScript nel footer del vostro sito. È basato da “coolfooter.js”, che è uno script a cui si fa riferimento nella parte superiore del codice del vostro sito (anche se l’effetto è nel footer, quindi i visitatori non lo vedranno fino a quando non scorreranno fino footer).
Quindi un layout molto grezzo per il codice del vostro sito potrebbe essere qualcosa di simile:
- Meta dell’header
- Coolfooter.js
- HTML per i vostri contenuti above the fold. Questo è tutto il contenuto che un visitatore vede subito (prima di iniziare a interagire con la pagina)
Ed ecco perché questo è un problema:
Quando un visitatore arriva sul vostro sito, il suo browser inizia a leggere dall’alto verso il basso. Quindi, prima di analizzare a visualizzare il codice HTML per i contenuti above-the-fold, deve aspettare di scaricare ed effettuare il parsing del file coolfooter.js.
Risultato finale? Ci vuole più tempo per visualizzare l’HTML per i contenuti above-the-fold, il che significa che i visitatori percepiranno il vostro sito come più lento.
Quando Google vi dice di eliminare le risorse che bloccano la visualizzazione, in sostanza dice: “Ehi, non caricare risorse non necessarie in cima al codice del tuo sito, perché ci vorrà più tempo perché i browser dei visitatori scarichino la parte visibile dei tuoi contenuti”.
Con i suggerimenti di questo post, potrete aspettare a caricare alcune risorse CSS e JavaScript fino a quando la parte visibile della vostra pagina non sarà già caricata.
Cosa Sono le Risorse che Bloccano la Visualizzazione?
Quando si parla di risorse che bloccano il rendering, di solito si parla di:
- CSS
- JavaScript
È importante capire che non tutti i file CSS e JavaScript sono in grado di bloccare la visualizzazione.
Per esempio, è importante caricare il vostro CSS critico vicino alla parte superiore, altrimenti i vostri visitatori potrebbero sperimentare quello che è conosciuto come un flash di contenuti non stilizzati (FOUC).
Le Immagini Sono Risorse che Bloccano il Rendering?
No, le immagini non bloccano il rendering. È comunque importante ottimizzare le vostre immagini per ridurre le dimensioni dei file, ma non dovete preoccuparvi di ottimizzare il percorso di consegna delle immagini.
Come Verificare se il Vostro Sito ha Risorse che Bloccano la Visualizzazione
Per valutare se il vostro sito WordPress dispone o meno di risorse che bloccano il rendering, potete utilizzare Google PageSpeed Insights.
Tutto ciò che dovrete fare è inserire l’URL che volete testare. Poi, se avete un problema di risorse che bloccano il rendering, PageSpeed Insights elencherà ogni singola risorsa nella sezione Eliminare le risorse che bloccano la visualizzazione, sotto Opportunità:
Come Eliminare le Risorse che Bloccano la Visualizzazione?
Non preoccupatevi, non dovete farlo manualmente. Parleremo dei plugin di WordPress che possono aiutarvi ad eliminare le risorse che bloccano il rendering nella prossima sezione.
Tuttavia, è utile capire cosa fanno questi plugin dietro le quinte per eliminare le risorse che bloccano il rendering.
Come Eliminare JavaScript che Blocca il Rendering
Ci sono diverse soluzioni tecniche per eliminare il le risorse JavaScript che bloccano il rendering. Ne parliamo in dettaglio nel nostro articolo su come differire il parsing di JavaScript, ma ecco i metodi principali:
- Async – permette al parser HTML (ad es. il browser di un visitatore) di scaricare il codice JavaScript mentre effettua il parsing del resto del codice HTML. Cioè, non smette completamente di effettuare il parsing mentre il file viene scaricato. Tuttavia, metterà in pausa il parser HTML per eseguire lo script una volta scaricato.
- Defer – lascia che il parser HTML scarichi il codice JavaScript mentre analizza il resto dell’HTML e aspetta ad eseguire lo script fino a quando il parsing HTML non sia finito.
Questa illustrazione di Growing with the Web mostra bene la differenza:
Il vantaggio di utilizzare defer è che garantisce che i vostri script vengano eseguiti nell’ordine in cui appaiono nel codice.
Async non segue questo approccio, che a volte può causare problemi se viene applicato a tutte le risorse JavaScript, perché spesso può bloccare risorse che dipendono da altre risorse che appaiono prima nel documento. Il problema più comune generato da async è il blocco delle dipendenze di jQuery che cercano di caricare prima che jquery.js sia stato aggiunto al documento.
Come Eliminare il CSS che Blocca la Visualizzazione
Eliminare i CSS che bloccano il rendering può essere un po’ più complicato perché bisogna fare attenzione a non ritardare i CSS necessari per il rendering dei contenuti above-the-fold. La procedura ideale è quella di:
- Identificare gli stili che sono necessari per rendere il contenuto above-the-fold e consegnare quegli stili in linea con l’HTML.
- Utilizzare l’attributo media sugli elementi link che inseriscono i file CSS per identificare le risorse CSS che sono condizionali, cioè necessarie solo per dispositivi o situazioni specifiche.
- Le risorse CSS rimanenti dovrebbero essere caricate in modo asincrono, una cosa che di solito viene fatta aggiungendole con JavaScript differito o asincrono. Questo è sicuramente territorio per un ingegnere di frontend. Il che è fantastico se siete ingegneri di front-end, ma la maggior parte di noi non lo è. La buona notizia è che questo è un articolo su WordPress, e si può eliminare o almeno ridurre significativamente il numero di risorse JS e CSS che bloccano il rendering con il plugin giusto.
Per un altro modo semplice e veloce di aumentare l’ottimizzazione complessiva, considerate anche la minificazione del codice. Kinsta ha integrato una funzione di minificazione del codice direttamente nel cruscotto di MyKinsta, consentendo ai clienti di abilitare la minificazione automatica di CSS e JavaScript con un semplice clic.
Se non riuscite a individuare la funzione dal vostro cruscotto, consultate il nostro video Come attivare la minificazione in MyKinsta.
Come Eliminare le Risorse CSS e JavaScript di Blocco della Visualizzazione con i Plugin di WordPress
Per dimostrare come eliminare le risorse di blocco della visualizzazione in WordPress, abbiamo creato un semplice sito di prova che include CSS e JavaScript che bloccano il rendering e vi faremo vedere come utilizzare due diversi plugin per eliminare CSS e JavaScript che bloccano la visualizzazione:
- Autoptimize + Async JavaScript (gratuito)
- WP Rocket (a pagamento)
Per riferimento, ecco come si presenta il nostro sito di prova prima di ottimizzare la consegna di CSS e JavaScript:
Se state testando l’efficacia dei vostri cambiamenti con Google PageSpeed Insights, sappiate che Google mette in cache i risultati per diversi minuti. In sostanza, questo significa che se …
- Provate il vostro sito non ottimizzato
- Attivate uno dei plugin di questa sezione
- Ritestate il vostro sito
…, e lo fate velocemente, allora vedrete ancora i risultati riferiti al vostro sito non ottimizzato, fino a quando Google non ripristinerà la sua cache. Quindi aspettate qualche minuto che Google cancelli la sua cache prima di concludere che il plugin non funziona.
Come Eliminare le Risorse di Blocco della Visualizzazione con i Plugin Autoptimize + Async JavaScript
Autoptimize e Async JavaScript sono due distinti plugin gratuiti dello stesso sviluppatore. Insieme, vi aiutano a ottimizzare la consegna sia dei CSS che di JavaScript.
Una volta installati entrambi i plugin, andate su Impostazioni → Async JavaScript e:
- Spuntate la casella Abilita Async JavaScript in alto.
- Scegliete tra Apply Async e Apply Defer nella casella Quick Settings (Impostazioni rapide).
Se l’opzione Async causa problemi sul vostro sito, vi consigliamo di provare a differire o ad escludere jQuery: il plugin offre un’opzione per questo.
Una volta impostato il plugin Async JavaScript, andate in Impostazioni → Autoptimize e:
- Selezionate la casella Optimize JavaScript Code
- Selezionate la casella Optimize CSS Code
Se siete utenti avanzati, potete giocare con le impostazioni aggiuntive di ottimizzazione di JavaScript e CSS, ma per la maggior parte dei siti saranno sufficienti le impostazioni predefinite.
Dopo aver configurato sia Autoptimize che Async JavaScript, il nostro sito di prova ha superato il controllo “Elimina le risorse di blocco della visualizzazione” di PageSpeed Insights:
Se si volesse eliminare un numero ancora maggiore di questi file, si potrebbe utilizzare Autoptimize anche per inserire in linea manualmente i CSS critici. Questo richiede però una certa conoscenza di sviluppo, quindi non è una cosa per chi non è sviluppatore.
Potete utilizzare i plugin anche separatamente. Ma, dato che entrambi i plugin provengono dallo stesso sviluppatore e sono sviluppati per combinarsi bene l’uno con l’altro, l’approccio migliore per la maggior parte dei siti è quello di usarli congiuntamente.
Come Eliminare le Risorse di Blocco della Visualizzazione con WP Rocket
WP Rocket è un popolare plugin WordPress premium per le prestazioni e la cache di WordPress.
Normalmente, non consentiamo l’utilizzo di plugin di cache su siti WordPress ospitati su Kinsta perché gestiamo già il caching per voi a livello di server, attraverso la veloce cache Nginx FastCGI.
Tuttavia, WP Rocket ha una speciale integrazione con Kinsta che permette al plugin di lavorare bene con la vostra cache Kinsta. È fantastico perché WP Rocket fa molto di più per le prestazioni di WordPress della semplice cache, come l’eliminazione delle risorse CSS e JavaScript che bloccano la visualizzazione sul vostro sito WordPress.
Una volta installato e attivato WP Rocket, andate alla scheda File Optimization. Quindi, abilitate queste due opzioni:
- Optimize CSS delivery nella sezione CSS Files
- Load JavaScript deferred nella sezione JavaScript files. Potete sperimentare la disattivazione del Safe Mode for jQuery. Ma se notate problemi sul front-end del vostro sito, dovrete riattivare la modalità sicura per jQuery in quanto sarà il probabile colpevole.
Dopo aver attivato queste due opzioni, il nostro sito di test ha superato di nuovo il controllo “Elimina le risorse di blocco della visualizzazione” in PageSpeed Insights. WP Rocket è riuscito ad eliminare più risorse di blocco della visualizzazione rispetto alla configurazione Autoptimize/Async JavaScript:
Ed è così che si eliminano le risorse di blocco della visualizzazione sul vostro sito WordPress!
Riepilogo
Le risorse di blocco del rendering rallentano i tempi di caricamento percepiti delle pagine del vostro sito WordPress, costringendo i browser dei visitatori a ritardare la visualizzazione dei contenuti above-the-fold, mentre il browser scarica da subito i file che non sono necessari.
Per aiutare i visitatori a caricare più rapidamente la parte visibile della vostra pagina, dovreste ritardare il caricamento delle risorse che non sono immediatamente necessarie.
Per eliminare le risorse di blocco della visualizzazione su WordPress, è possibile utilizzare plugin preconfezionato.
Per una soluzione gratuita, è possibile utilizzare la combinazione di Autoptimize e Async JavaScript, due plugin dello stesso sviluppatore.
Se siete disposti a spendere dei soldi, potete usare WP Rocket, che offre una speciale integrazione con Kinsta e può aiutarvi in molte altre ottimizzazioni delle prestazioni di WordPress.
Avete altre domande su come eliminare il blocco delle risorse di rendering su WordPress? Fateci sapere nei commenti!
Jon è il Chief Operating Officer di Kinsta e si occupa quotidianamente dei team di vendita, assistenza clienti e supporto tecnico di Kinsta. Jon è un padre famiglia. Quando non batte febbrilmente i tasti del suo portatile, di solito aiuta uno dei suoi figli a riparare una bicicletta o a configurare Netflix per un bambino impaziente.
Ho installato sia Autoptimize che Async JavaScript, ho attivato le spunte come avete spiegato ma nel check con PageSpeed non è cambiato nulla!
Ciao Stefania, prova a svuotare la cache del sito e poi esegui di nuovo il test. Così dovresti avere dei dati aggiornati