Quando è il momento di analizzare la velocità del vostro sito web, è bene tener presente che la velocità è una caratteristica necessaria, non un lusso, e bisogna gestirla di conseguenza. Ci sono molte variabili che entrano nell’equazione che determina il tempo necessario ai visitatori del sito per iniziare a visualizzare i contenuti delle pagine. Alcune di queste variabili non possono essere controllate: la velocità della connessione a Internet, la posizione geografica, la congestione della rete e così via. Tuttavia, ci sono molte altri elementi che potete e dovreste controllare.

Uno strumento che potete utilizzare per identificare le anomalie che riducono la velocità, e che rientrano nell’ambito del vostro controllo, è Google PageSpeed Insights. Avrete sicuramente già utilizzato PageSpeed ​​Insights (se non lo avete utilizzato, vi suggeriamo di leggere il nostro articolo prima di leggere il resto di questo post). È gratuito e identifica le anomalie che rallentano la consegna dei vostri siti web, tra cui JavaScript e CSS che bloccano il rendering delle pagine.

Problema comune: Risorse JavaScript e CSS che bloccano il Rendering

Esistono dieci regole sulla velocità utilizzate per analizzare i siti eseguiti tramite PageSpeed ​​Insights. Due di queste regole hanno a che fare con le risorse JavaScript e CSS che bloccano i contenuti above the fold. Se una di queste due regole viene mancata – e molti, molti siti non rispettano una delle due o entrambe – vedrete un messaggio “Correggere il problema”, che vi consentirà di: Eliminare JavaScript e CSS che bloccano la visualizzazione dei contenuti above the fold.

Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

Cosa significa realmente? Ecco una spiegazione più approfondita.

Quando un browser carica una pagina Web, le risorse JavaScript e CSS di solito impediscono la visualizzazione della pagina fino a quando non vengono scaricate ed elaborate dal browser. In alcuni casi, questa è una cosa positiva. Ad esempio, se eseguite il rendering di puro HTML prima che venga scaricato qualsiasi file CSS, otterrete quello che viene definito flash of unstyled content (FOUC), che consiste probabilmente in un’esperienza peggiore per i vostri utenti rispetto all’attesa di qualche centesimo di secondo per la visualizzazione del contenuto.

Alcune risorse devono essere scaricate ed elaborate prima di visualizzare qualsiasi cosa. Tuttavia, molte risorse CSS e JavaScript sono condizionali – cioè si applicano solo in casi specifici – o semplicemente non sono necessarie per la visualizzazione dei contenuti above the fold. Per produrre l’esperienza più rapida possibile per i vostri utenti, dovreste cercare di eliminare tutte le risorse che bloccano il rendering che non sono necessarie per la visualizzazione del contenuto above the fold.

Voglio essere chiaro su un punto: potrebbe essere troppo difficile o semplicemente impossibile rimuovere tutte le risorse che bloccano il rendering. Così facendo potreste persino generare il temuto FOUC (vedi su) che ho menzionato un minuto fa. Ricordate solo che non è il nostro obiettivo raggiungere il punteggio massimo su PageSpeed. Al contrario, il nostro obiettivo è offrire la migliore esperienza utente possibile, e ciò significa che un sito web si carichi il più velocemente possibile senza presentare contenuti non stilizzati.

In altre parole, usate PageSpeed Insights per identificare i file che bloccano il rendering e poi provare ad eliminarli, ma lasciate che sia la UX la vostra linea guida di riferimento. Potreste anche visualizzare questo messaggio in altri strumenti di test della velocità. Ad esempio, in GTmetrix viene visualizzato come “Defer Parsing of JavaScript“.

Come Eliminare le Risorse JavaScript e CSS che Bloccano il Rendering

C’è un plugin per questo, giusto? Beh, certo, ma dovete capire cosa sta succedendo prima di iniziare a collegare dei plugin. Molti plugin sono altamente configurabili e sapere come vengono eliminate le risorse che bloccano il rendering vi aiuterà a lavorare in modo più efficace con il plugin che avete scelto.

Eliminate JS dal Critical Rendering Path

Innanzitutto, parliamo di JavaScript. L’idea di base è spostare le risorse JavaScript e jQuery al di fuori del critical rendering path. Questo task viene in genere eseguito aggiungendo l’attributo defer o async agli elementi HTML script che invocano le risorse JavaScript.

