Core Web Vitals. Come tornare in Classe A su GTmetrix.

Condividi
Condividi su linkedin
LinkedIn
Condividi su facebook
Facebook
Condividi su twitter
Twitter
Condividi su whatsapp
WhatsApp
Condividi
Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Core Web Vitals. Come tornare in Classe A su GTmetrix ottimizzando (di nuovo) il Sito Web secondo i nuovi parametri di Google.
Cosa troverai in questo articolo

Ottimizzare un Sito Web è senza dubbio uno degli aspetti più interessanti da espletare durante la progettazione.

Comprende molte tecniche e strizza l’occhio a parecchi settori di produzione come il codice, il design, i media etc.

Inutile dire che equilibrare il tutto è impresa davvero titanica ma, tuttavia, fattibile … eccome!!

L’incubo di ogni Webmaster, però, è sempre dietro l’angolo. Un giorno ti svegli e ti ritrovi a Elm Street dove ti accorgi che tutto questo lavoro diventa vanificato perché da lassù, intendo Google, hanno deciso di modificare metriche e parametri di valutazione di un Sito Web (Core Web Vitals) stravolgendo, di fatto, tutto come uno tsunami.

… e così ti ritrovi da avere un bel punteggio su GTmetrix tipo Classe A ad una nuova valutazione che al peggio rasenta la lettera F.

Frustrante, senza dubbio, ma occorre rimboccarsi le maniche, correre ai ripari e scalare nuovamente la vetta.

Come?

Vediamolo insieme.

Cosa s'intende per ottimizzazione

Prima di addentrarsi nei meandri del COME recuperare un ottimo punteggio secondo i Core Web Vitals, due parole su cosa vuol dire ottimizzare un Sito Web sono più che necessarie … direi propedeutiche.

Partiamo dal concetto basilare di cosa contiene un Sito Web.

  • Codice HTML:
  • Codice PHP;
  • Codice di Stile (CSS);
  • Immagini, video e grafiche;
  • Contenuti;
  • Database;
  • Etc …

Tutti assets (risorse) che devono interagire tra di loro per generarlo, banalmente, quando l’utente lo richiama via browser.

Noi non ce ne accorgiamo ma, cliccare sul tasto INVIO dopo aver digitato la URL di un Sito Web, significa dire al browser di navigazione, -“contatta il server dove risiede questo Sito e raccogli ed utilizza tutte le informazioni necessarie per caricarlo.“-.

Le reti e le connessioni, oggi, sono abbastanza potenti, vero ma più le richieste sono alte, più gli assets sono tanti e pesanti, più il server/hosting dove risiede non è performante, più il Sito sarà lento.

Parliamo di millesimi di secondo (in alcuni sfortunati casi, anche di secondi) ma tanto basta a Google per decidere se sia o meno penalizzabile perché troppo lento o perché non risponde alle normative basilari come, ad esempio, la visualizzazione su mobile o, peggio. perché ha un’elevata frequenza di rimbalzo (la metrica che valuta quanto un’utente è stato su un Sito Web).

Quindi, un Sito Web ottimizzato è quello che in prima battuta si appoggia su servizi hosting eccellenti come quelli dedicati di Keliweb e che, poi, riesce ad essere performante, equilibrato attraverso l’uso ed utilizzo di software premium come WP Rocket e, soprattutto, in linea con le metriche di valutazione.

Insomma … un casino, ma un bel casino 🙂

GTmetrix, il tool per testare l'ottimizzazione

I tools online per la verifica dell’ottimizzazione di un Sito Web sono molti ma i più noti sono senza dubbio Pingdom e GTmetrix.

Proprio quest’ultimo, poco tempo fa, si è adeguato modificando il suo motore di verifica in osservanza alle nuove direttive Core Web Vitals di Google.

Non occorre registrare un account per usarlo anche se, tuttavia, è consigliato per poter avere uno storico e la possibilità di modificare alcuni parametri di controllo come, ad esempio, la località del nodo di rete da cui simulare il check.

Puoi fare un check su tutti i nodi, anche quello più distanti dal tuo hosting; tuttavia, ti consiglio di testare sempre quello più prossimo al tuo server.

