Guida SEO per migliorare la velocità della pagina e i tempi di caricamento

Velocità sito SEO - Foto di Firmbee da Pixabay

La velocità della pagina è da tempo un fattore di ranking per Google. A partire dal primo annuncio nel 2010, seguito da un ulteriore aggiornamento nel 2018 e infine dall’introduzione di Core Web Vitals nel 2020, è ormai chiaro che il tempo di caricamento del sito web è una priorità assoluta per i motori di ricerca. In questo articolo, esploreremo cosa significhi la velocità della pagina oggi, come misurarla e, soprattutto, come migliorare i punteggi di velocità della pagina per il tuo sito web.

Comprendere i Core Web Vitals di Google

Per lungo tempo, Google stessa ha faticato a misurare la velocità della pagina. Quali sono le metriche giuste? Dati di campo o dati di laboratorio? Misurare l’intera pagina o solo la parte superiore? Ci sono dozzine di metriche che entrano in gioco nella velocità della pagina ed è stata una lunga strada per capire quali di esse siano davvero importanti per l’utente.

Alla fine, Google si è concentrata su un set di tre metriche considerate le più importanti per la velocità della pagina: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS). Conosciute congiuntamente come Core Web Vitals, queste metriche sono pensate per misurare la velocità percepita piuttosto che la velocità effettiva.

Vernice con contenuto più grande (LCP)

Il Largest Contentful Paint è il tempo necessario affinché il maggiore elemento all’interno della viewport venga caricato completamente. I benchmark per questa metrica sono i seguenti:

• Buono: meno di 2,5 secondi
• Necessita di miglioramento: da 2,5 a 4 secondi
• Scarso: più di 4 secondi

Essendo comune che il maggiore elemento sia un’immagine, l’ottimizzazione delle immagini è il principale contributo a questa metrica. Inoltre, LCP dipende dai tempi di risposta del server, dal codice che blocca il rendering e dal rendering lato client.

Ritardo del primo ingresso (FID)

Il First Input Delay è il ritardo tra il momento in cui un elemento interattivo viene dipinto e il momento in cui diventa funzionale. Ad esempio, un pulsante viene dipinto sulla pagina, lo si clicca, ma non è ancora reattivo. I benchmark per questa metrica sono i seguenti:

• Buono: meno di 100 millisecondi
• Necessita di miglioramento: da 100 a 300 millisecondi
• Scarso: più di 300 millisecondi

FID può essere ottimizzato con la divisione del codice e l’utilizzo di meno JavaScript.

Spostamento cumulativo del layout (CLS)

Il Cumulative Layout Shift misura se gli elementi della pagina si spostano durante il caricamento. Ad esempio, una pagina sembra pronta per essere utilizzata, ma poi appare una nuova immagine in alto e il resto del contenuto viene spostato verso il basso: questo è uno shift di layout. I benchmark per questa metrica sono i seguenti:

• Buono: meno di 0,1
• Necessita di miglioramento: da 0,1 a 0,25
• Scarso: più di 0,25

CLS dipende da dimensioni degli elementi impostate correttamente e dal caricamento delle risorse in una sequenza specificata, dall’alto verso il basso.

Strumenti per misurare la velocità della pagina

Ci sono molti strumenti forniti da Google che offrono i Core Web Vitals come parte della loro verifica della pagina:

• Informazioni sulla velocità di pagina di Google
• Console di ricerca di Google
• Faro di Chrome
• GTmetrix

Tuttavia, alcuni di questi strumenti utilizzano dati di laboratorio invece di dati sul campo, mentre Google classifica le tue pagine esclusivamente in base ai dati sul campo. Inoltre, la maggior parte degli strumenti può valutare solo una pagina alla volta, il che non è un approccio pratico per ottimizzare l’intero sito web.

Tra gli strumenti Google, il migliore da utilizzare è probabilmente Google Search Console. Lì, è possibile andare a Esperienza > Core Web Vitals e vedere il report per tutte le tue pagine contemporaneamente. Sebbene il report di alto livello sia fornito in blocco, individuare quali pagine sono interessate da quali problemi potrebbe essere un processo noioso.

Un modo migliore per misurare la velocità della pagina potrebbe essere l’utilizzo di WebSite Auditor. Lì è possibile andare a Struttura del sito > Audit del sito e ottenere un report sulla velocità della pagina per l’intero sito web, nonché visualizzare tutte le pagine interessate, il tutto da un singolo dashboard. Oppure è possibile passare a Audit del sito > Pagine > Velocità della pagina e visualizzare un elenco di pagine con i problemi di velocità che le interessano. Cliccando su una qualsiasi pagina, si otterrà anche un elenco degli elementi della pagina che possono essere ottimizzati per migliorarne le prestazioni.

