In questo post, risponderemo ad entrambe le domande. Ecco tutto quello di cui parleremo in questo articolo:<\/p>\n
- \n
- Cosa sono le risorse che bloccano la visualizzazione e perch\u00e9 costituiscono un problema<\/a><\/li>\n
- Come eliminare le risorse che bloccano la visualizzazione in generale<\/em><\/a><\/li>\n
- Come utilizzare i plugin gratuiti o a pagamento per risolvere il problema su WordPress<\/a><\/li>\n<\/ul>\n
Preferite guardare la versione video<\/a>?<\/h3>\n
<\/kinsta-video><\/p>\n Cosa significa “Eliminare le risorse che bloccano la visualizzazione”?<\/h2>\n
Per capire cosa sono le risorse che bloccano il rendering e perch\u00e9 danneggiano i tempi di caricamento del vostro sito, dobbiamo iniziare con uno sguardo generale su come un browser rende una pagina web.<\/p>\n
Quando un visitatore arriva sul vostro sito, il suo browser comincia dalla parte superiore del codice del vostro sito<\/a> e lo legge proseguendo verso il basso. Dall’alto verso il basso.<\/p>\n
Se in quel processo incontra un file CSS<\/a> o JavaScript, deve smettere di<\/strong> “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\u00f9 produttivo, come il caricamento della parte di contenuto del vostro sito web che \u00e8 immediatamente visibile quando qualcuno arriva sulla pagina.<\/p>\n
Guardiamo ad un caso estremo per comprendere perch\u00e9 questo pu\u00f2 essere un problema.<\/p>\n
Diciamo che avete questo fantastico effetto JavaScript nel footer del vostro sito. \u00c8 basato da “coolfooter.js”, che \u00e8 uno script a cui si fa riferimento nella parte superiore del codice del vostro sito (anche se l’effetto \u00e8 nel footer, quindi i visitatori non lo vedranno fino a quando non scorreranno fino footer<\/em>).<\/p>\n
Quindi un layout molto<\/em> grezzo per il codice del vostro sito potrebbe essere qualcosa di simile:<\/p>\n
- \n
- Meta dell’header<\/li>\n
- Coolfooter.js<\/li>\n
- HTML per i vostri contenuti above the fold. Questo \u00e8 tutto il contenuto che un visitatore vede subito (prima di iniziare a interagire con la pagina<\/em>)<\/li>\n<\/ul>\n
Ed ecco perch\u00e9 questo \u00e8 un problema:<\/p>\n
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.<\/p>\n
Risultato finale? Ci vuole pi\u00f9 tempo per visualizzare l’HTML per i contenuti above-the-fold<\/strong>, il che significa che i visitatori percepiranno il vostro sito come pi\u00f9 lento.<\/p>\n
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\u00e9 ci vorr\u00e0 pi\u00f9 tempo perch\u00e9 i browser dei visitatori scarichino la parte visibile dei tuoi contenuti”.<\/p>\n
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\u00e0 gi\u00e0 caricata.<\/p>\n
Cosa Sono le Risorse che Bloccano la Visualizzazione?<\/h3>\n
Quando si parla di risorse che bloccano il rendering, di solito si parla di:<\/p>\n
- \n
- CSS<\/li>\n
- JavaScript<\/li>\n<\/ul>\n
\u00c8 importante capire che non tutti i file CSS e JavaScript sono in grado<\/strong> di bloccare la visualizzazione<\/strong>.<\/p>\n
Per esempio, \u00e8 importante caricare il vostro CSS critico vicino alla parte superiore, altrimenti i vostri visitatori potrebbero sperimentare quello che \u00e8 conosciuto come un flash di contenuti non stilizzati<\/a> (FOUC).<\/p>\n
Le Immagini Sono Risorse che Bloccano il Rendering?<\/h3>\n
No, le immagini non bloccano il rendering<\/strong>. \u00c8 comunque importante ottimizzare<\/a> le vostre immagini<\/a> per ridurre le dimensioni dei file, ma non dovete preoccuparvi di ottimizzare il percorso di consegna delle immagini.<\/p>\n
Come Verificare se il Vostro Sito ha Risorse che Bloccano la Visualizzazione<\/h2>\n
Per valutare se il vostro sito WordPress dispone o meno di risorse che bloccano il rendering, potete utilizzare Google PageSpeed Insights<\/a>.<\/p>\n
Tutto ci\u00f2 che dovrete fare \u00e8 inserire l’URL che volete testare. Poi, se avete un problema di risorse che bloccano il rendering, PageSpeed Insights elencher\u00e0 ogni singola risorsa nella sezione Eliminare le risorse che bloccano la visualizzazione<\/strong>, sotto Opportunit\u00e0<\/strong>:<\/p>\n
![\"Il](\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/12\/eliminate-render-blocking-resources-wordpress-1.jpg\")
Il messaggio Elimina le risorse di blocco della visualizzazione in PageSpeed Insights<\/figcaption><\/figure>\n Come Eliminare le Risorse che Bloccano la Visualizzazione?<\/h2>\n
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.<\/p>\n
Tuttavia, \u00e8 utile capire cosa fanno questi plugin dietro le quinte per eliminare le risorse che bloccano il rendering.<\/p>\n
Come Eliminare JavaScript che Blocca il Rendering<\/h3>\n
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<\/a>, ma ecco i metodi principali:<\/p>\n
- \n
- Async<\/strong> – 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\u00e8, non smette completamente di effettuare il parsing mentre il file viene scaricato. Tuttavia, metter\u00e0 in pausa il parser HTML per eseguire lo script una volta scaricato.<\/li>\n
- Defer<\/strong> – lascia che il parser HTML scarichi il codice JavaScript mentre analizza il resto dell’HTML e<\/strong> aspetta ad eseguire lo script fino a quando il parsing HTML non sia finito.<\/li>\n<\/ul>\n
Questa illustrazione di Growing with the Web<\/a> mostra bene la differenza:<\/p>\n
![\"JavaScript](\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/08\/async-vs-defer-javascript-3.png\")
JavaScript async vs defer<\/figcaption><\/figure>\n Il vantaggio di utilizzare defer<\/strong> \u00e8 che garantisce che i vostri script vengano eseguiti nell’ordine in cui appaiono nel codice.<\/p>\n
Async<\/strong> non segue questo approccio, che a volte pu\u00f2 causare problemi se viene applicato a tutte le risorse JavaScript, perch\u00e9 spesso pu\u00f2 bloccare risorse che dipendono da altre risorse che appaiono prima nel documento. Il problema pi\u00f9 comune generato da async \u00e8 il blocco delle dipendenze di jQuery<\/a> che cercano di caricare prima che jquery.js sia stato aggiunto al documento.<\/p>\n
Come Eliminare il CSS che Blocca la Visualizzazione<\/h3>\n
Eliminare i CSS che bloccano il rendering pu\u00f2 essere un po’ pi\u00f9 complicato perch\u00e9 bisogna fare attenzione a non ritardare i CSS necessari per il rendering dei contenuti above-the-fold. La procedura ideale \u00e8 quella di:<\/p>\n
- \n
- Identificare gli stili che sono necessari per rendere il contenuto above-the-fold e consegnare quegli stili in linea con l’HTML<\/a>.<\/li>\n
- Utilizzare l’attributo media sugli elementi link che inseriscono i file CSS per identificare le risorse CSS che sono condizionali, cio\u00e8 necessarie solo per dispositivi o situazioni specifiche.<\/li>\n
- Le risorse CSS rimanenti dovrebbero essere caricate in modo asincrono, una cosa che di solito viene fatta aggiungendole con JavaScript differito o asincrono. Questo \u00e8 sicuramente territorio per un ingegnere di frontend. Il che \u00e8 fantastico se siete ingegneri di front-end, ma la maggior parte di noi non lo \u00e8. La buona notizia \u00e8 che questo \u00e8 un articolo su WordPress, e si pu\u00f2 eliminare o almeno ridurre significativamente il numero di risorse JS e CSS che bloccano il rendering con il plugin giusto.<\/li>\n<\/ul>\n
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<\/a> direttamente nel cruscotto di MyKinsta<\/a>, consentendo ai clienti di abilitare la minificazione automatica di CSS e JavaScript con un semplice clic.<\/p>\n
Se non riuscite a individuare la funzione dal vostro cruscotto, consultate il nostro video Come attivare la minificazione in MyKinsta<\/a>.<\/p>\n
Come Eliminare le Risorse CSS e JavaScript di Blocco della Visualizzazione con i Plugin di WordPress<\/h2>\n
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:<\/p>\n
- \n
- Autoptimize + Async JavaScript (gratuito)<\/li>\n
- WP Rocket (a pagamento)<\/li>\n<\/ul>\n
Per riferimento, ecco come si presenta il nostro sito di prova prima di ottimizzare la consegna di CSS<\/a> e JavaScript:<\/p>\n
Il messaggio Elimina le risorse di blocco della visualizzazione in PageSpeed Insights<\/figcaption><\/figure>\n 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 …<\/p>\n
- \n
- Provate il vostro sito non ottimizzato<\/li>\n
- Attivate uno dei plugin di questa sezione<\/li>\n
- Ritestate il vostro sito<\/li>\n<\/ol>\n
…, e lo fate velocemente, allora vedrete ancora i risultati riferiti al vostro sito non ottimizzato, fino a quando Google non ripristiner\u00e0 la sua cache. Quindi aspettate qualche minuto che Google cancelli la sua cache prima di concludere che il plugin non funziona.<\/p>\n
Come Eliminare le Risorse di Blocco della Visualizzazione con i Plugin Autoptimize + Async JavaScript<\/h3>\n
Autoptimize<\/a> e Async JavaScript<\/a> sono due distinti plugin gratuiti dello stesso sviluppatore. Insieme, vi aiutano a ottimizzare la consegna sia dei CSS che di JavaScript.<\/p>\n
Una volta installati entrambi i plugin<\/a>, andate su Impostazioni \u2192 Async JavaScript<\/strong> e:<\/p>\n
- \n
- Spuntate la casella Abilita Async JavaScript<\/strong> in alto.<\/li>\n
- Scegliete tra Apply Async<\/strong> e Apply Defer<\/strong> nella casella Quick Settings (Impostazioni rapide)<\/strong>.<\/li>\n<\/ul>\n
![\"Come](\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/12\/configurare-plugin-Async-JavaScript-wordpress-2.jpg\")
Come configurare il plugin Async JavaScript<\/figcaption><\/figure>\n Se l’opzione Async<\/strong> causa problemi sul vostro sito, vi consigliamo di provare a differire<\/strong> o ad escludere jQuery<\/strong>: il plugin offre un’opzione per questo.<\/p>\n
Una volta impostato il plugin Async JavaScript, andate in Impostazioni \u2192 Autoptimize<\/strong> e:<\/p>\n
- \n
- Selezionate la casella Optimize JavaScript Code<\/strong><\/li>\n
- Selezionate la casella Optimize CSS Code<\/strong><\/li>\n<\/ul>\n
![\"Come](\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/12\/configurare-plugin-Autoptimize-wordpress-3.jpg\")
Come configurare il plugin Autoptimize<\/figcaption><\/figure>\n 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.<\/p>\n
Dopo aver configurato sia Autoptimize che Async JavaScript<\/a>, il nostro sito di prova ha superato il controllo “Elimina le risorse di blocco della visualizzazione” di PageSpeed Insights:<\/p>\n
![\"Risultati](\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/12\/eliminate-render-blocking-resources-wordpress-4.jpg\")
Risultati PageSpeed Insights con Autoptimize e Async JavaScript<\/figcaption><\/figure>\n Se si volesse eliminare un numero ancora maggiore di questi file, si potrebbe utilizzare Autoptimize anche per inserire in linea manualmente i CSS critici<\/a>. Questo richiede per\u00f2 una certa conoscenza di sviluppo, quindi non \u00e8 una cosa per chi non \u00e8 sviluppatore.<\/p>\n
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 \u00e8 quello di usarli congiuntamente.<\/p>\n
Come Eliminare le Risorse di Blocco della Visualizzazione con WP Rocket<\/h3>\n
WP Rocket<\/a> \u00e8 un popolare plugin WordPress premium per le prestazioni e la cache di WordPress.<\/p>\n
Normalmente, non consentiamo l’utilizzo di plugin di cache<\/a> su siti WordPress ospitati su Kinsta perch\u00e9 gestiamo gi\u00e0 il caching per voi<\/a> a livello di server, attraverso la veloce cache Nginx FastCGI.<\/p>\n
- Selezionate la casella Optimize CSS Code<\/strong><\/li>\n<\/ul>\n
- Scegliete tra Apply Async<\/strong> e Apply Defer<\/strong> nella casella Quick Settings (Impostazioni rapide)<\/strong>.<\/li>\n<\/ul>\n
- Spuntate la casella Abilita Async JavaScript<\/strong> in alto.<\/li>\n
- Defer<\/strong> – lascia che il parser HTML scarichi il codice JavaScript mentre analizza il resto dell’HTML e<\/strong> aspetta ad eseguire lo script fino a quando il parsing HTML non sia finito.<\/li>\n<\/ul>\n
- Async<\/strong> – 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\u00e8, non smette completamente di effettuare il parsing mentre il file viene scaricato. Tuttavia, metter\u00e0 in pausa il parser HTML per eseguire lo script una volta scaricato.<\/li>\n
- Come eliminare le risorse che bloccano la visualizzazione in generale<\/em><\/a><\/li>\n
![\"Come](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/02\/wp-rocket-backend.png\")
![\"Risultati](\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/12\/eliminate-render-blocking-resources-wordpress-6.jpg\")