GTmetrix, vecchi parametri di controllo

Ad ogni modo, prima dei Web Vitals, GTmetrix offriva le seguenti metriche:

  • PageSpeed Score;
  • YSlow Score;
  • Fully Loaded Time;
  • Total Page Size;
  • Requests.
GTmetrix | Vecchi parametri di controllo
GTmetrix | Vecchi parametri di controllo

GTmetrix, nuovi parametri di controllo Web Vitals

Oggi, usando comunque riferimento anche a PageSpeed di Google e anche a LightHouse (tool open source che si può trovare nell’inspector di Chrome), ha aggiunto le seguenti nuove metriche.

GTmetrix Grade:

  • Performance
  • Structure.

Web Vitals:

  • Largest Contentful Paint;
  • Total Blocking Time;
  • Cumulative Layout Shift.
GTmetrix | Nuovi parametri di controllo Web Vitals
GTmetrix | Nuovi parametri di controllo Web Vitals

Come puoi vedere un notevole ed importante cambiamento e, ti garantisco, se prima era in Classe A, ora

Core Web Vitals, cosa sono

Come da consuetudine, Google, attraverso il suo Blog, e nello specifico nell’articolo Evaluating page experience for a better web del 28 maggio 2020, ha rilasciato la conferma e le specifiche riguardo i nuovi parametri Core Web Vitals, dichiarando esplicitamente che sarebbero diventati fattore principe per quanto riguarda il ranking di un Sito Web.

Thanks to Google | Search Page Experience Graphic
Thanks to Google | Search Page Experience Graphic

Alla luce di quanto sopra, dunque, le nuove metriche sono:

  • Largest Contentful Paint (LCP);
  • First Input Delay (FID);
  • Cumulative Layout Shift (CLS).

A parte abituarci a questi nomi da fumetti, cerchiamo di analizzarli per comprenderne specifiche e dettagli.

Large Contentful Paint (LCP)

La prima metrica, Largest Contentful Paint (LCP | trovi qui web.dev/lcp/ le specifiche in inglese), controlla e verifica la velocità di caricamento del primo elemento più rilevante (il più grande e pesante) e visibile nella parte above-the-fold del Sito Web.

Ovviamente, più questo elemento sarà veloce durante il caricamento della pagina, più il Sito Web ne trarrà vantaggio.

Gli elementi di analisi LCP

Gli elementi di analisi su cui si basa questa nuova metrica, si possono riassumere brevemente in:

  • elementi di tipo immagini;
  • elementi di tipo video;
  • elementi di immagini in background caricati attraverso i CSS;
  • elementi di blocco (Block-level) contenenti testi o altri elementi.

Ambito e valore LCP

Come detto, il competente settore di analisi del Large Contentful Page è:

  • il caricamento (loading).

Il valore consentito per esser considerato buono è:

  • < 2,5 secondi.
Thanks to Google | Metrica Largest Contentful Paint
Thanks to Google | Metrica Largest Contentful Paint

First Input Delay (FID)

La seconda metrica, First Input Delay (FID | trovi qui web.dev/fid/ le specifiche in inglese), calcola il tempo trascorso tra la prima interazione di un utente con la pagina e il momento in cui il browser risponde effettivamente a quell’interazione.

In short quanto ci mette il browser a rispondere agli input del visitatore.

Gli elementi di analisi FID

Le interazioni possibili sono pressoché infinite e dipendenti dalla struttura e UX del Sito Web, Tuttavia, di seguito, trovi alcuni esempi rilevanti:

  • Brevi animazioni;
  • Contenuti dinamici;
  • Click su un link.
  • Touch da mobile su un bottone;
  • Qualsiasi listener JavaScript.

Ambito e valore FID

Come detto, il competente settore di analisi del First Input Delay è:

  • l’interazione (interactivity).

Il valore consentito per esser considerato buono è:

  • < 100 millisecondi.
Thanks to Google | Metrica First Input Delay
Thanks to Google | Metrica First Input Delay

Cumulative Layout Shift (CLS)