Ottimizzare la velocità della pagina

Ora che hai un elenco delle pagine interessate, è il momento di lavorare sul miglioramento della velocità della tua pagina. Di seguito sono riportate alcune delle opportunità di ottimizzazione più comuni e alcuni consigli su come sfruttarle.

Impostare le dimensioni delle immagini

Quando ometti le dimensioni delle immagini dal tuo codice, può volerci del tempo perché il browser le ridimensioni correttamente. Ciò significa che il contenuto della tua pagina salterà e influenzerà negativamente il tuo punteggio CLS.

Per evitare questo problema, imposta sempre le proprietà width e height per le tue immagini, come segue:

<img src="cuscino.jpg" width="640" Height="360" alt="cuscino viola con motivo a fiori" />

Utilizzare formati di immagine moderni

Non tutti i formati di immagine sono uguali. I nostri fidati formati JPEG e PNG hanno ora caratteristiche di compressione e qualità peggiori rispetto a AVIF, JPEG 2000, JPEG XR e WebP.

Tra i formati elencati, WebP è probabilmente quello da considerare per primo. Supporta sia la compressione senza perdita che con perdita, oltre a consentire la trasparenza e l’animazione. Inoltre, i file WebP sono generalmente dal 25% al 35% più leggeri rispetto a PNG e JPEG di qualità simile. E sebbene in passato fosse una preoccupazione comune che il formato WebP non fosse supportato da alcuni browser, di recente Safari ha aggiunto il supporto per WebP nella versione 14, quindi il supporto totale per il formato tra i browser è ora superiore al 90%.

Comprimere le immagini

Indipendentemente dall’utilizzo di formati di immagine di nuova generazione o meno, comprimere le tue immagini è ancora un modo valido per ridurre le dimensioni complessive della pagina. Anche in questo caso, se il tuo sito web è costruito su WordPress, puoi comprimere le tue immagini in blocco con plugin per l’ottimizzazione delle immagini come WP Smush. Puoi anche utilizzare compressori online se non vuoi installare troppi plugin e rischiare di rallentare il tuo sito web. Come ultima risorsa, usa gli editor di grafica per comprimere le immagini prima di caricarle sul tuo sito web.

Implementare il lazy loading per le immagini

Le immagini fuori schermo sono quelle che appaiono al di sotto del fold, il che significa che l’utente non le vedrebbe finché non scorresse oltre la schermata iniziale. E questo sarà un tema ricorrente per il resto dell’articolo: caricare tutto ciò che si trova al di sotto del fold dovrebbe essere rimandato finché gli elementi sopra il fold non sono completamente caricati. L’area sopra il fold è quella che Google utilizza per misurare la velocità della tua pagina, quindi è qui che dovrebbe essere concentrato il maggior sforzo di ottimizzazione.

La tecnica per gestire le immagini fuori schermo si chiama lazy loading. Fondamentalmente, le immagini sopra il fold vengono caricate per prime, e le immagini fuori schermo vengono caricate solo man mano che l’utente scorre verso il basso sulla pagina.

Convertire i GIF in video

Potrebbe sembrare controintuitivo, ma spesso i GIF avranno una dimensione del file maggiore rispetto ai video. Non so come si sia arrivato a questo, ma convertire un GIF di grandi dimensioni in un video comporterà una riduzione delle dimensioni fino al 500% o anche più. Quindi, se il tuo rapporto sulla velocità della pagina ti dice di utilizzare formati video per i contenuti animati, dovresti prenderlo sul serio.

Per convertire i GIF in video puoi utilizzare qualsiasi convertitore online o scaricare uno strumento come FFmpeg. Google in realtà raccomanda di creare due formati video: WebM e mp4. WebM è simile a WebP in quanto è più leggero, ma non ancora supportato da tutti i browser. Quindi, quando aggiungi il tuo video alla pagina, dovresti elencare prima la versione WebM e poi la versione mp4 come backup.

<riproduzione automatica video in loop disattivato riproduce in linea>
<source src="animazione.webm" type="video/webm">
<source src="animazione.mp4" type="video/mp4">
</video>

Nota che l’elemento video ha anche quattro attributi aggiuntivi: autoplay, loop, muted, e playsinline. Questi attributi fanno sì che il tuo video si comporti come un GIF: inizia a essere riprodotto automaticamente, viene ripetuto in loop, senza audio e viene riprodotto in linea.

Rimuovere il CSS inutilizzato

Il CSS inutilizzato può rallentare la costruzione dell’albero di rendering da parte del browser. Il fatto è che un browser deve attraversare l’intero albero DOM e controllare quali regole CSS si applicano a ogni nodo. Quindi, più CSS inutilizzato c’è, più tempo un browser impiegherà a calcolare gli stili per ogni nodo.

