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 dovete controllare.
Per prima cosa controlla le prestazioni del tuo sito con: PageSpeed Insights
È gratuito e identifica le anomalie che rallentano la consegna dei vostri siti web, tra cui JavaScript e CSS che bloccano il rendering delle pagine.
Google PageSpeed Insights emetterà un avviso che riguarda JavaScript e CSS che bloccano la visualizzazione della pagina quando questi file impediscono il più rapido caricamento della pagina.
A volte specifici file JS e CSS sono condizionali, ovvero non sono necessari per visualizzare i contenuti “above the fold”. È possibile evitare che blocchino il rendering utilizzando gli attributi async e defer.
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.
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.
Vediamo come possiamo migliorare le prestazioni provando alcuni plugin di WP.
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 tra i plugin di WordPress.
Hummingbird
Altro 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 realizzato la riduzione più significativa delle risorse che bloccavano il rendering, quindi bisogna citarlo.
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.
Anche Hummingbird e Async Javascript hanno prodotto risultati che hanno alla fine soddisfatto PageSpeed Insights.
Ma attenzione, questo articolo è tutt’altro che esaustivo e ci sono molti altri plugin che potete utilizzare per organizzare le risorse che bloccano il rendering.