La terza metrica, Cumulative Layout Shift (CLS | trovi qui web.dev/cls/ le specifiche in inglese), misura il livello dei potenziali cambiamenti improvvisi al look-and-feel di una pagina durante l’intera sessione di una visita.

Il classico esempio (che circola in rete) visualizza la condizione in cui un utente sta per cliccare sul pulsante indietro ma il layout cambia improvvisamente costringendolo, suo malgrado, a cliccare sul pulsante di invio ordine.

Gli elementi di analisi CLS

  • Qualsiasi.

Ambito e valore CLS

Come detto, il competente settore di analisi del Cumulative Layout Shift è:

  • stabilità visiva (visual stability).

Il valore consentito per esser considerato buono è:

  • < 0,1.
Thanks to Google | Metrica Cumulative Layout Shift
Thanks to Google | Metrica Cumulative Layout Shift

Ottimizzazione Web Vitals e recupero della Classe A

Bella sfida!! Iniziamo così …

Come visto poc’anzi, ottimizzare un Sito Web non è solo utile ma fondamentale per il Brand, la SEO e … Google.

Fino a poco tempo fa il processo tecnico era chiaro e mirato mentre ora, seppur usufruendo magari di medesime soluzioni, va rivisto e migliorato.

Partendo dal presupposto che un Sito Web fosse già ottimizzato (lasciamo perdere quelli che non lo erano), il primo step è senza dubbio analizzare bene lo status quo in essere attraverso domande del tipo:

  • Cosa sto usando per ottimizzare il Sito Web?
  • Posso migliorare senza stravolgere tutto?
  • Se no, cosa posso usare e come posso fare per soddisfare i Web Vitals?

Per cercare di spiegarti al meglio questo delicato lavoro, prenderò in esame lo sviluppo di bridweb.it, partendo dalla precedente versione gianlucapartengo.it.

Vedremo insieme l’ottimizzazione precedente, la valutazione conseguita su GTmetrix e quella successiva dopo l’ottimizzazione finale per i Core Web Vitals.

Partiamo …

Case History | gianlucapartengo.it

Nel 2020, BRiDWEB non esisteva ancora o meglio sarebbe stata l’evoluzione fisiologica del mio Sito Web personale da professionista gianlucapartengo.it.

All’epoca, le soluzioni per l’ottimizzazione erano le stesse che uso oggi su BRiDWEB e sui Siti Web dei Clienti … ma non tutte.

Gli strumenti utilizzati per l'ottimizzazione

Per ottimizzare un Sito Web, occorre padroneggiare software di terze parti e skills manuali in perfetto equilibrio.

Per questa configurazione, sono stati utilizzati:

  • Keliweb, hosting professionale:
    Un hosting performante, garantisce una risposta immediata da Client a Server e quindi perfette alte velocità del Sito Web.
  • Brooklyn, tema professionale:
    Un tema premium garantisce elevati standard di supporto, soluzioni e funzionalità.
  • WPBakery, Page Builder:
    Uno dei migliori editor visuali al mondo.
  • Plugin professionali (40):
    Plugin premium sono decisamente realizzati meglio e, quindi, quasi sempre permettono un carico meno pesante di risorse.
  • WP Rocket, gestione cache professionale:
    Un gestore di cache che ottimizza gli assets (risorse), gestisce DNS, CDN e molto altro, significa 3/4 di lavoro fatto.
  • Gestione immagini e media:
    La perfetta gestione delle immagini in termini di dimensioni, peso e attributi, fa una notevole differenza.
  • Personalizzazione del file functions.php:
    Intervenire manualmente aggiungendo codice dinamico e selettivo, aiuta a ridurre le chiamate inutili.

Punteggio su GTmetrix

GTmetrix | Valutazione febbraio 2020 di gianlucapartengo.it
GTmetrix | Valutazione febbraio 2020 di gianlucapartengo.it

Case History | bridweb.it | v.01

A fine 2020 nasce BRiDWEB raccogliendo, di fatto, l’eredità dei vent’anni d’esperienza e di lavoro di gianlucapartengo.it.

Nuovo nome, nuovo logo, nuovo design, nuovo dominio e, naturalmente, nuovo look-and-feel.

