Questa pagina è parte della guida Come creare un sito da zero

Google penalizza i siti con pagine lente

Google aveva annunciato che, a partire da luglio 2018, la velocità delle pagine, anche sui dispositivi mobili, avrebbe iniziato ad avere grande importanza per il posizionamento nella ricerca con il rilascio di un nuovo algoritmo finalizzato a migliorare l’esperienza dell’utente. Il 2019, quindi, ha dato davvero inizio all'era della velocità come fattore di ranking.

Se la velocità era, già da anni, fondamentale per le ricerche da desktop (chi si intende di SEO lo sa bene), ora lo diventa, ufficialmente, anche su smartphone e tablet. Questo è dettato dal fatto che ormai più della metà del traffico in rete viene da questi dispositivi.

Lo "speed update", che è il nome di questo aggiornamento di Google, prenderà in considerazione le pagine più lente, relativamente a determinate chiavi di ricerca e quale che sia il linguaggio utilizzato per costruirle.

A parità di contenuti importanti e interessanti, quindi, le pagine veloci avranno un posizionamento migliore di quelle lente.

Considerata la competizione in rete e la quantità di siti che trattano i medesimi argomenti, direi che tutto questo abbia un'importanza a dir poco fondamentale. Importanza che crescerà sempre di più negli anni a venire.

Leggi l'annuncio ufficiale di Google: https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

Segnala link non funzionante:

Facebook penalizza i post con link a siti web lenti

Anche Facebook, in contemporanea, ha adottato un nuovo algoritmo che penalizza i post che rimandano a siti web lenti e premia, invece, quelli verso siti web veloci.
Viene data più visibilità, quindi, nella sezione home, ai post contenenti link che conducono a pagine veloci e viene tolta visibilità a quelli che, al contrario, portano a pagine che sono lente al caricamento.
Come per Google, questo riguarderà soprattutto i click effettuati dai dispositivi mobili.
Chi non si preoccupa di questo, non dovrà meravigliarsi se i suoi post avranno una visibilità sempre minore.
Se la velocità della pagina web che vuole condividere supera i 3 secondi, avrà sicuramente poche visualizzazioni.
Leggi l'annuncio ufficiale di Facebook:
https://newsroom.fb.com/news/2017/08/news-feed-fyi-showing-you-stories-that-link-to-faster-loading-webpages/

Segnala link non funzionante:

Cosa fare?

Prima di tutto, controlla la velocità delle tue pagine con lo strumento ufficiale di Google (vedi guida sotto):
Google PageSpeed Insights

Segnala link non funzionante:

NOTA: per un risultato corretto, l'url deve essere inserito per esteso (es: https://www.nomesito.com). Minime variazioni nel risultato sono normali e possono dipendere dai tempi di risposta del server.
Il consiglio è di ripetere il test almeno 3 volte a breve distanza di tempo. Il risultato corretto è il migliore ottenuto.

Se stai pensando di costruire un sito, fallo in HTML e Javascript, come Google stesso consiglia.

Segnala link non funzionante:

Molti consigli li trovi nella guida pagina-perfetta. 

Se hai già un sito in HTML, ma non supera il test, ti basterà seguire i consigli di Google per renderlo performante.

Se hai un sito costruito con Wordpress, o con un altro CMS, oppure tramite un servizio esterno, beh .... mi dispiace dirtelo, ma hai scarse possibilità di poter migliorare veramente le cose, perchè ciò che puoi e non puoi fare dipende poco da te e molto dal programma e dal template che hai scelto.

Leggi anche: "La sicurezza del sito web"

Core Web Vitals

I Core Web Vitals (segnali web essenziali) sono parametri introdotti da Google nel 2020 per valutare l'esperienza dell'utente relativamente alle prestazioni di caricamento di una pagina web. Il punteggio è fondamentale per il posizionamento dei siti web sui motori di ricerca e, in futuro, lo sarà sempre di più.
Leggi: https://developers.google.com/search/docs/appearance/core-web-vitals?hl=it

Segnala link non funzionante:

Questi sono i principali parametri:

FCP (First Contentful Paint) = letteralmente "Prima pittura piena di contenuti", è il tempo impiegato dall’utente per visualizzare il primo contenuto della pagina, quale che sia, nell'area di prima visualizzazione (viewport).

LCP (Largest Contentful Paint) = letteralmente "Pittura più grande piena di contenuti", è il tempo impiegato dall’utente per visualizzare il contenuto più rilevante, nell'area di prima visualizzazione. Siccome gli studi dimostrano che gli utenti tendono a guardare per primo l'elemento più grande, LCP è, di solito, un'immagine o un contenitore (p, div) di grandi dimensioni.

TBT (Total Blocking Time) = letteralmente "Tempo di blocco totale", è il tempo necessario ad una pagina per diventare interattiva per l'utente, cioè consentire gli input come il click sui pulsanti. Si misura da quando la pagina inizia a caricarsi fino a quando tutti gli elementi diventano interattivi. Fattori differenti possono influenzare negativamente il TBT:, come lentezza di esecuzione degli script e di risposta del server, o latenza di rete.

CLS (Cumulative Layout Shift) = letteralmente "Spostamento cumulativo del layout", valuta la stabilità di visualizzazione della pagina. Tale stabilità non deve essere compromessa da spostamenti improvvisi del layout nel passaggio a differenti larghezze dello schermo, o per ritardi nel caricamento dei contenuti. Tutti gli elementi della pagina devono restare sempre stabili nella loro posizione e dimensione per non causare lo spostamento del contenuto intorno ad essi. Il punteggio CLS è il risultato della somma degli spostamenti del layout nell'area di prima visualizzazione.

Google offre un suo strumento per misurare i Core Web Vitals, che si chiama Google PageSpeed Insights.

Google PageSpeed Insights

Google PageSpeed Insights è uno strumento che si appoggia a Lighthouse di Chrome.

Segnala link non funzionante:

NOTA: Se usate Lighthouse, strumento del browser Chrome, ricordate di cancellare il cookie di consenso, se archiviato, al fine di riattivare il blocco degli script di terzi (es. Adsense) che potrebbero influire negativamente sul risultato. Con PageSpeed Insights questo non accade, essendo un tool online con cache temporanea.
PageSpeed Insights è uno strumento molto importante per un duplice motivo:

• Segnala le criticità del sito web e suggerisce le soluzioni per superarle.
• È uno strumento di Google, che è il maggior motore di ricerca e soddisfare i suoi parametri è fondamentale per il buon posizionamento del sito web.

Questo strumento è tanto utile, quanto complesso da comprendere in alcune sue richieste.
Questa guida raccoglie consigli e soluzioni per risolvere gli errori e mettere in pratica i suggerimenti dati al fine di migliorare la velocità, la performance e ottenere un risultato utile a favorire il posizionamento del sito web.

PREMESSA: il sistema di Google PageSpeed Insights analizza la visualizzazione della pagina web relativamente a queste risoluzioni di schermo:

• 1024px 
• 800px
• 479px

NOTA: i risultati sono influenzati dalla rete e dalla distanza del server, per questo motivo possono cambiare. Si consiglia di ripetere il test almeno 3 volte a distanza di qualche minuto. Il risultato migliore ottenuto sarà quello corretto.
Da questo punto di vista, Lighthouse è più attendibile, dato che i risultati vengono estratti dall'esperienza diretta con il browser in uso, fermi restando i consigli precedentemente dati. Tuttavia, Pagespeed Insight fornisce un esame della pagina dettagliato e correlato da indicazioni e suggerimenti per la correzione degli errori e i miglioramenti.

Consigli di base

Non caricate troppe librerie esterne (css e js), soprattutto se complesse.
Limitate i file di stile esterni a 2 al massimo.

Caricamento veloce (preload):

Le risorse importanti e quelle di prima visualizzazione devono essere caricare il più velocemente possibile.
Il modo per ottenere questo risultato è il preload, che indica al browser, appunto, di caricare subito tali risorse.
Esempio di preload:

Il preload va messo nella zona head del codice della pagina.
L'immagine indicata dal programma come "Largest Content Paint" deve essere sempre caricata velocemente. Consigliato anche per le immagini che si trovano nell'area di prima visualizzazione.

Leggi anche la sezione dedicata al preload delle librerie nella guida La pagina perfetta

Caricamento lento:

Le altre risorse devono essere caricate in modo asincrono (async), come visto sopra, o con caricamento lento (loading lazy), in modo da non ostacolare il caricamento della pagina.
Esempio di caricamento lento:

Per le immagini:

Le immagini che si trovano nell'area di prima visualizzazione, non devono essere caricate con caricamento lento.

Immagini, dimensioni e nuovi formati (avif, webp):

Le immagini devono avere sempre, obbligatoriamente, width e height dichiarati (es: width="600" height="300") e il tag alt (es: alt="descrizione").
La compressione minima deve essere 85.
Le  dimensioni delle immagini devono essere adeguate, non troppo grandi, ma nemmeno troppo piccole. Indicativamente, immagini da 600 a 400 px di larghezza vanno bene per tutti gli schermi. In caso vi sia la necessità di inserire immagini molto grandi, bisogna aggiungere anche versioni di dimensioni inferiori e dare la possibilità di scelta ai browser.
Il metodo consigliato è quello di utilizzare il tag "picture" in questo modo:

Il browser caricherà l'immagine indicata secondo la larghezza dello schermo. Naturalmente, si possono aggiungere immagini di dimensioni intermedie, se desiderato.
Non caricate troppe immagini nella stessa pagina.
Usate formati recenti per le immagini. Il più recente è il formato avif. Dato che non tutti i browser supportano i nuovi formati, è necessario offrire l'alternativa in questo modo:

Il browser sceglierà il formato da utilizzare
Va fatto per tutte le immagini della pagina, anche le più piccole.
Per la conversione in formato avif potete usare questo tool online:
https://avif.io/

Segnala link non funzionante:

Se le immagini sono troppo piccole, invece, conviene convertirle in formato svg, che è supportato da tutti i browser ad ha un'ottima compressione..

Per info sul caricamento delle immagini leggi anche: I contenuti del sito.

Combinare le regole di dimensione e formato delle immagini:

Possibile impostare la scelta sia della dimensione dell'immagine secondo la larghezza dello schermo, che del formato secondo il supporto del browser.
Combiniamo le regole in questo modo:

Come sopra, si possono aggiungere regole intermedie se necessario.

Background image e nuovi formati immagine (avif, webp):

Premesso che il consiglio è di non abusare delle immagini di background, abbiamo ora un metodo per implementare il background nei nuovi formati immagine e aggiungere un fallback per i browser che non li supportano.
Il metodo utilizza image-set(). Ecco il codice per il formato avif:

Esempio funzionante

Per maggiori informazioni: https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set

Segnala link non funzionante:

Se l'immagine di background è costituita da una rappresentazione grafica, la cosa migliore è convertirla in formato svg che è supportato da tutti i browser ad ha un'ottima compressione.

Video e audio html5

Aggiungere sempre la regola preload="none", eccetto se sono in autoplay.
NOTA: i video in html5 potrebbero causare un errore che non sempre è reale. Per verifica, effettuate la scansione con lo strumento lighthouse del browser Chrome. Se l'errore non viene confermato, si tratta di un bug del servizio.
Se usate lighthouse, ricordate di cancellare il cookie di consenso per bloccare il caricamento degli elementi esterni che potrebbero influire sul risultato.

File CSS e JS

I file CSS e JS esterni devono essere essenziali, minimizzati e aggiornati. No, quindi, a librerie pesanti, precompilate, se non indispensabili.
I file JS esterni devono essere posizionati in fondo al codice della pagina, prima della chiusura del body, per evitare il blocco del rendering. Se non necessari alla prima visualizzazione della pagina, devono essere caricati in modo asincrono (async).
Evitate di caricare file js che non servono alla pagina specifica. Google segnalerebbe l'errore penalizzando il punteggio.
Evitate di usare document.write().
Maggiori informazioni nella guida La pagina web perfetta.

La cache

Importante la gestione della cache tramite le regole situate nel file htaccess. Nelle Risorse per i webmaster e nella sezione dedicata ai layout, i membri possono scaricare un esempio di file htaccess.

Testo

I font per il testo devono essere caricati con font-display: swap;.
Maggiori informazioni nella guida Il foglio di stile.

Contrasto dei colori

