Velocità e performance di un sito web
Visita anche
Risorse per i webmaster
archivio di risorse per la creazione dei siti web
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:
..velocità delle pagine
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/
Cosa fare?
Prima di tutto, controlla la velocità e la performance delle tue pagine con lo strumento ufficiale di Google (vedi guida sotto):
Google PageSpeed Insights
ATTENZIONE: 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.
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"
NOTA BENE: questo strumento di Google mantiene una memoria storica dei risultati rilevati alla scansione di una pagina web.
Potrebbe accadere che, malgrado abbiate effettuato le correzioni indicate e malgrado il punteggio ottenuto sia tutto "in verde", la dichiarazione di risultato in alto sia ancora "Valutazione Core Web Vitals: non superata".
Questa dichiarazione errata verrà corretta con il tempo. La valutazione corretta è sempre quella data dai singoli punteggi numerici aggiornati in tempo reale.
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
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.
I Core Web Vitals danno priorit' alla visualizzazione mobile e bisogna tenerne conto nella costruzione delle pagine web.
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.
NOTA BENE: Se usate Lighthouse, strumento del browser Chrome, è importante che il blocco dei cookie sia attivo affinchè risulti bloccato il caricamento degli script di terze parti (es. Adsense) che potrebbero influire pesantemente sul risultato.
Ricordate, quindi, di cancellare il cookie di consenso, se archiviato, prima di eseguire il test.
Con PageSpeed Insights questo non accade, essendo un tool online con cache temporanea.
Tuttavia, bisogna tenere conto del fatto che Google PageSpeed Insights mantiene una memoria storica dei risultati e questo potrebbe causare discrepanze tra la dichiarazione di prima visualizzazione e i risultati reali.
Leggi qui sotto per maggiori indicazioni.
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:
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.
In caso di prima scansione o di precedente risultato negativo, potrebbe mostrare momentaneamente 'avviso "Valutazione Core Web Vitals: non superata".
Questo non deve preoccupare, il risultato reale è quello dato dai singoli punteggi sottostanti.
Valutazione Core Web Vitals: non superata
NOTA BENE: Google PageSpeed Insights mantiene una memoria storica dei risultati rilevati alla scansione di una pagina web.
Potrebbe accadere che, malgrado abbiate effettuato le correzioni indicate e malgrado il punteggio ottenuto sia tutto "in verde", la dichiarazione di risultato che appare in alto rimanga "
Valutazione Core Web Vitals: non superata".
Questa errata dichiarazione dovrebbe correggersi con il tempo, ma può anche essere che non venga aggiornata per mesi e mesi, oppure mai.
Purtroppo, è cosa segnalata da molte persone e per ora non risolta da Google.
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:
Apri codice
<link rel="preload" as="style" href="/styles/style.css">
<link rel="preload" as="image" href="/img/image.avif">
<link rel="preload" as="script" href="/js/jquery.js">
<link rel="preload" as="script" href="/js/cookie.js">
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:
Apri codice
<img src="img/image.jpg" width="" height="" alt="descrizione" loading="lazy" decoding="async">
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.
Il peso di una immagine non deve superare i 400 KB (= 0,4 MB).
Le dimensioni delle immagini devono essere adeguate, non troppo grandi, ma nemmeno troppo piccole.
Indicativamente, immagini tra i 600 e i 400 px di larghezza vanno bene per tutti gli schermi.
In caso vi sia la necessità di inserire immagini più 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:
Apri codice
<picture>
<source media="(max-width:500px)" width="500" height="208" srcset="image-small.jpg">
<source media="(min-width:501px)" width="1920" height="800" srcset="img/image-large.jpg">
<img src="img/image-small.jpg" width="500" height="208" alt="description">
</picture>
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:
Apri codice
<picture>
<source srcset="img/limage.avif" type="image/avif">
<img src="img/image.jpg" alt="descrizione" width="" height="" loading="lazy" decoding="async">
</picture>
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/
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:
Apri codice
<picture>
<source
srcset="img/image-large.avif"
media="(min-width:501px)" type="image/avif"
width="800" height="400">
<source
srcset="img/image-large.jpg"
media="(min-width:501px)" type="image/jpeg"
width="800" height="400">
<source
srcset="img/image-small.avif"
type="image/avif"
width="500" height="250">
<img
src="img/image-small.jpg"
width="500" height="250" alt="description" >
</picture>
Come sopra, si possono aggiungere regole intermedie se necessario.
Immagini a tutto schermo (full screen):
Di norma, le immagini a tutto schermo si impostano come background.
Il problema è mantenere l'aspect ratio dell'immagine su ogni dimensione di schermo, rispettando, quindi, la grafica del layout.
La soluzione sta nell'applicare la regola aspect-ratio al div contenitore dell'immagine.
Esempio:
Apri codice
<style>
.container {
background-image: url(img.jpg);
aspect-ratio: 83/38;
background-size:cover;
background-position: center;
margin: 40px auto;
}
</style>
<div class="container"></div>
L'aspect ratio di una immagine può essere facilmente calcolato utilizzando dei tool online come questo:
https://aspect-ratio.dev/
Leggi sotto come applicare i nuovi formati alle immagini di background.
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:
Apri codice
<style>
.element {
background-image: url("images/img-bg.jpg"); /*fallback*/
background-image: -webkit-image-set(
url("images/img-bg.avif"),
url("images/img-bg.jpg")
);
background-image: image-set(
"images/img-bg.avif" type("image/avif"),
"images/img-bg.jpg" type("image/jpeg")
);
}
</style>
<div class="element"></div>
NOTA BENE: Questo metodo non è ancora standard, quindi, se le regole sono implementate online nel codice html, il
validatore W3C lo segnala, al momento, come errore perchè non valido.
Esempio funzionante
Per maggiori informazioni:
https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set
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.
Immagini a bassa risoluzione
Se pubblicate immagini di piccole dimensioni, questo potrebbe causare una segnalazione di errore e una penalizzazione.
Google PageSpeed Insights segnalerà che pubblicate immagini a bassa risoluzione mostrando sia le dimensioni reali dell'immagine che le dimensioni previste.
Cosa fare?
Il consiglio è di caricare l' immagine con le dimensioni consigliate da Google e impostare una larghezza e/o altezza massima utilizzando le regole di stile.
Es: max-width: 200px
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; (leggi:
Il foglio di stile).
La dimensione del testo deve essere di almeno 12px e la spaziatura verticale di almeno 8px.
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
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:
Apri codice
<script>
if($(window).width() <= 500){
$('.xx').hide().delay(4000).fadeIn('fast');
}
</script>
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 ≤ 500px.
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
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:
Apri codice
<script>
function init() {
setTimeout(function(){
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} }
}, 2000);
}
window.onload = init;
</script>
In alternativa è possibile permettere l'attivazione manuale dell'iframe tramite un pulsante.
Ecco il codice (necessita di jQuery):
Apri codice
<iframe id="show" data-src=""></iframe>
<br>
<button id="activateIframe" onclick="iframe()">Attiva iframe</button>
<script>
function iframe () {
document.getElementById('activateIframe').setAttribute('style', 'display:none')
var iframe = $("#show");
iframe.attr("src", iframe.data("src"));
}
</script>
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.
Se l'elemento di prima visualizzazione non viene caricato in tempo, i visitatori potrebbero non vedere nulla finchè la pagina web non viene completamente caricata.
LCP può essere costituito da:
- Immagini (img). Dato che LCP considera un intero elemento come candidato principale, se le immagini si trovano nello stesso contenitore, il loro insieme verrà considerato come LCP.
Se, invece, una singola immagine appare per prima nella zona visibile (viewport) è questa da sola ad essere considerata, generalmente, LCP.
- Immagini di background (background-image) se racchiuse nel viewport.
- Immagine poster, se presente, di un video, oppure il primo fotogramma se il video è in autoplay (in generale, è meglio evitare i video nell'area LCP).
- Intestazioni (h1, h2, h3, ecc..).
- Testo se racchiuso in elementi di blocco (p, div, ecc..).
- Elenchi (ul, ol, ecc.).
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 di prima visualizzazione.
Meglio distribuire il contenuto in due contenitori più piccoli.
Evitate, anche, contenitori annidati uno dentro l'altro.
La cosa migliore è iniziare la pagina con il titolo seguito da semplice testo scritto, senza alcun contenitore, oppure con un unico contenitore di dimensioni adeguate che contenga, per esempio, immagine, titolo e sottotitolo o breve descrizione.
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
https://defaced.dev/tools/layout-shift-gif-generator/
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.
Altezza minima
Per i contenitori che si trovano nella zona di prima visualizzazione può essere necessario indicare l'altezza minima rilevabile a partire da una larghezza dello schermo indicativa di 320 px.
In pratica, utilizzando gli strumenti di sviluppo del browser e la visualizzazione flessibile, bisogna allargare gradualmente la schermata e rilevare il punto in cui l'altezza del contenitore in causa si trova al valore minimo.
Ottenuto tale valore, lo si aggiunge alle regole di stile (es: min-height: 370px).
In caso di contenitori annidati nel contenitore di prima visualizzazione, anche per ognuno di essi va indicata l'altezza minima, come pure in caso di intestazioni (heading).
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:
Apri codice
.banner {
-webkit-animation-name: slideDown;
animation-name: slideDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
@keyframes slideDown {
0% {
transform: translateY(-100%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
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:
Apri codice
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
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:
Apri codice
<script>
setTimeout(function(){
var myAnalytics = document.createElement('script');
myAnalytics.setAttribute('src','https://www.googletagmanager.com/gtag/js?id=G-ZR7PZBPEX9');
document.head.appendChild(myAnalytics);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZR7PZBPEX9', { 'anonymize_ip': true });
},4000);
</script>
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.
Infine,
considerate bene questo: molti strumenti vengono creati da sviluppatori interessati più al guadagno che a fornire un risultato corretto.
Vale a dire che sono studiati appositamente per allarmare gli utenti mostrando errori inesistenti al solo scopo di acquisire clienti offrendo consulenza a pagamento.
Questo è facilmente verificabile confrontando i risultati di tali strumenti con quelli offerti dall'analisi totalmente gratuita di Google.
Nella sezione: "Risorse per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.
Aiuta il sito! Condividi questa pagina su: