La nuova ossessione di tutti i siti che desiderano essere trattati meglio da Google in termini di ranking passa per l’ottimizzazione del PageSpeed Insights: un tool che è molto cambiato rispetto agli scorsi anni, e che tende a considerare parametri diversi tra loro.
Se desiderate ottimizzare il vostro sito in questi termini, ci sono alcune cose che dovrete necessariamente tenere in conto nella vostra attività. Anzitutto capire bene come funziona il tool: al di là della documentazione ufficiale, infatti, i criteri utilizzati per migliorare la valutazione sintetica lato mobile e lato desktop passa, prima di tutto, per la doppia versione del sito. Se usate un theme responsive ovviamente questo problema non si pone, ma considerate che non tutti i theme sono ottimizzati per il mobile e che esiste il mobile first index, che richiede spesso un’ottimizzazione specifica delle pagine web da mobile.
L’ottica in cui bisogna mettersi fin da subito non riguarda tanto l’ottimizzazione “in sè” dei singoli parametri, quindi non è che installando GZIP, comprimendo e minificando i file si riesca a ridurre i tempi di caricamento rilevati dal PageSpeed Insights in automatico. Bisogna invece ottimizzare i parametri soggettivi che riguardano l’utente finale, quindi:
- Visualizzazione primi Contenuti (First Contentful Paint)
- Indice velocità
- Tempo per interattività
- Visualizzazione primi contenuti utili (First Meaningful Paint)
- Prima inattività CPU
- Ritardo prima interazione potenziale max
Come spiegato nella documentazione ufficiale di Google, del resto, queste metriche non sono tutte equivalenti e “pesano” diversamente nella valutazione, ovvero:
- 3X – first contentful paint
- 1X – first meaningful paint
- 2X – first cpu idle
- 5X – time to interactive
- 4X – speed index
- 0X – estimated input latency
I parametri più importanti riguardano la velocità, pertanto, il tempo per la visualizzazione dei primi contenuti ed il tempo necessario alla prima interazione. Se la prima passa per il numero di plugin installati e per la corretta configurazione di cache e WordPress (come ho spiegato per esteso qui), la nuova ottica di ottimizzazione passa per una serie di parametri che non sono direttamente influenzabili manipolando le impostazioni di WordPress. Spiace deludere chi credeva il contrario, ma l’ottimizzazione passa per forza di cose per un approccio più “ingegneristico” e consapevole di cosa influenzi quale parametro.
Ad esempi possiamo partire dal fatto che il tempo necessario a mostrare i primi contenuti utili dipenda dal numero e dalla dimensione di file CSS e JS che la pagina web deve caricare, che quindi è opportuno ridurre al minimo e ridurne anche la dimensione. Cosa che si può fare con vari plugin, ma fin da questo punto sconsiglio di utilizzare soluzioni integrate che millantano di risolvere tutti i problemi: ogni theme andrebbe quindi ottimizzato in modo personalizzato e con singoli plugin che consentano di controllare meglio ogni singolo aspetto. L’unica eccezione è Asset CleanUp: Page Speed Booster, che è un ottimo plugin all in one per provare quantomeno a migliorare il punteggio: provate ad installarlo e a vedere se migliora qualcosa.
Altro aspetto riguarda il caricamento dei JS, che dovrebbe essere sempre in modalità async o defer, in modo che il caricamento dei CSS e dei JS non sia bloccante: questo influisce direttamente First Contentful Paint e First Meaningful Paint. Poi fatto questo è opportuno testare varie soluzioni di compressione file CSS e JS: si può usare il tool di CloudFlare, oppure uno dei tantissimi plugin che permettono con modalità e tempi diversi di farlo. Ovviamente, per inciso, i theme più leggeri sono in un certo senso favoriti in questa valutazione rispetto a quelli comprati ad esempio da ThemeForest, che sono tipicamente i più ostici da ottimizzare.
Sul sito che ho usato per i test ho rilevato la seguente velocità:
in cui era evidente un problema di lentezza nel caricamento della pagina, come visibile dal watermark progressivo dei tempi di caricamento in basso.
Dopo un po’ di prove sono riuscito ad ottenere questi risultati, con un incremento di 22 punti: non male, non vi pare?
Come modifica fondamentale ho creato un file htaccess nuovo, in cui erano attive le opzioni che il server Apache permetteva di abilitare su quel sito (attenzione che vanno testate una per una, e non è detto che il copia-incolla passivo sia una buona idea anche per voi). Sul sito in questione ho installato, inoltre, per inciso:
- Async JavaScript (modalità defer su tutto, jQuery incluso)
- Autoptimize (impostato in modo da non sfasciare la grafica, come potrebbe accadere su altri temi)
L’hosting è V-Hosting, abilita in automatico la compressione GZIP ed il sito usa la CDN per le immagini di JetPack assieme alle opzioni per staticizzare i file CSS/JS. Non sarà automatico, in nessun caso, ottenere questi risultati, ovviamente, e saranno richiesti molti test per poterlo fare. Quindi rimboccatevi le maniche e provate sempre varie soluzioni, prima di lasciarne una attiva.
Al tempo stesso, rimanete fiduciosi e non appena avrete ottenuto il sospirato 90/100 (come minimo) anche da mobile non vi resta che ascoltare la musica della Champions League.
(fonte)
Leultime.info è un blog collaborativo che ispira armonia. Sul nostro blog, promuoviamo un approccio sostanziale alla comunicazione, incoraggiando a condividere opinioni in modo costruttivo e rispettoso. Gli articoli non riflettono necessariamente la visione del proprietario del progetto.