Gli strumenti utilizzati per l'ottimizzazione

Partendo dal vecchio, il restyling è stato fatto sul design e sui contenuti cercando di mantenere alcuni strumenti del precedente.

Per questa configurazione, sono stati utilizzati i medesimi strumenti di gianlucapartengo.it fatta eccezione per il numero ridotto dei plugin:

  • Keliweb, hosting professionale:
    Un hosting performante, garantisce una risposta immediata da Client a Server e quindi perfette alte velocità del Sito Web.
  • Brooklyn, tema professionale:
    Un tema premium garantisce elevati standard di supporto, soluzioni e funzionalità.
  • WPBakery, Page Builder:
    Uno dei migliori editor visuali al mondo.
  • Plugin professionali (30):
    Plugin premium sono decisamente realizzati meglio e, quindi, quasi sempre permettono un carico meno pesante di risorse.
  • WP Rocket, gestione cache professionale:
    Un gestore di cache che ottimizza gli assets (risorse), gestisce DNS, CDN e molto altro, significa 3/4 di lavoro fatto.
  • Gestione immagini e media:
    La perfetta gestione delle immagini in termini di dimensioni, peso e attributi, fa una notevole differenza.
  • Personalizzazione del file functions.php:
    Intervenire manualmente aggiungendo codice dinamico e selettivo, aiuta a ridurre le chiamate inutili.

Punteggio su GTmetrix

GTmetrix | Valutazione gennaio 2021 di bridweb.it
GTmetrix | Valutazione gennaio 2021 di bridweb.it

Ma come … stessa configurazione, (quasi) stessi plugin, stesso tema, stessi contenuti, eppure adesso siamo in Classe E?

Era evidente che le nuove metriche Core Web Vitals e, di conseguenza, GTmetrix stavano cambiando tutto e quanto fatto fino adesso, sembrava vanificato.

Gli errori maggiori rilevati erano inerenti al Total Blocking Time ed alla metrica Cumulative Layout Shift (CLS).

Decisamente uno dei problemi era il temafrustrante!

Case History | bridweb.it | v.02

Niente, bisognava cambiare registro, risolvere il problema, trovare i giusti equilibri e soddisfare questi nuovi parametri.

La decisione, in questi casi, è per la maggior parte delle volte drastica e vuole il classico -“Torna sui tuoi passi e ricomincia“-

Così, ho deciso di rifare tutto partendo (quasi) da zero, cercando un nuovo tema e adottando soluzioni nuove o, comunque, logicamente e potenzialmente migliori delle risorse usate fino a quel momento.

Da qui la ricerca di una soluzione ottimale, veloce, professionale e supportata e individuata in tre temi precisi:

  • OceanWP
    Tema free/premium ultra veloce e in sintonia con il page builder di WordPress.
  • Astra
    Tema free/premium ultra veloce e in sintonia con il page builder di WordPress.
  • GeneratePress
    Tema free/premium ultra veloce e in sintonia con il page builder di WordPress.

Sicuramente tre ottime soluzioni, decisamente meno pesanti di altre più note e più user friendly come Avada o di Brooklyn stesso che rimane pur sempre un tema eccezionale e che si adeguerà presto anche lui alle nuove metriche.

Tornando ai tre, il salto nel buio era evidente, anche perché avrei dovuto cambiare anche il Page Builder.

Infatti non potevo più usare il “classicoWPBakery non supportato; dunque le opzioni erano tra Gutenberg o altro da individuare.

Ho quindi impostato uno spazio di test ed iniziato a testare i vari temi. Al contempo ho cercato di capire quale editor fosse il più indicato provandoli un pochino tutti fino ad arrivare ad Elementor (fino ad oggi scartato).

Vuoi sapere una cosa? Elementor è una STRA-FI-GA-TA!!

Così, dopo alcuni test, ho individuato in Astra Pro la soluzione ideale per soluzioni, contenuti e supporto. 

Potevo finalmente ripartire con la generazione dei contenuti del Sito Web.

Gli strumenti utilizzati per l'ottimizzazione