Gli attributi defer e async non hanno la stessa funzione ed è importante capire la differenza.

  • L’attributo async dice al browser di iniziare subito a scaricare la risorsa senza rallentare il parsing HTML. Una volta che la risorsa è disponibile, il parsing HTML viene messo in pausa in modo che la risorsa possa essere caricata.
  • L’attributo defer dice al browser di sospendere il download della risorsa fino al completamento del parsing HTML. Una volta che il browser ha finito con l’HTML, scaricherà e posteciperà l’esecuzione di tutti gli script nell’ordine in cui compaiono nel documento.

La grande differenza tra i due è che defer assicura che gli script vengano scaricati e applicati alla pagina web nell’ordine in cui appaiono nel documento HTML, mentre async non lo fa. Il risultato è che se async viene utilizzato su tutte le risorse JavaScript, può interrompere le risorse che dipendono dalle risorse che appaiono prima nel documento. Il problema più comune generato da async è costituito dalle risorse jQuery che vengono interrotte perché si tenta di caricarle prima che jquery.js sia stato aggiunto al documento.

Ottimizzare la Consegna delle Risorse CSS

Può essere difficile, se non impossibile, anche eliminare completamente le risorse CSS che bloccano il rendering. L’assetto ideale è il seguente:

  • Identificare gli stili richiesti per la visualizzazione dei contenuti above-the-fold e consegnare gli stili in linea con l’HTML.
  • Utilizzare l’attributo media sugli elementi link che inseriscono i file CSS per identificare le risorse CSS condizionali, ovvero necessarie solo per dispositivi o situazioni specifiche.
  • Le rimanenti risorse CSS dovrebbero essere caricate in modo asincrono, una mossa che viene in genere eseguita aggiungendo queste risorse ai JavaScript differiti o asincroni. Siamo sinceri, stiamo davvero entrando in profondità qui, vero? Questo è sicuramente un territorio per ingegneri di front-end. Che è una cosa fantastica se siete ingegneri front-end, ma la maggior parte di noi non lo è. La buona notizia è che questo è un articolo su WordPress ed è possibile eliminare o ridurre in modo significativo il numero di risorse JS e CSS che bloccano la visualizzazione delle pagine del vostro sito con i plugin giusti.

Plugin per Ridurre le Risorse JavaScript e CSS che Bloccano il Rendering

In preparazione per questo articolo, ho lavorato su una dozzina di popolari plugin di WordPress progettati per ridurre ed eliminare le risorse JavaScript e CSS che bloccano il rendering e ho optato per cinque di queste che hanno generato una riduzione misurabile.

Devo anche dire che non ho usato alcun plugin di caching durante questo lavoro. Il mio sito di prova è stato impostato su un piano Kinsta che viene fornito con cache integrata a livello di server. Se non siete clienti Kinsta, la configurazione di un buon plugin di memorizzazione nella cache migliorerà ulteriormente le prestazioni del vostro sito.

Tuttavia, prima di arrivare ai plugin, abbiamo bisogno di un punteggio di riferimento. Quello che ho fatto è stato creare un semplice sito di test su Kinsta e installare un tema popolare, gratuito e con utilizzo di jQuery da WordPress.org: Sydney. Senza fare altro, ecco a che punto siamo.

PageSpeed Insights senza plugin

PageSpeed Insights senza plugin

Non male, ma c’è sicuramente spazio per miglioramenti. Ci sono due risorse JavaScript e cinque risorse CSS in una posizione che blocca il rendering.

Un altro test che utilizzeremo come benchmark è lo Speed Test del sito Web di Pingdom. In particolare, vogliamo prendere nota del numero di richieste necessarie a caricare la pagina web e vedere come quel numero cambia con i diversi plugin attivati di volta in volta. Ogni richiesta aggiuntiva significa un’altro roundtrip verso il server, per questo molti plugin combinano le risorse CSS e JavaScript in un numero inferiore di file per velocizzare le prestazioni del sito web.

Dal momento che il mio sito di prova è ospitato su Kinsta, il sito è subito incredibilmente veloce e ha inviato 24 richieste per caricare la home page.

Speed test senza plugin

Speed test senza plugin

Vediamo come possiamo migliorare le prestazioni provando alcuni plugin.

Speed ​​Booster Pack

Il primo è Speed Booster Pack. Questo plugin è attivo su oltre 40.000 siti WordPress ed ha una valutazione di 3,6 stelle su 5 su WordPress.org.

Il plugin Speed Booster pack