L’obiettivo qui è identificare i pezzi di CSS che sono inutilizzati o non critici e rimuoverli completamente o modificare l’ordine in cui vengono caricati. Consulta questa guida sul differire il CSS inutilizzato.

Minimizzare codice CSS, JS e HTML

I file JS e CSS possono spesso contenere commenti, spazi, interruzioni di riga e pezzi di codice non necessari. Rimuoverli potrebbe rendere i tuoi file fino al 50% più leggeri, anche se la media di minificazione è molto più bassa. Tuttavia, è un contributo marginale alla velocità della tua pagina e vale la pena provare.

Se hai un sito web di piccole dimensioni, puoi minificare il codice utilizzando minificatori online, come CSS Minifier, JavaScript Minifier e HTML Compressor. Oppure, se il tuo sito web è costruito su una piattaforma CMS come WordPress, ci sono sicuramente alcuni plugin che possono fare il lavoro per te. Per un sito web personalizzato, consulta questa guida sulla minificazione di CSS e questa sulla minificazione di JS.

Estrarre il CSS critico

Per impostazione predefinita, il CSS è una risorsa che blocca il rendering. La tua pagina non verrà resa finché il browser non avrà recuperato e analizzato i file CSS, il che può richiedere molto tempo.

Per risolvere questo problema, puoi estrarre solo gli stili necessari per l’area sopra il fold della tua pagina e aggiungerli all’elemento del tuo documento HTML. Il resto dei tuoi file CSS può essere caricato in modo asincrono. Questo migliorerà significativamente i tuoi punteggi LCP e renderà le tue pagine più veloci per gli utenti.

Ottimizzare la risposta del server

La cosa più sgradevole sui ritardi di risposta del server è che esiste una vasta selezione di motivi che possono causarli. Ad esempio, possono essere routing lento, logica applicativa lenta, esaurimento delle risorse CPU, query del database lente, esaurimento della memoria, framework lenti, ecc.

Una soluzione non tecnica facile a questi problemi è passare a un hosting migliore, il che in molti casi significa da uno hosting condiviso a uno gestito. L’hosting gestito di solito include reti CDN e altri trucchi per la distribuzione dei contenuti che avranno un impatto positivo sulla velocità della pagina. Ma se vuoi sporcarti le mani, ecco una guida più dettagliata sulla risoluzione di un server sovraccarico.

Per chi cerca un miglioramento rapido senza tuffarsi nei dettagli tecnici, il passaggio a un provider di hosting di alta qualità può fare una differenza significativa. SiteGround, ad esempio, offre un hosting veloce e sicuro studiato per siti web e aziende di piccole e medie dimensioni. I loro servizi includono una CDN gratuita, una cache avanzata e un’implementazione ottimizzata di PHP, tutti elementi che contribuiscono a tempi di caricamento più veloci e a un sito più reattivo nel complesso.

Gestire in modo efficiente le risorse di terze parti

Le risorse di terze parti, come i pulsanti di condivisione sui social e gli embed dei lettori video, tendono a consumare molte risorse. Inoltre, ogni volta che il browser incontra un pezzo di JS, interromperà l’esecuzione dell’HTML finché non lo avrà gestito. Tutto ciò tende a contribuire a un calo misurabile della velocità della pagina.

Se una delle tue risorse di terze parti non è essenziale, cioè non conta per l’aspetto o la funzione della parte sopra il fold, dovresti rimuoverla dal percorso di rendering critico. Per caricare le risorse di terze parti in modo più efficiente, puoi utilizzare l’attributo async o defer. L’attributo async è più morbido: consente di scaricare HTML e JS contemporaneamente, ma interromperà comunque l’HTML per eseguire JS. L’attributo defer è più rigido: non interromperà l’HTML per eseguire JS, che verrà eseguito solo alla fine.

Utilizzare il pre-connect per le connessioni

Stabilire le connessioni, specialmente quelle sicure, richiede molto tempo. Il fatto è che richiede ricerche DNS, handshake SSL, scambio di chiavi segrete e alcuni Inoltre, utilizzare il pre-connect per le connessioni può aiutare a risparmiare tempo prezioso. Stabilire le connessioni, specialmente quelle sicure, richiede molto tempo. Il fatto è che richiede ricerche DNS, handshake SSL, scambio di chiavi segrete e alcuni round-trip al server finale responsabile della richiesta dell’utente. Quindi, per risparmiare questo prezioso tempo, è possibile pre-connettere il tuo sito web alle origini richieste in anticipo.

Per pre-connettere il tuo sito web a una fonte di terze parti, devi semplicemente aggiungere un tag link alla tua pagina.

<link rel="preconnect" href="https://esempio.com">