Per questa configurazione, sono stati utilizzati:

  • Keliweb, hosting professionale:
    Un hosting performante, garantisce una risposta immediata da Client a Server e quindi perfette alte velocità del Sito Web.
  • Astra, tema professionale:
    Un tema premium molto rapido e che garantisce elevati standard di supporto, soluzioni e funzionalità.
  • Elementor, Page Builder:
    L’editor free/premium professionale numero 1 al mondo.
  • Plugin professionali:
    Plugin premium sono decisamente realizzati meglio e, quindi, quasi sempre permettono un carico meno pesante di risorse.
  • WP Rocket, gestione cache professionale:
    Un gestore di cache che ottimizza gli assets (risorse), gestisce DNS, CDN e molto altro, significa 3/4 di lavoro fatto.
  • Gestione immagini e media:
    La perfetta gestione delle immagini in termini di dimensioni, peso e attributi, fa una notevole differenza.
  • Personalizzazione del file functions.php:
    Intervenire manualmente aggiungendo codice dinamico e selettivo, aiuta a ridurre le chiamate inutili.

Punteggio su GTmetrix

GTmetrix | Valutazione febbraio 2021 di bridweb.it
GTmetrix | Valutazione febbraio 2021 di bridweb.it

Molto molto meglio, ma … porca miseria, ancora non c’eravamo ancora!!

WP Rocket sfruttato al massimo, il tema è una scheggia, Elementor una figata, avevo gestito manualmente l’utilizzo degli assets di Contact Form, avevo escluso il caricamento delle chiamate jQuery, pre-caricato DNS e links vari … eppure avevo ancora problemi di blocco rendering Above-The-Fold.

Case History | bridweb.it | v.03

C’era ancora qualche chiamata JS che rallentava il caricamento iniziale e, magari, questa chiamata non era neanche necessaria per il loading della pagina visualizzata.

Mi rimanevano due strade; la prima cercare di usare un plugin per il caricamento selettivo degli assets sul Sito Web e la seconda, scovare e ritardare la risorsa JS che bloccava il rendering.

Gli strumenti utilizzati per l'ottimizzazione

Partendo dalla prima opzione, ho deciso di provare Asset CleanUP Pro: Page Speed Booster prima nella versione free.

Beh, i risultati sono stati eccellenti perché del tutto intuitivo, molto potente e in sintonia con WP Rocket.

Tuttavia la versione free ha, ovviamente, alcune funzionalità bloccate. Ecco perché ho poi optato per la versione premium che mi ha garantito un controllo totale su tutto e tutti.

Non solo ho potuto gestire il caricamento selettivo dei vari plugin andando a limitarne l’uso solo in pagine specifiche o aree (backend – frontend) ma sono anche intervenuto su diverse opzioni relative al caricamento degli assets sul Sito Web.

Per questa configurazione, sono stati utilizzati:

  • Keliweb, hosting professionale:
    Un hosting performante, garantisce una risposta immediata da Client a Server e quindi perfette alte velocità del Sito Web.
  • Astra, tema professionale:
    Un tema premium molto rapido e che garantisce elevati standard di supporto, soluzioni e funzionalità.
  • Elementor, Page Builder:
    L’editor free/premium professionale numero 1 al mondo.
  • Asset CleanUP, plugin professionale:
    Un plugin per il caricamento selettivo che recita -“Faster page load = Happier Visitors = More Conversions = More Revenue”-
  • Plugin professionali:
    Plugin premium sono decisamente realizzati meglio e, quindi, quasi sempre permettono un carico meno pesante di risorse.
  • WP Rocket, gestione cache professionale:
    Un gestore di cache che ottimizza gli assets (risorse), gestisce DNS, CDN e molto altro, significa 3/4 di lavoro fatto.
  • Gestione immagini e media:
    La perfetta gestione delle immagini in termini di dimensioni, peso e attributi, fa una notevole differenza.
  • Personalizzazione del file functions.php:
    Intervenire manualmente aggiungendo codice dinamico e selettivo, aiuta a ridurre le chiamate inutili.

Punteggio su GTmetrix