Attenzione a soddisfare questa richiesta, se evidenziata, perchè penalizza sensibilmente.
Se avete un testo su un colore di background, Google esige che ci sia il contrasto adeguato per una lettura ottimale.
La cosa più semplice è utilizzare questo tool online dove inserire il colore del testo e quello dello sfondo e modificarli fino ad ottenere il risultato accettato.
NOTA: tutte e 4 le caselle devono diventare verdi.
https://dequeuniversity.com/rules/axe/4.4/color-contrast

Segnala link non funzionante:

Intestazioni (heading)

Le intestazioni (h1, h2, h3 ....) devono rispettare la gerarchia discendente.
Per esempio, non può esserci l'intestazione h1 seguita da un'intestazione h3, saltando l'intestazione h2.
Esempi:
Giusto:
<h1></h1>
<h2></h2>
<h3></h3>
<h2></h2>
<h2></h2>
<h3></h3>
<h4></h4>
<h4></h4>
<h5></h5>
<h2></h2>
Sbagliato:
<h1></h1>
<h3></h3>
<h4></h4>
<h3></h3>
<h5></h5>

Se ci sono due o più intestazioni poste una sopra all'altra, è opportuno indicarne l'altezza minima.

Script esterni e di terze parti

Gli script esterni devono essere caricati in modo differito, o asincrono.
Esempio:
<script defer src=""></script>
<script async src=""></script>
Per comprendere la differenza tra Defer e Async, leggi la sezione dedicata nella guida: La pagina web perfetta
Quando non è possibile applicare questi attributi, perchè gli script sono necessari alla visualizzazione della pagina, devono essere precaricati con preload (vedi sopra).
Se si tratta di script di terze parti che trasmettono cookie, come quelli utilizzati per gli annunci pubblicitari, possono e devono essere bloccati al primo caricameto e fino al consenso con uno script per il blocco dei cookie.
Trovi uno script scaricabile nella sezione "Cookie law script" della pagina Risorse varie.
Leggi anche: Come adeguare il sito alla Cookie Law

Payload di rete

È bene evitare pagine troppo lunghe che necessitano di lunghi tempi di caricamento, soprattutto se contengono molte immagini.
Se non potete evitare contenuti lunghi e se la lunghezza viene segnalata come eccessiva, potete ritardare il caricamento di alcuni contenuti con l'aiuto di jQuery.
Ecco il codice da utilizzare, ricordando di caricare prima la libreria jQuery:

Dato che il problema si riscontra, di solito, solo con la visualizzazione su cellulare, impostiamo lo script affinchè si attivi soltanto su schermi con risoluzione minore di 500px, o uguale a.
Al posto di xx mettete la classe dell'elemento, o elementi, su cui agire. Il ritardo è impostato a 4 secondi, che è il tempo normalmente sufficiente ad evitare la scansione.

Link

Se i link non hanno il tag href (capita se gestiti con javascript), bisogna aggiungerlo in questo modo: href="#".
Il testo dei link deve essere descrittivo.
Per maggiori informazioni: https://developer.chrome.com/docs/lighthouse/seo/link-text/?utm_source=lighthouse&utm_medium=lr

Segnala link non funzionante:

Se i link non hanno testo, perchè rappresentati da immagini o icone, aggiungete il tag title (es. title="Facebook").

IFrame

Anche gli iFrame devono avere il tag title e possono essere caricati con loading="lazy".
Per evitare che pesino sul caricamento della pagina, si possono inoltre caricare con un ritardo di pochi secondi (2 nello script di esempio), sostituendo src con data-src nel codice dell'iframe.
Ecco lo script:

In alternativa è possibile permettere l'attivazione manuale dell'iframe tramite un pulsante.
Ecco il codice (necessita di jQuery):

Elenchi

Attenzione che gli elenchi (ul li ecc..) non contengano elementi non supportati.

Target dei tocchi

Alcuni elementi non sono distanziati correttamente. Questo problema, di solito, riguarda solo la visualizzazione su mobile. Applicate un margine (sopra e sotto) di almeno 8 px usando le media query.

Largest Content Paint (LCP)