Il plugin Speed Booster pack

Le impostazioni del plugin si trovano in Impostazioni > Speed ​​Booster Pack e il menu è abbastanza semplice anche se offre diverse opzioni di configurazione.

Il menu delle opzioni generali permete di spostare gli script nel footer e rinviare (“Defer”) il parsing dei file javascript. In combinazione, queste due opzioni dovrebbero rimuovere completamente le risorse JavaScript che bloccano il rendering. Un altro menu intitolato “Still need more speed?” consente il caricamento di CSS in modo asincrono. Anche se questo avrebbe dovuto eliminare tutto le risorse CSS che bloccavano il rendering, abilitando questa opzione veniva prodotto il temuto FOUC, quindi non ho lasciato questa opzione attiva.

Con il plugin così configurato, ecco come il sito si è comportato in PageSpeed ​​Insights.

PageSpeed Insights con il plugin Speed Booster

PageSpeed Insights con il plugin Speed Booster

Come anticipato, non sono rimaste risorse JavaScript che bloccano il rendering. Tuttavia, poiché il caricamento asincrono dei CSS ha prodotto un FOUC e deve essere lasciato disattivato, tutte e cinque le risorse CSS bloccano ancora il contenuto above-the-fold.

Speed test con il plugin Speed Booster

Speed test con il plugin Speed Booster

Curiosamente, il numero di richieste è in realtà aumentato. Mentre non c’era nulla che poteva far pensare ad una diminuzione, l’aumento del numero di richieste è stata una sorpresa. Il livello generale delle prestazioni è migliorato leggermente, quindi non dirò che Speed ​​Booster Pack non funziona. Tuttavia, ci sono alternative più efficaci.

JCH Optimize

Ora diamo un’occhiata a JCH Optimize. Sebbene il plugin abbia abbia un minor numero di installazioni attive rispetto a Speed ​​Booster Pack, vanta un impressionante valutazione di 4,6 stelle su 5.

Il plugin JCH Optimize

Il plugin JCH Optimize

Questo plugin combina e minimizza le risorse JavaScript e CSS e, insieme a molte altre funzionalità, è progettato per accelerare il caricamento della pagina. Mentre l’eliminazione delle risorse che bloccano il rendering non è menzionata in modo specifico da nessuna parte, la combinazione di file JavaScript e CSS dovrebbe significare che ci sono meno risorse necessarie per caricare la pagina e meno risorse JS e CSS in una posizione che blocchi rendering.

Il plugin aggiunge un menu di impostazioni in Impostazioni > JCH Optimize. Questo menu ha diverse pagine con molte opzioni di configurazione. Per semplificare un po’ le cose, ho selezionato le impostazioni automatiche medie (“Average“) nel menu Basic Options.

I risultati sono stati un po’ sconcertanti.

 PageSpeed Insights con il plugin JCH

PageSpeed Insights con il plugin JCH

Tutte le risorse JavaScript sono state combinate, il che significa che solo una risorsa JS sta bloccando la visualizzazione dei contenuti above-the-fold. Fin qui tutto bene. I risultati relativi alle risorse CSS invece danno un po’ di grattacapi. Ci sono ancora cinque risorse CSS in una posizione tale da bloccare il rendering. Sembra che il plugin abbia combinato e minimizzato il contenuto dei file CSS. Tuttavia, i file dei font sono stati esclusi e JCH ha caricato tre diversi file CSS anziché combinare tutti e tre in un singolo file.

Non è quello che mi aspettavo. Vediamo cosa pensa di questi cambiamenti lo Speed Test di Pingdom.

Speed test con il plugin JCH

Speed test con il plugin JCH

Come anticipato, il numero di richieste è stato ridotto di uno poiché sono state combinate due risorse JavaScript. Oltre a questo, il test mostra prestazioni praticamente invariate.

Mi aspettavo un miglioramento più sensibile da JCH. Mi aspettavo che tutti i file CSS sarebbero stati combinati e sarebbero rimaste solo due risorse a bloccare il rendering: un file JavaScript combinato e un file CSS combinato. Non sono sicuro del perché questo non sia successo. È disponibile una versione premium di JCH Optimize, pertanto è possibile che alcune delle funzionalità avanzate consentano di combinare ulteriormente i file CSS e ridurre il numero di risorse che bloccano il rendering.

Allo stato attuale, JCH Optimize non è molto di aiuto per ottimizzare questo specifico sito di prova.