GTmetrix | Valutazione febbraio 2021 di bridweb.it con Asset CleanUP
GTmetrix | Valutazione febbraio 2021 di bridweb.it con Asset CleanUP

Ancora no … avevo compiuto l’ennesimo passo in avanti ma ancora l’obiettivo non era stato raggiunto.

Non rimaneva che la seconda opzione, quella relativa al capire ed escludere eventuali file JS che ritardavano il caricamento della pagina.

Nota bene, WP Rocket, plugin eccellentissimo, combina e minifica qualsiasi risorsa per cui, è impossibile capire quale asset sia la causa del ritardo.

Al fine di scovare il problema, ci voleva un trucchetto.

Ho chiesto a GTmetrix di effettuare il check del Sito Web ma, anziché usare la URL normale:

				
					https://bridweb.it
				
			

ho inserito un parametro per escludere la cache e quindi WP Rocket.

In questo modo, di fatto, sicuramente il punteggio sarebbe regredito (virtualmente) ma avrei potuto capire effettivamente quale file stesse rompendo ancora le scatole.

Ho quindi aggiunto il parametro ?nowprocket alla URL che è quindi diventata:

				
					https://bridweb.it/?nowprocket
				
			

A questo punto GTmetrix ha risposto così:

GTmetrix | Valutazione febbraio 2021 di bridweb.it NO WP ROCKET
GTmetrix | Valutazione febbraio 2021 di bridweb.it NO WP ROCKET

Scavando a fondo, ho trovato che questi due assets JS erano la causa del ritardo.

Questi file caricavano risorse per una parte del Sito posta in basso e, quindi, era inutile farli caricare subito.

GTmetrix | Valutazione febbraio 2021 di bridweb.it Unused JS
GTmetrix | Valutazione febbraio 2021 di bridweb.it Unused JS

A questo punto, non mi rimaneva che andare dal caro e buon vecchio WP Rocket, inserire il percorso dei file JS in questione nell’apposito campo Escludere i file JavaScript e ri-testare il tutto su GTmetrix.

GTmetrix | Valutazione febbraio 2021 di bridweb.it Classe A
GTmetrix | Valutazione febbraio 2021 di bridweb.it Classe A

Grazie Astra, Elementor e WP Rocket, obiettivo raggiuntocosì ho parlato! (per gli amanti di The Mandalorian) 🙂

Conclusioni

Come hai potuto vedere ci sono volute settimane di lavoro e tanta pazienza ma la cosa importante è essere riusciti a centrare l’obiettivo.

Sia chiara una cosa, quanto visto sopra, non è LA regola ma UNA regola perché, ovviamente ogni progetto Web ha storia a sé. Tuttavia può essere considerata un’ottima linea guida per risolvere la questione.

Che dire altro, una bella sfida ed una grande vittoria non tanto per BRiDWEB quanto per i suoi Clienti che possono star certi di ottenere un prodotto professionale, curato e sempre in linea con l’evoluzione del Web.

Buona ottimizzazione e, nel caso volessi approfondire tematiche come -“quali impostazioni hai usato per WP Rocket“- o -“come hai modificato il file functions.php“- … basta chiedere! 😉

Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Gian Luca Partengo

Gian Luca Partengo

Professionista del Web e del Marketing da oltre 20 anni. Ha lavorato per importanti Agenzie e Aziende italiane e ha creato e seguito passo a passo il Brand di numerosi Clienti. Oggi sviluppa progetti altamente professionali a partire da un'analisi sullo stato di salute di un Sito Web e della sua SEO Organica, fornendo anche consulenza a privati e aziende.

Potrebbero Interessarti anche ...

Partners

BRiDWEB ringrazia e suggerisce …

Get in Touch

Ci sono molti modi per iniziare una conoscenza o rimanere in contatto e BRiDWEB ti mette a disposizione i migliori: modulo di contatto, e-mail, WhatsApp o chiamata.
Scegli tu quale usare.
BRiDWEB | Brand Identity Web | Web Identity Professionale | Brand Identity Professionale

è il momento di far volare il tuo Sito Web.
Che ne dici, facciamo due chiacchiere?