La metrica Largest Contentful Paint (LCP) misura il tempo di rendering (restituzione grafica) dell'immagine, o del contenitore di testo più grande, all'interno della porzione visibile dello schermo, quando la pagina inizia a caricarsi per la prima volta.
Il rendering di una pagina web è il processo con il quale il browser legge e interpreta il codice di una pagina e genera l'anteprima che gli utenti vedono.
L'immagine indicata dal programma come "Largest Content Paint" non può mai essere caricata con caricamento lento (loading="lazy"), ma deve essere sempre caricata con preload.
Per quanto riguarda il testo e altri elementi, il consiglio è di non creare un contenitore (div, p) di grandi dimensioni nella parte alta della pagina corrispondente alla zona visibile. Piuttosto, distribuite il contenuto in due contenitori più piccoli. Evitate, anche, contenitori posti uno dentro l'altro.
La cosa migliore è riempire la zona visibile con il titolo seguito da semplice testo scritto, senza alcun contenitore, oppure con un unico contenitore di dimensioni adeguate che contenga, per esempio, immagine e titolo e, sotto al contenitore, semplice testo scritto.
In quest'ultimo caso, ricordate di indicare l'altezza minima, come spiegato più sotto.

Cumulative Layout Shift (CLS)

Dedico uno spazio particolare a questo parametro di non facile interpretazione.
Google PageSpeed Insights mostra le sequenze di visualizzazione della pagina web da cellulare e da desktop e l' altezza della porzione analizzata. Gli elementi al di sotto di tale altezza e che non appaiono, quindi, nella schermata, non influiscono sul punteggio CLS.
La richiesta è che gli elementi compresi nella porzione di schermo visibile non cambino e rimangano fermi nella loro posizione (testo semplice escluso, naturalmente).
In pratica, non devono apparire, o scomparire, elementi mentre la pagina viene caricata e/o passa a schermi di differenti dimensioni e non deve cambiare la distanza di separazione tra un elemento e l'elemento sottostante.
Esistono dei tool online che mostrano dove risiedono eventuali problemi da correggere:
Il primo è stato creato dagli sviluppatori di Google.

https://webvitals.dev/cls

Segnala link non funzionante:

https://defaced.dev/tools/layout-shift-gif-generator/

Segnala link non funzionante:

Ecco alcuni suggerimenti per ottenere un buon punteggio CLS.

• Tutti i contenitori della pagina devono avere display:block; e position:relative impostati.
• Tutte le immagini devono avere width e height dichiarati (come spiegato sopra).
• Date un'altezza fissa, o un'altezza minima (es: min-height="400px"), ai contenitori che si trovano nella porzione di schermo interessata dall'analisi.
  Questo valore è ottenibile con gli strumenti di sviluppo del browser (visualizzazione flessibile).
• Nella parte alta della pagina che rientra nel CLS, evitate, se possibile, i contenitori annidati.
• Nella parte alta della pagina che rientra nel CLS, evitate di usate i paragrafi p, che vengono considerati contenitori annidati.
• Nella parte alta della pagina che rientra nel CLS, se utilizzate margin e/o padding, non modificatene i valori relativi a top e bottom con le media query.

Dimensione DOM eccessiva

Se trovate l'avviso: "evitare una dimensione DOM eccessiva", significa che avete superato il numero limite di nodi consigliato nel DOM.
Leggi anche: Leggere e comprendere il DOM

Il limite si considera superato se:

Ci sono oltre 1.500 nodi in totale nel DOM.
La profondità massima di nodo è superiore a 32 nodi (un nodo discendente è nidificato in più di 32 elementi genitori uno dentro l'altro).
Un nodo genitore ha più di 60 nodi figli.

Nota: l'uso di display:none per nascondere un elemento dall'anteprima non elimina il nodo, perchè non lo rimuove dal markup HTML, ma solo dalla vista dell'utente.

Una dimensione di DOM eccessiva non influisce direttamente sul risultato di Lighthouse, ma può influire su altre metriche e incidere sul punteggio finale.

Che cosa altro influisce sulla dimensione del DOM?

• L'uso di CMS con temi multiuso e un grande numero di plugin.
• Nodi creati dinamicamente con javascript.
• Programmi per costruire pagine web che creano molti nodi inutilmente. È sempre buona norma costruire manualmente le pagine, o controllarle per pulire l'HTML dalla "spazzatura" accumulata.
• Incollare un contenuto in un editor WYSIWYG e poi copiarlo senza controllarlo e ripulirlo, soprattutto se proviene direttamente da documenti word.
• Uso di CSS e javascript complicati.

Soluzioni

• Evitare pagine lunghe
• Evitare tag inutili
• Evitare interruzioni di riga (<br>) se non necessarie
• Evitare annidamenti
• Ridurre il numero di caricamenti via javascript, soprattutto su cellulare (vedi anche, sotto, caricamento ritardato)
• usare content visibility

content-visibility:auto

La nuova regola css "content-visibility:auto" indica al browser di saltare lo stile, il layout e il disegno di un determinato elemento finché non ce n'è bisogno. Questa proprietà di visibilità automatica dei contenuti può apportare un significativo aumento di velocità nel caso di pagine lunghe. Non vengono applicati stili e layout mentre l'elemento non è visibile all'utente. Il reding è avvenuto appena in tempo prima che l'elemento venga visualizzato. Esempio: .element {content-visibility:auto;}.

Banner cookie

Il banner per il consenso dei cookie, se posizionato nella parte alta della pagina, può influenzare negativamente il punteggio. Per eliminare il problema, potete farlo apparire con un ritardo utilizzando un'animazione.
Esempio con slideDown, il banner scenderà dall'alto dopo 4 secondi:

Il tempo di ritardo può essere aumentato, se necessario, esaminando la sequenza visualizzata in Page Speed Insights. Il banner non deve apparire in nessuna immagine.
NOTA: al posto dell'animazione slideDown, potete utilizzare un'altra animazione, oppure, potete far apparire il banner con fade.
Queste le keyframes:

Google Analytics

Anche il codice di Google Analytics può influenzare il punteggio di performance.
La soluzione è applicare un piccolo ritardo nel caricamento, in questo modo:

Google Adsense

Gli annunci di Google Adsense creano una notevole penalizzazione nel punteggio di PageSpeed Insights. Per quanto i tecnici di Google assicurino che questo non influisce sul posizionamento, ugualmente non è piacevole avere un punteggio scarso per questo motivo.
In rete, vengono proposte molte soluzioni, ma sappiamo che bisogna fare attenzione a non fare cose che violino le norme di Google. Il rischio sarebbe la sospensione dell'account.
L'unica soluzione valida che posso proporvi, al momento, è quella di utilizzare uno script per il blocco dei cookie che impedisca il caricamento degli script fino al consenso dell'utente. Questo fa sì che lo script di adsense non sia ancora stato caricato al momento della scansione e non influisca sul punteggio.
NOTA: se si usa Lighthouse di Chrome a consenso già dato, bisogna prima cancellare la cache, perchè gli script rimangono in memoria e alterano il risultato.
Puoi trovare uno script per il blocco dei cookie nella pagina Risorse varie della sezione "Risorse per i webmaster".

Includere contenuti esterni con caricamento ritardato, o escluderli

Leggi l'argomento nella guida: Come includere il contenuto di un file esterno.

Conclusione

Il punteggio ottenuto con Google PageSpeed Insights è importante. Chi sostiene che non lo sia, giudica con superficialità. Non sottovalutate l'analisi che Google fornisce del vostro sito web e ne sarete ricompensati.

Perchè il punteggio di performance cambia secondo lo strumento utilizzato?

Dipende da diversi fattori:

• Posizione del server scelto dallo strumento.
• Velocità di connessione.
• Velocità della CPU.
• Versione del browser.
• Versione dello strumento.
• Estensioni del browser.
• Timeout dell'analisi.

Qual'è lo strumento più affidabile?
Non si può dire, perchè ogni strumento ha dei vantaggi e degli svantaggi. Quello che possiamo dire è che, per ovvie ragioni, l'importante è soddisfare i parametri di Google ed avere un buon punteggio con gli strumenti che lui ci mette a disposizione: Lighthouse e Pagespeed Insights.
Da ricordare che Lighthouse è uno strumento di Chrome e, per questo motivo, la sua analisi può essere influenzata dalla versione del browser, da certe estensioni e dalla cache.

Nella sezione: "Risorse per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.