Identificare e ottimizzare i compiti JavaScript a lungo termine

Ogni volta che c’è un blocco di JavaScript che richiede più di 50 ms per essere eseguito, la tua pagina potrebbe apparire non reattiva all’utente. Per risolvere questo problema, è consigliabile individuare questi compiti lunghi, suddividerli in segmenti più piccoli e farli caricare in modo asincrono. In questo modo ci saranno brevi finestre di reattività incorporate nel processo di caricamento della tua pagina. Puoi utilizzare Chrome DevTools per identificare i compiti eccessivamente lunghi – sono quelli contrassegnati con bandiere rosse:

Una volta identificati i compiti lunghi sulle tue pagine, puoi suddividerli in compiti più piccoli, ritardarne l’esecuzione o addirittura spostarli dal thread principale tramite un web worker.

Precaricamento delle risorse critiche

Sta ai browser decidere quali risorse caricare per prime. Pertanto, spesso cercano di caricare le risorse più importanti come CSS prima di script e immagini, ad esempio. Sfortunatamente, questo non è sempre il modo migliore per procedere. Precaricando le risorse, puoi cambiare la priorità di caricamento dei contenuti nei browser moderni, informandoli di quali risorse saranno necessarie come parte del codice responsabile del rendering del contenuto sopra il fold.

Con l’aiuto del tag puoi informare il browser che una risorsa è necessaria come parte del codice responsabile del rendering del contenuto sopra il fold, e farlo recuperare il prima possibile. Ecco un esempio di come può essere utilizzato il tag.

<link rel="preload" as="script" href="script.js" />
<link rel="preload" as="style" href="style.css" />
<link rel="preload" as="image" href="img.png" />
<link rel="preload" as="video" href="vid.webm" type="video/webm" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

Si noti che la risorsa verrà caricata con la stessa priorità. La differenza è che il download inizierà prima in quanto il browser sa del precaricamento in anticipo. Per istruzioni più dettagliate, consulta questa guida sul precaricamento delle risorse critiche.

Implementare la cache del browser

Senza la cache del browser, ogni volta che visiti la stessa pagina l’intera pagina viene caricata da zero. Con la cache del browser, alcuni elementi della pagina vengono memorizzati nella memoria del browser, quindi solo una parte della pagina deve essere caricata dal server. Naturalmente, la pagina si carica molto più velocemente durante le visite successive e i tuoi punteggi di velocità della pagina aumentano.

Normalmente, l’obiettivo è memorizzare nella cache il maggior numero possibile di risorse della pagina per il più a lungo possibile e assicurarsi che le risorse aggiornate vengano rivalidate per la memorizzazione nella cache. In realtà, puoi controllare tutti questi parametri con speciali intestazioni HTTP che contengono istruzioni per la cache. Un buon punto di partenza per imparare sulla cache HTTP è questa guida di Google.

Ottimizzare la struttura del DOM

Un albero DOM troppo grande con regole di stile complicate può influenzare negativamente la velocità, il runtime e le prestazioni di memoria. La migliore pratica è avere un albero DOM con meno di 1500 nodi in totale, una profondità massima di 32 nodi e nessun nodo padre con più di 60 nodi figlio.

Una pratica molto buona è rimuovere i nodi DOM di cui non hai più bisogno. A tal fine, considera di rimuovere i nodi che attualmente non vengono visualizzati dal documento caricato e cerca di crearli solo dopo che un utente scorrerà verso il basso una pagina o premerà un pulsante.

Eliminare i reindirizzamenti inutili

Liberarsi di tutti i reindirizzamenti inutili è una delle migliori cose che puoi fare per la velocità del tuo sito. Ogni reindirizzamento aggiuntivo rallenta il rendering della pagina e aggiunge uno o più round-trip di richiesta-risposta HTTP.

La migliore pratica è non utilizzare affatto i reindirizzamenti. Tuttavia, se ne hai disperatamente bisogno, è fondamentale scegliere il tipo di reindirizzamento giusto. È meglio utilizzare un reindirizzamento 301 per il reindirizzamento permanente. Ma se, per esempio, vuoi reindirizzare gli utenti a pagine promozionali a breve termine o URL specifici per dispositivo, i reindirizzamenti temporanei 302 sono l’opzione migliore.

Questi problemi elencati non sono tutti i problemi che possono influenzare la velocità della pagina, ma piuttosto i più comuni e quelli con il maggior potenziale di miglioramento. Assicurati di adattare le tue strategie di ottimizzazione ai problemi riflessi nel tuo rapporto sulla velocità della pagina. Tieni presente che i problemi presenti in molte delle pagine del tuo sito web possono spesso essere risolti in blocco implementando modifiche a livello di sito.