Autoptimize

Con oltre 600.000 installazioni attive e una valutazione di 4,7 stelle su 5, Autoptimize è uno dei plugin di ottimizzazione delle prestazioni più popolari nella directory dei plugin di WordPress. Guadagna anche tanti punti così com’è, grazie all’attitudine generosa dell’autore del plugin.

Il plugin Autoptimize

Il plugin Autoptimize

Questo plugin è progettato per essere semplice da usare e mantiene le sue promesse. Mentre molte degli altri plugin che ho analizzato avevano menu molto complessi, Autoptimize è molto semplice. Tutto ciò che ho fatto è stato andare su Settings > Autoptimize e selezionare le tre opzioni della casella di controllo principale presenti nella pagina.

Impostazioni di Autoptimize

Impostazioni di Autoptimize

Ecco come il mio sito di prova è stato eseguito su PageSpeed ​​Insights dopo quella semplice ottimizzazione che ha richiesto 30 secondi o anche meno.

PageSpeed Insights con il plugin Autoptimize

PageSpeed Insights con il plugin Autoptimize

Siamo riusciti a ridurre il numero di risorse che bloccavano il rendering da un totale di sette a quattro. Molto bene. Ora vediamo come è cambiato il numero di richieste.

Speed test con il plugin Autoptimize

Speed test con il plugin Autoptimize

Il numero totale di richieste è diminuito considerevolmente da 24 a 17, e il grado di rendimento è balzato a un impressionante valore di 92. Sembra che Autoptimize sia popolare per un’ottima ragione. Devo dire che Kinsta ha notato una tendenza all’incompatibilità di Autoptimize con alcuni siti che incorporano CSS personali nel file header.php. Se avete dei CSS personali nel file header.php del vostro tema, prestate molta attenzione se provate Autoptimize.

Async Javascript

Il successivo della lista è Async Javascript. Questo plugin è diventato molto popolare in un breve lasso di tempo ed è gestito dallo stesso sviluppatore di Autoptimize. È passato da 4.000 installazioni a oltre 40.000 in meno di un anno, con una valutazione molto elevata: 4,4 stelle su 5. Questo è un altro plugin tremendamente semplice. Basta installarlo e attivarlo. Andate all’opzione Async Javascript che viene aggiunta al menu di amministrazione. Selezionate la casella di controllo accanto a “Enable Async JavaScript. Selezionate il pulsante di opzione per il metodo Defer o Async. Quindi salvate le modifiche e guardate come si comporta il vostro sito.

Nel caso del mio sito di prova, async finisce per caricare alcuni file jQuery prima di jquery.js, causando l’interruzione del sito. Quindi ho provato con il metodo di defer. Con queste opzioni, ecco come sono andati i test. Innanzitutto, PageSpeed ​​Insights.

PageSpeed Insights con il plugin Async

PageSpeed Insights con il plugin Async

Come anticipato, tutto il codice JavaScript è stato rimosso, ma il CSS non è stato toccato. Questo va bene perché questo plugin è progettato per ordinare solo JavaScript.

Speed test con il plugin Async

Speed test con il plugin Async

Le prestazioni del sito nello Speed Test di Pingdom sono rimaste invariate con il plugin installato. Ancora una volta, questo conferma che questo plugin fa esattamente quello che dice: elimina le risorse JavaScript che bloccano il rendering.

Combinare Async JS e Autoptimize

Il menu di Async Javascript attira l’attenzione sul fatto che è progettato per funzionare con Autoptimize. Dato che avevo già installato Autoptimize, ho provato. Dopo l’attivazione di Autoptimize, è apparsa una nuova casella di controllo nel menu delle impostazioni di Async Javascript che permette di abilitare il supporto di Autoptimize. Con la casella di controllo abilitata, ecco come si è comportato il sito.

PageSpeed Insights con i plugin Async e Autoptimize

PageSpeed Insights con i plugin Async and Autoptimize

Eccellente. Con entrambi i plugin impostati, siamo riusciti a ridurre il numero totale di risorse che bloccano il rendering fino a tre sole risorse CSS. In che modo è cambiato il numero di richieste?

Speed test con i plugin Async e Autoptimize

Speed test con i plugin Async e Autoptimize

Il sito è velocissimo e invia solo 17 richieste.

Non sono un grande fan di Async Javascript se preso da solo. Dedica più spazio nel menu delle impostazioni alla pubblicità della versione premium che alle impostazioni del plugin. Aggiunge un elemento principale al menu di amministrazione invece di aggiungerlo come voce di sottomenu nel menu Impostazioni, a cui in realtà appartiene. Scrive in modo errato JavaScript scrivendolo Javascript. Ok, ammetto che l’ultimo appunto è banale, ma se la P in WordPress è importante, anche la S in JavaScript lo è.

Aggiornamento: l’autore del plugin ha risolto questi dubbi dopo la pubblicazione del nostro post, riducendo la dimensione dell’annuncio pubblicitario, spostando la posizione del plugin nel menu di amministrazione e persino correggendo l’ortografia di JavaScript. Siamo colpiti. Indipendentemente dal mio pensiero su Async Javascript da solo, quando abbinato a Autoptimize fa un ottimo lavoro nell’eliminare completamente il codice JavaScript e ridurre la quantità di CSS che bloccano il rendering.

Hummingbird

L’ultimo plugin che ho provato è stato Hummingbird di WPMU DEV. Questo è un plugin che uso su alcuni dei miei siti web. In precedenza era un plugin premium, ma ora è disponibile gratuitamente! Ha generato la riduzione più significativa delle risorse che bloccavano il rendering, quindi bisogna parlarne.

 Il plugin Hummingbird

Il plugin Hummingbird

Hummingbird è un plugin complesso, ma anche abbastanza user-friendly considerando quanto offre. Per spostare le risorse che bloccano del rendering, andate su Hummingbird > Minification e selezionate Check Files. Dalla schermata risultante è possibile selezionare i file CSS e JavaScript da spostare nel footer o nell’header della pagina, nonché sui file da combinare e minimizzare.

Ho unito e minimizzato tutti i file e li ho spostati tutti nel footer della pagina con due eccezioni: il file style.css principale del tema e il file jquery.js. Ho scoperto che entrambi i file devono rimanere nella loro posizione originale per evitare di interrompere il sito o produrre un FOUC. Con queste impostazioni, ecco come viene eseguito il sito in PageSpeed ​​Insights.

PageSpeed Insights con il plugin Hummingbird

PageSpeed Insights con il plugin Hummingbird

Come previsto, abbiamo ridotto a 2 il numero di risorse che bloccano il rendering: style.css e jquery.js . Ottimo. Vediamo cosa ci dice Pingdom.

Speed test con il plugin Hummingbird

Speed test con il plugin Hummingbird

Sebbene il livello di rendimento complessivo non sia così elevato come con Autoptimize, siamo riusciti a ridurre il numero totale di richieste fino al valore più basso che abbiamo raggiunto finora: 16.

Async JS Funziona Bene con Hummingbird

Anche se le cose sembrano già ottime, mi viene in mente che Async Javascript potrebbe aiutarci a spostare jquery.js senza rompere nulla. Dopo aver attivato Async Javascript e aver rieseguito PageSpeed ​​Insights, vedo che abbiamo eliminato quasi completamente tutte le risorse che bloccano il rendering.

Eliminare le risorse JavaScript che bloccano la visualizzazione

Eliminare le risorse JavaScript che bloccano la visualizzazione

Tutto ciò che è rimasto in sospeso è style.css. L’ultimo passaggio che ci consente di eliminare completamente tutte le risorse che bloccano il rendering potrebbe essere quello di inserire inline style.css. Tuttavia, siamo riusciti a passare dal messaggio Should Fix a un messaggio Consider Fixing in PageSpeed ​​Insights. Rimando a quanto dice Google su quando preoccuparsi di un messaggio Consider Fixing e dire che ciò che abbiamo realizzato fino ad ora è un grande successo.

Riepilogo

Non tutti i plugin che pretendono di spostare ed eliminare le risorse JavaScript e CSS che bloccano la visualizzazione delle pagine sono uguali. Autoptimize utilizzato in combinazione con Async Javascript è la migliore opzione gratuita che ho trovato per il mio sito di prova. Anche Hummingbird e Async Javascript hanno prodotto risultati che hanno alla fine soddisfatto PageSpeed ​​Insights.

Questo articolo è tutt’altro che esaustivo e ci sono molti altri plugin che potete utilizzare per organizzare le risorse che bloccano il rendering. Quali plugin utilizzate e consigliate per eliminare il problema delle risorse JavaScript e CSS che bloccano la visualizzazione della pagina?

38
Condivisioni