Approfondimento su PageSpeed Insights (Guida Completa e Consigli per Ottenere 100)

Su Internet, non c’è limite di velocità – ma fortunatamente, c’è un tachimetro.

La velocità e le prestazioni del tuo sito web hanno un impatto significativo sul business. Possono migliorare il tuo posizionamento nei motori di ricerca e il SEO, aumentare l’interazione sul sito web e incrementare le conversioni – e i ricavi.

Ma prima di poter ottimizzare la velocità del tuo sito web, devi sapere come si comporta.

È qui che entra in gioco PageSpeed Insights.

Questo strumento gratuito di Google ti aiuta a comprendere le prestazioni del tuo sito web, ma può essere complicato da utilizzare inizialmente.

Alla fine, cosa significano tutti questi termini e punteggi diversi? Come dovresti sapere cosa fare o da dove iniziare?

Questa guida è incentrata su cosa fare con i risultati del tuo rapporto PageSpeed Insights e su come lavorare strategicamente attraverso soluzioni specifiche per migliorare ciascuno dei tuoi punteggi, indipendentemente dai problemi che devono essere affrontati!

Oggi, ti guideremo attraverso ciascuno dei fattori chiave e mostreremo strategie per migliorare le tue prestazioni con ognuno di essi.

Cos’è Google PageSpeed Insights?

PageSpeed Insights è uno strumento che testa, misura e riporta le prestazioni del tuo sito web. Cattura dati essenziali su come gli utenti sperimentano e interagiscono con il tuo sito analizzando elementi come la velocità del sito, il tempo di caricamento e l’esperienza utente.

Oltre a valutare il tuo sito web su una serie di metriche chiave di prestazione, PageSpeed Insights esegue una gamma di diagnostica e raccomanda anche specifiche azioni da intraprendere per aiutarti a migliorare le prestazioni del tuo sito web.

PageSpeed Insights è alimentato dal motore di analisi open-source di Google, Lighthouse.

Quello che rende PageSpeed Insights particolarmente importante per i webmaster e i marketer è che le prestazioni del sito sono strettamente collegate all’esperienza utente (UX), SEO, traffico, conversioni e tutti gli altri KPI che contano di più per l’azienda.

Ottenere il 100% su PageSpeed Insights è un po’ come ottenere il massimo dei punti al tuo SAT.

Non significa necessariamente che andrai benissimo all’università, ma ti dà sicuramente un vantaggio.

Velocità Della Pagina E SEO

Rispondiamo prima alla domanda principale.

Sì, la velocità e le prestazioni del tuo sito web possono influenzare l’ottimizzazione per i motori di ricerca (SEO).

In particolare, le prestazioni scarse possono nuocere al tuo SEO. È utile pensare ai tuoi PageSpeed Insights come a un “regolatore” per il tuo sito web. Se i tuoi punteggi sono bassi, significa che il sito web è lento, il che rallenta anche la tua crescita nei SERP (Search Engine Results Page)!

Google ha dichiarato pubblicamente che utilizza i segnali di velocità del sito web, che chiama “esperienza della pagina”, come fattore di ranking SEO.

Ci sono tre fattori centrali inclusi nell’algoritmo di ricerca che Google definisce Core Web Vitals:

1. Caricamento – Largest Contentful Paint (LCP)
2. Interattività – First Input Delay (FID)
3. Stabilità Visiva – Cumulative Layout Shift (CLS)

Tutti questi fattori misurano la rapidità con cui il tuo sito web si carica e la velocità e la qualità dell’esperienza utente, che possono anche influenzare l’accessibilità.

Questi tre fattori fanno parte dei sei parametri totali misurati da PageSpeed Insights.

Come Funziona PageSpeed Insights

Ora che abbiamo capito il chi, cosa, dove e perché… tutto ciò che resta è il come.

Come funziona PageSpeedInsights e come utilizzi le informazioni che fornisce?

Prima di tutto, una breve spiegazione su come funziona lo strumento dietro le quinte, direttamente da Google:

“PageSpeed Insights fornisce sia dati di laboratorio che dati sul campo relativi a una pagina. I dati di laboratorio sono utili per il debug dei problemi, poiché vengono raccolti in un ambiente controllato. Tuttavia, potrebbero non catturare i colli di bottiglia del mondo reale. I dati sul campo sono utili per catturare la vera esperienza utente nel mondo reale – ma dispongono di un insieme più limitato di metriche.”

In altre parole, PageSpeed Insights considera due aspetti.

Innanzitutto, i computer di Google caricano il tuo sito web per vedere come funziona.

In secondo luogo, poiché i computer di Google non sono gli stessi di un laptop che potresti usare a casa o al lavoro, esaminano un registro di dati storici degli utenti reali che hanno visitato il tuo sito negli ultimi 28 giorni. (Questi dati provengono dal Chrome User Experience Report, spesso chiamato “CrUX”, e sono raccolti dagli utenti che utilizzano il browser Chrome.)

Poi, PageSpeed Insights combina questi due test e valuta il tuo sito web in base a come potrebbero esperirlo gli utenti reali.

Il punteggio PageSpeed Insights è una raccolta di metriche sulle prestazioni del tuo sito che evidenzia quali aree sono buone e quali potrebbero necessitare di miglioramenti.

Ci sono 6 punteggi da conoscere:

1. Primo Dipinto Significativo (FCP)
2. Ritardo Primo Inserimento (FID)
3. Dipinto Più Grande Significativo (LCP)
4. Spostamento Cumulativo del Layout (CLS)
5. Interazione al Prossimo Dipinto (INP)
6. Tempo al Primo Byte (TTFB)

Ognuno di questi indicatori viene misurato e poi valutato secondo il livello di prestazione.

Quando esegui un rapporto PageSpeed Insights per il tuo sito, riceverai un punteggio e un “voto” per ciascuno di questi, che rientrerà in una delle tre categorie:

1. Buono
2. Richiede Miglioramenti
3. Scadente

Questi voti sono determinati da intervalli predefiniti che Google stabilisce:

Come Utilizzare Questa Guida per Migliorare il Tuo Punteggio PageSpeed Insights

Comprendere PageSpeed Insights è la prima parte della battaglia.

In seguito, dobbiamo capire come tradurre tutti i punteggi, i numeri e i suggerimenti in un piano d’azione per il miglioramento.

Ecco come utilizzare questa guida:

• Esegui il report di PageSpeed Insights del tuo sito web.
• Cerca i test CWV falliti o le metriche nella parte “Scarsa” della scala.
• Trova la sezione sottostante che si riferisce a quelle specifiche metriche.
• Segui i passaggi (presentati in ordine dall’impatto maggiore al minore).
• Riesegui il report di PageSpeed Insights.
• Se necessario, ripeti il processo per qualsiasi metrica ancora contrassegnata come “Scarsa”.
• Passa alle metriche contrassegnate come “Da Migliorare”.
• Ripeti dall’inizio.

#1 – Primo Rendering del Contenuto (FCP)

Immergiamoci nella prima metrica dell’elenco di Google.

È il First Contentful Paint, o FCP, e misura quanto velocemente l’utente può vedere il tuo sito web mentre viene caricato.

Cos’è il First Contentful Paint?

First Contentful Paint (FCP) è il tempo necessario per caricare il primo oggetto nel browser dell’utente. Questo è diverso dalla velocità di caricamento della pagina o dal tempo di caricamento perché non è il tempo necessario per il rendering completo della pagina — è solo il primo pezzo della pagina a comparire sullo schermo.

Questo è importante dal punto di vista dell’utente perché può vedere il progresso mentre la pagina inizia ad apparire.

Significa anche che le strategie per accelerare il FCP sono uniche rispetto a quelle per velocizzare il caricamento dell’intera pagina.

FCP è misurato in secondi.

• Buono: < 1,8 secondi
• Da migliorare: 1,8 – 3 secondi
• Scadente: > 3 secondi

Tecniche per Migliorare l’FCP

Immagina di aver ottenuto un punteggio di 2,2s sul tuo punteggio FCP. Speri di ridurlo a 1,8s.

Quali strumenti hai a disposizione?

Minimizzare Le Risorse Che Bloccano Il Rendering

Ricorda, il First Contentful Paint non riguarda solo il tempo che impiega l’intera pagina a caricarsi. Si tratta di far apparire i primi pixel sullo schermo il più velocemente possibile.

Una strategia fondamentale è semplicemente cambiare l’ordine dei contenuti nella tua pagina.

Lascia che il browser visualizzi il testo, le immagini e gli stili più importanti prima di iniziare a caricare script pesanti, animazioni sofisticate e contenuti che si trovano “sotto la piega”.

La prima cosa che dovresti fare: Elimina tutti gli stili o gli script inutilizzati dalla tua pagina.

Se stai caricando JavaScript o CSS nella pagina (solitamente nella sezione Head del sito), questo rallenterà il FCP. Se non li stai utilizzando, allora stai solo rallentando inutilmente.

In WordPress, puoi solitamente ottenere questo risultato disabilitando i plugin inutilizzati, che possono caricare codice sulla pagina anche se il plugin non viene utilizzato o visualizzato.

Se guardi i risultati nel tuo rapporto PageSpeed Insights, verrà evidenziato il codice che è caricato nella pagina ma non utilizzato:

Questo dovrebbe indicarti quali codici o plugin potresti rimuovere in sicurezza.

(Nota: Solo perché il codice non è utilizzato in una pagina non significa che non sia presente in altre pagine del tuo sito! Fai attenzione prima di iniziare a tagliare e modificare le cose dalle tue pagine.)

Prossimo: Rimanda o carica gli script in modo asincrono.

Se hai bisogno di script o di stili nella tua pagina, ma non sono immediatamente essenziali per il primo contenuto che l’utente vede, allora puoi fare ciò che si chiama posticipare o caricarli in modo asincrono. Questo indica al browser di attendere per caricarli invece di caricarli nell’ordine in cui appaiono sulla pagina.

È abbastanza semplice: puoi aggiungere un po’ di codice extra al tuo sito web che istruirà il browser a posticipare o caricare in modo asincrono (o entrambi):

<script src="app.js" async></script>

(Nota per Nerd: Async e defer non sono tecnicamente la stessa cosa. Tuttavia, per la maggior parte di noi, la differenza è principalmente semantica. Tuttavia, sentiti libero di scendere nella tana del coniglio e scoprire di più sulle sfumature sottili.)

Se desideri un modo più semplice per gestire questo passaggio, prendi in considerazione l’utilizzo del Plugin JetPack Boost per WordPress.

JetPack è una suite di plugin gratuita che ti offre tutti i tipi di strumenti per ottimizzare la velocità e le prestazioni del tuo sito web. In particolare, puoi scegliere di posticipare il caricamento di JavaScript non essenziali con un semplice clic.

All’interno di WordPress, vai su Plugins > Aggiungi Nuovo.

Poi, cerca Boost. Clicca su “Installa” e “Attiva”.

Dovresti vedere un nuovo menu nella tua navigazione a sinistra chiamato “JetPack”.

Vai a JetPack > Boost.

Il plugin renderizzerà il tuo sito in background e mostrerà il tuo punteggio, oltre a opzioni per il miglioramento. Per posticipare JS non essenziale, clicca semplicemente l’interruttore per attivarlo.

Finalmente: Ristruttura CSS (stile).

Se conosci il CSS, saprai che è comune inserire tutti i tuoi stili in un grande blocco di codice e caricarli tutti in un file standard come style.css.

Non è sbagliato. È solo poco performante.

Per migliorare FCP, puoi ottimizzare la struttura del tuo CSS:

1. Rimuovi tutti gli stili che si applicano ai contenuti che fanno parte del FCP (qualsiasi cosa “sopra la piega”.)
2. Aggiungi questi stili come un blocco di stile inline nell’intestazione del tuo sito web.
3. Carica gli stili rimanenti in modo asincrono con una funzione di “preload” (mostrata di seguito.)

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Alternativamente, se hai molti stili separati per diversi dispositivi e browser, potresti voler dividere il tuo foglio di stile in più file e utilizzare una media query @import per caricare solo gli stili appropriati.

Ottimizzazione di Immagini e Video

Poiché FCP riguarda principalmente l’ottimizzazione dei primi centimetri nella parte superiore della pagina, non entreremo troppo nel dettaglio sull’ottimizzazione di immagini e video qui.

Ma se il tuo header contiene molte immagini o hai un video in cima alla pagina, potrebbe valere la pena indagare su come ottimizzare questi asset per migliorare la velocità di caricamento iniziale. Vedi sotto per ulteriori dettagli su come procedere con l’ottimizzazione.

Utilizzo di una Rete di Distribuzione dei Contenuti (CDN)

Come sopra. I CDN possono aiutare a caricare l’intera pagina più velocemente, il che fornisce un piccolo incremento al FCP. Vedi sotto per maggiori dettagli sull’uso di un CDN.

#2 – Ritardo Primo Input (FID), Tempo Totale di Blocco (TBT) e Tempo al Interattività (TTI)

Ora parliamo dei compromessi.

Se ti sei concentrato solo su First Contentful Paint, potresti pensare che tutto ciò che devi fare per migliorare notevolmente il tuo punteggio su PageSpeed Insights sia posticipare e caricare tutte le tue risorse più tardi per far caricare velocemente la parte superiore del tuo sito web.

Ma se il sito web sembra caricarsi velocemente, ma non posso effettivamente interagire con esso, allora questa è anche un’esperienza utente negativa.

Inserisci: Primo Ritardo di Input.

Il ritardo del primo input è anche correlato al Tempo Totale di Blocco (TBT) e al Tempo fino all’Interattività (TTI).

Scopriamo ciascuno di questi e come sono correlati ma diversi.

Cos’è Il Ritardo Del Primo Inserimento?

Il First Input Delay (FID) è il tempo necessario affinché il browser risponda al primo input o interazione dell’utente (ad esempio, cliccando su un link o un pulsante). La performance del tuo sito web influisce sul ritardo perché la maggior parte delle interazioni non può essere elaborata mentre il browser sta caricando o rendendo il codice.

In altre parole, se il tuo codice impiega molto tempo per completare il caricamento, impedirà all’utente di interagire con il sito web, e ci sarà un ritardo o un tempo di attesa tra il momento in cui cliccano e il momento in cui l’azione si verifica.

Questa metrica è misurata in millisecondi e basata sui dati degli utenti reali.

• Buono: < 100ms
• Richiede miglioramenti: 100 – 300ms
• Scarso: > 300ms

Che cos’è il Time to Interactive (TTI)?

Time to Interactive è il tempo necessario affinché la pagina diventi “affidabilmente interattiva”.

Google definisce “affidabilmente interattivo” come il momento in cui il thread principale del browser è libero per almeno 5 secondi, rendendo la pagina completamente interattiva per l’utente.

Questa è una metrica misurata da Lighthouse di Google, quindi non si basa su dati reali degli utenti. Invece, viene misurata secondo criteri specifici e controllati.

Cos’è il Tempo Totale di Blocco (TBT)?

Il Tempo Totale di Blocco misura l’intero periodo di tempo tra FCP e TTI.

In altre parole, il conteggio non inizia fino a quando la parte superiore della pagina viene visualizzata, e poi si ferma dopo che la pagina è considerata “affidabilmente interattiva” o 5 secondi dopo che il thread principale è libero.

Ritardo Primo Inserimento vs Tempo per l’Interattività vs Tempo Totale di Blocco

Queste tre metriche sono correlate ma non identiche.

Il First Input Delay si basa su dati reali degli utenti e sui Core Web Vitals. TTI e TBT sono misurati dal rapporto di prestazione in PageSpeed Insights, supportato dal Lighthouse di Google.

Per quanto riguarda il miglioramento delle prestazioni di queste tre metriche, le soluzioni sono simili ma non identiche. In particolare, le soluzioni per migliorare il FID che comportano il posticipo del rendering di JavaScript non miglioreranno TTI o TBT perché il JavaScript deve comunque essere caricato.

Ma soluzioni come rimuovere, ridurre e mettere in cache dovrebbero aiutare a migliorare tutte e tre le metriche.

Tecniche per Migliorare FID, TTI e TBT

Di gran lunga, l’impatto più significativo sul FID è il JavaScript caricato sulla tua pagina.

Puoi pensare a JavaScript come a un binario separato per il browser. Mentre sta rendendo o eseguendo codice JavaScript, non può completare altri compiti o rispondere a input come un utente che fa clic su un link (il “thread principale” deve essere libero affinché il browser possa rispondere).

Allora, più tempo impiega a leggere ed eseguire il JavaScript quando la pagina viene caricata per la prima volta, più lungo sarà il ritardo se l’utente inizia a interagire con la pagina.

Riduci L’Impatto Del Codice Di Terze Parti

Un sospetto comune per la lentezza nella risposta agli input è che il sito web stia ancora caricando tutti i tipi di strumenti, widget e app di terze parti.

Ogni volta che aggiungi cose come Facebook, Drift, Intercom, HotJar o altri strumenti e servizi di terze parti al tuo sito web, viene aggiunto un po’ di codice che dovrà essere caricato e visualizzato sulla pagina.

Se hai molti di questi servizi, può richiedere molto tempo per caricarli tutti.

Peggio ancora, non hai alcun controllo sulla velocità di caricamento di queste risorse sul tuo sito. Quindi, se il browser sta cercando di recuperare del JavaScript da un sito web di terze parti su un server lento, potrebbe causare notevoli ritardi.

Risolviamolo.

Opzione #1: Elimina tutti gli strumenti di terze parti non utilizzati.

Probabilmente hai installato nel corso degli anni vari servizi, plugin e strumenti sul tuo sito web. E probabilmente ne utilizzi solo alcuni di essi.

È il momento di eliminare o disinstallare quelli che non stai utilizzando attivamente.

Per ottenere un elenco completo dei JavaScript di terze parti che si caricano sulla tua pagina, consulta il tuo rapporto PageSpeed Insights o esegui un rapporto Lighthouse separato.

Dovresti vedere un elenco di tutti gli script caricati e il tempo che impiegano:

Ora, utilizzando queste informazioni, puoi decidere quali sono critici e quali possono essere rimossi senza problemi.

A seconda dei servizi che desideri eliminare, potresti dover rimuovere manualmente il codice dal tuo sito web, disinstallare un plugin di WordPress o eliminare il codice aggiunto tramite Google Tag Manager per migliorare le prestazioni della pagina.

Opzione #2: Carica JavaScript in modo asincrono.

A meno che non sia essenziale per il rendering del FCP, è quasi sempre consigliabile eseguire il rendering degli script di terze parti in modo asincrono. Se hai del JavaScript essenziale che sta rallentando il FID ma non puoi rimuoverlo, allora prova a farlo caricare in modo asincrono.

Ridurre Il Tempo Di Esecuzione Di JavaScript

Il codice di terze parti può essere un furfante, ma che dire del nostro stesso codice che abbiamo inserito nel nostro sito web?

Probabilmente non è innocente nel lento tempo di caricamento.

Se hai del JavaScript non essenziale che hai aggiunto al tuo sito web, potresti volerlo rimuovere.

Guardando il rapporto di PageSpeed Insights, dovresti vedere una sezione che fa riferimento a JavaScript non utilizzato:

• Se il JavaScript è inutilizzato al 100%, prendi in considerazione l’eliminazione
• Se il JavaScript è utilizzato in altre pagine, prendi in considerazione la possibilità di inviarlo selettivamente solo nelle pagine dove è necessario (noto anche come “code splitting“)

Puoi anche esplorare opzioni per migliorare il tempo di caricamento del JavaScript.

Il modo più comune per accelerare il tempo di caricamento è ridurre la dimensione dei file. E con JavaScript, ci sono due strategie principali:

• Minimizzazione – Rimozione di tutti gli spazi, interruzioni di linea, ecc. nel codice
• Compressione – “Compressione” del file per renderlo più piccolo

Uno di questi potrebbe aiutare a rendere il tuo codice più performante.

Dare Priorità Al Contenuto Visibile

Se la tua preoccupazione principale è migliorare il FID, allora potresti voler concentrarti sul posticipare JavaScript e altri elementi della pagina per concentrarti solo sui contenuti del primo paint significativo.

Dopotutto, gli utenti non possono interagire con elementi che non sono stati renderizzati.

#3 – Dipinto Più Grande e Contenuto (LCP)

Se FCP è il tempo da 0 a 60 della tua auto, allora LCP è il suo quarto di miglio.

Okay, per chi non è un appassionato di tecnologia, quello che intendo è che LCP misura quanto velocemente l’utente può vedere il contenuto “principale” sulla tua pagina web.

Cos’è il Largest Contentful Paint?

Il Largest Contentful Paint (LCP) è una metrica che misura quanto tempo impiega il blocco di contenuto più grande di una pagina ad essere visibile all’utente. A differenza del FCP, considera il tempo di caricamento del blocco più grande di immagine o testo della pagina, indipendentemente dalla sua posizione o ordine.

Misura il blocco di contenuto più grande in base alle sue dimensioni all’interno del viewport dell’utente. In altre parole, se c’è un singolo <div> con molto testo o una singola immagine che occupa una grande porzione dello schermo, questo può essere considerato il blocco di contenuto più grande e utilizzato per calcolare LCP.

Viene misurata in secondi e si basa su dati reali degli utenti (o “sul campo”):

• Buono: < 2.5s
• Da Migliorare: 2.5 – 4s
• Scadente: > 4s

Tecniche per Migliorare LCP

Prima di iniziare a lavorare per ottimizzare il tuo LCP, potresti voler determinare quale parte della tua pagina è considerata il blocco di contenuto più grande.

Questo può aiutarti a concentrare i tuoi sforzi per migliorare le prestazioni su una pagina specifica o un modello.

Puoi farlo utilizzando Chrome DevTools nel tuo browser per identificare la risorsa LCP su una pagina specifica.

Ottimizza La Priorità Di Caricamento

Nelle sezioni precedenti, abbiamo discusso opzioni come l’utilizzo di strategie asincrone o di rinvio per accelerare la resa di parti chiave della pagina.

Potresti considerare queste qui come un’opzione di prima linea.

Rimuovere o rinviare le risorse che bloccano il rendering può aiutare a caricare più velocemente il contenuto principale. Tuttavia, ricorda che se queste risorse modificano significativamente il layout o la struttura della pagina, potrebbe effettivamente cambiare quale blocco viene considerato il più grande e rallentare il LCP invece di migliorarlo!

Puoi spingere questa strategia ancora più avanti. Soprattutto se il blocco di contenuto più grande è un’immagine.

Puoi applicare quello che è noto come framework PRPL (Preload, Render, Precache, Lazy load) per indirizzare risorse specifiche della tua pagina e per caricarle per prime nella coda. Se quell’immagine è il blocco di contenuto più grande, allora migliorerà drasticamente il tuo punteggio LCP.

Oltre alle opzioni di rendering asincrono, questo Framework offre altre strategie per ottimizzare il percorso di rendering.

Uno dei metodi più semplici è il pre-caricamento delle risorse critiche.

Puoi farlo semplicemente aggiungendo un piccolo frammento all’intestazione del tuo sito web che indica al browser di dare priorità a immagini, font, stili o script cruciali, che possono essere fondamentali per la sezione più grande del tuo contenuto.

Ad esempio, se hai un’immagine di grande impatto che è il blocco più grande della pagina, potresti voler pre-caricare quell’immagine in ogni pagina utilizzando un frammento come questo:

<link rel="preload" as="image" href="image1.png">

Questo indica al browser di iniziare a caricare questa risorsa immediatamente, prima che venga scoperta nella pagina.

Ottimizza La Dimensione Delle Risorse (File)

Ora parliamo delle dimensioni dei file.

I file più grandi impiegano più tempo a caricarsi. Questo vale per immagini, script, video, font e qualsiasi altra cosa sulla tua pagina che possa essere caricata come parte del blocco di contenuto più grande.

Un modo per velocizzare il tuo punteggio LCP è l’ottimizzazione delle dimensioni dei file.

Le strategie per ottimizzare la dimensione del file dipenderanno dal formato del file.

Ottimizzazione delle Immagini

Comunemente, troverai grandi vantaggi comprimendo e ottimizzando le tue immagini.

Inizia valutando queste aree per il miglioramento:

• Formato: Diversi formati di immagine offrono vari livelli di compressione e qualità. Per la maggior parte dei casi d’uso web, JPEG, PNG e WebP sono i formati più comuni.
  • JPEG è generalmente il migliore per le foto.
  • PNG è generalmente il migliore per immagini progettate con testo o bordi netti.
  • WebP è un formato più efficiente che offre una migliore compressione senza sacrificare la qualità, ma potrebbe non essere supportato da tutti i browser.
• Compressione: In molti casi, puoi comprimere la dimensione del file di un’immagine senza perdere molta o nessuna qualità visiva.
  • Strumenti di compressione di immagini online: TinyPNG (per PNG e JPEG), Squoosh (per WebP).
  • Strumenti di compressione di immagini di WordPress: ShortPixel, Imagify.
• Dimensione dell’immagine: Se stai caricando immagini grezze o foto sul tuo sito web e poi le aggiungi alla tua pagina, è probabile che siano molto più grandi del necessario, rallentando il tempo di caricamento.
  • Ridimensiona le tue immagini e carica solo la dimensione di cui hai bisogno.
  • Usa un plugin di WordPress per ridimensionare automaticamente le immagini quando vengono caricate.
  • Utilizza gli attributi “srcset” e “sizes” nel tag “img” per specificare più fonti e dimensioni delle immagini. Il browser sceglie automaticamente l’immagine più appropriata in base alle dimensioni dello schermo e alla risoluzione dell’utente.

Ottimizzazione Degli Script e Degli Stili

Tutte le risorse necessarie per rendere il blocco di contenuto più grande devono essere completamente caricate prima che il LCP venga calcolato.

Questo include script e stili che influenzano il tuo blocco di contenuto più grande.

Utilizzando alcune delle tecniche che abbiamo discusso in precedenza, puoi migliorare LCP ottimizzando le dimensioni dei file e il percorso di rendering per JavaScript, CSS, ecc.:

• Minimizza i file.
• Divisione del codice per ridurre le dimensioni del file.
• Aggiungi stili e script in-linea.
• Pre-carica o utilizza la cache.

Ottimizzazione Dei Video

Se la tua risorsa LCP potrebbe essere un video, allora dovresti considerare modi per ottimizzare i video.

• Ospita il video su YouTube o un altro servizio con una CDN veloce anziché caricarlo direttamente.
• Comprimi la dimensione del file video.

Ottimizzazione Dei Font

Se la risorsa LCP in questione è un testo e quel testo utilizza un font importato (ad esempio, da Google Fonts), allora puoi ottimizzare migliorando la velocità di caricamento del file del font.

• Usa solo file di font WOFF e WOFF2.0 per il web.
• Pre-carica il file del font usando un tag link rel (vedi sopra).
• Esplora altre opzioni per ridurre ulteriormente il tempo di caricamento del file del font.

Implementa una CDN

Pensa a un CDN come a una corsia preferenziale in autostrada.

Aiuta il browser a scaricare risorse più velocemente cachendole nei server in tutto il mondo.

La cosa principale da sapere è questa: implementare una CDN può migliorare notevolmente le prestazioni del sito web in generale. E, specialmente quando si tratta di LCP, può aiutare a rendere immagini, script e altri asset più velocemente rispetto al server normale del tuo host web.

Per implementare una CDN:

• Scegli un provider CDN: Ci sono diversi provider CDN popolari disponibili sul mercato, come Cloudflare, Amazon CloudFront, Google Cloud CDN e Fastly.
• Configura un account e configura il CDN: Una volta scelto un provider CDN, registrati per un account e configura le impostazioni del CDN. Questo comporta tipicamente la creazione di una zona CDN, la configurazione delle regole di caching e l’impostazione della crittografia SSL/TLS.
• Integra il CDN con il tuo sito web: Per integrare il CDN con il tuo sito web, dovrai aggiornare gli URL dei contenuti che desideri servire tramite il CDN. Questo comporta cambiare i nameservers per puntare al CDN invece del tuo server normale.
• Testa il CDN: Dopo aver integrato il CDN con il tuo sito web, esegui test per assicurarti che i contenuti siano serviti tramite il CDN e che le prestazioni LCP siano migliorate.

Per una guida più dettagliata, consulta il nostro articolo su l’uso di una CDN con WordPress.

Migliora le Prestazioni del Server

Infine, ma non per importanza, anche le prestazioni del server del tuo hosting web giocano un ruolo chiave nel LCP.

Copriremo completamente questo argomento quando parleremo di TTFB; basta sapere che il browser può scaricare le risorse solo tanto velocemente quanto lo permette il server. Se il server impiega molto tempo a rispondere, anche la risorsa impiegherà molto tempo a caricarsi.

#4 – Spostamento Cumulativo del Layout (CLS)

Sapevi che i siti web possono ballare?

Beh, più o meno. E non molto bene.

Più precisamente, possono spostarsi. Gli elementi nella pagina si muovono mentre diverse immagini, script, stili e testi vengono renderizzati fino a quando la pagina non è completamente caricata.

Cos’è Il Cumulative Layout Shift?

Il Cumulative Layout Shift misura quanto si spostano immagini, testi, pulsanti e altri elementi sulla tua pagina mentre l’utente attende il caricamento della pagina. Un CLS più basso è considerato migliore per l’esperienza utente.

Non è davvero sorprendente se consideri le tue abitudini di navigazione.

Se ti senti come se stessi giocando a whack-a-mole mentre provi a cliccare su un link che continua a spostarsi più in basso nella pagina, probabilmente ti frustrerai e lascerai il sito del tutto. (Ciao, tasso di rimbalzo!)

Questa esperienza può essere particolarmente esasperante quando si naviga su un dispositivo mobile.

CLS è un dato raccolto dagli utenti reali e viene misurato come un punteggio che combina la “frazione di impatto” (quale percentuale degli elementi nella viewport si è spostata) e la “frazione di distanza” (quanto si sono spostati rispetto alla dimensione totale dello schermo).

C’è anche una designazione speciale per “cambiamenti previsti” (ad esempio, cliccare su un pulsante che apre una nuova sezione sulla pagina) e “cambiamenti imprevisti”, che non sono provocati dall’input dell’utente.

CLS è misurato moltiplicando la frazione di impatto e la frazione di distanza:

• Buono: < 0.1
• Richiede Miglioramenti: 0.1 – 0.25
• Scadente: > 0.25

Tecniche Per Migliorare Il CLS

È probabile che se non stai cercando intenzionalmente di ingannare i tuoi utenti spostando elementi sulla tua pagina, il tuo CLS sia abbastanza basso di default, ma ci sono alcuni errori innocenti che puoi commettere e che vale la pena correggere.

Definisci Le Dimensioni di Tutte le Immagini e i Video

Una piccola cosa con un grande impatto. Se non definisci esplicitamente le dimensioni delle immagini e dei video sulla tua pagina, può portare a uno spostamento del layout perché il browser non è sicuro di quanto spazio riservare per quella risorsa.

È semplice come aggiungere l’attributo per qualsiasi immagine o video nella pagina:

<img src="hero_image.jpg" width="400" height="400">

Evita Annunci e Pop-up Che Causano Spostamenti del Layout

Devi pur sempre pagare le bollette, ma evita di usare pop-in o pop-up che modificano il layout della pagina. Se non altro, utilizza un box con rapporto di aspetto CSS per “riservare” spazio per annunci o altri messaggi che si caricano nella pagina mentre l’utente interagisce.

Scegli Le Animazioni Con Saggezza

Con CSS moderno e JavaScript, possiamo implementare tutti i tipi di animazioni belle e sofisticate sulla pagina.

Ma, dal punto di vista dell’utente, la funzionalità ha sempre la precedenza sulla forma.

Rimuovi tutte le animazioni che causano modifiche al layout, poiché ogni cambio di stato può contribuire allo spostamento complessivo del layout e influenzare negativamente il tuo punteggio CLS.

#5 – Interazione Alla Successiva Verniciatura (INP)

Come ha detto una volta Jay-Z, “Non ho pazienza. E odio aspettare.”

Noi tutti, vero?

Mentre abbiamo già trattato il ritardo di input nella prima interazione con il tuo sito web (FID), INP è una metrica più ampia che valuta la reattività complessiva del tuo sito web.

Cos’è l’Interazione fino alla Prossima Verniciatura?

L’interazione fino al prossimo disegno misura quanto tempo ci vuole affinché il prossimo “disegno” o frame aggiornato sul tuo sito web appaia dopo che l’utente interagisce con un pulsante o un elemento della pagina. Misura la reattività complessiva del sito web e quanto sono fluide le interazioni.

Questo è particolarmente importante per le applicazioni web che richiedono un’interazione significativa dell’utente e possono sembrare lente e confuse se c’è troppo ritardo nell’input o tra l’azione e il risultato.

INP è misurato in millisecondi:

• Buono: < 200ms
• Da Migliorare: 200 – 500ms
• Scarso: > 500ms

Tecniche per Migliorare INP

Se hai problemi con INP, mi dispiace per te, figlio. (Scusa, è un’altra canzone di Jay-Z.)

Fortunatamente, puoi suddividere la maggior parte dei problemi in tre problemi principali:

1. Ritardo nell’input
2. Ritardo nell’interazione
3. Ritardo nella presentazione

Questa è la parte davvero complicata; per diagnosticare il problema più da vicino, dovrai usare il profiler delle prestazioni di Google Chrome o la funzionalità di registrazione di Lighthouse.

Qui puoi ingrandire una singola interazione e vedere dove si verifica il ritardo più lungo.

Da lì, possiamo cercare alcune soluzioni per ciascuno.

Risoluzione del Ritardo di Input

Il ritardo nell’input si verifica quando il thread principale è occupato al momento dell’interazione. Ciò significa che sta succedendo qualcos’altro quando avviene il clic o la pressione del tasto.

Per risolverlo, dovrai indagare sui processi in esecuzione come parte del thread principale:

• Rimuovi o ottimizza il JavaScript di terze parti.
• Usa web workers per eseguire JavaScript al di fuori del thread principale.
• Usa listener come isInputPending() per cedere il thread principale (questa è l’opzione più avanzata).

Risoluzione Del Ritardo Nell’Interazione

Se l’interazione stessa è la causa – il che significa che ci vuole molto tempo affinché l’interazione venga effettivamente eseguita – allora dovrai rifattorizzare il codice per questo input.

La raccomandazione principale qui è di rimandare le elaborazioni non essenziali.

In altre parole, esegui la parte dell’interazione che l’utente vede immediatamente e si aspetta. Poi, dopo aver aggiornato il frame, esegui eventuali altri calcoli o interazioni dietro le quinte.

Immagina, per esempio, che l’utente clicchi un pulsante che apre una finestra e registra anche un evento che mostra che hanno cliccato il pulsante. Vorresti che il tuo codice aprisse prima la finestra, “completando” l’interazione dal punto di vista dell’utente.

Quindi, una volta completata l’interazione, registra l’evento che l’utente non vedrà o sperimenta direttamente.

Risoluzione Del Ritardo Nella Presentazione

È possibile che l’input e l’interazione avvengano entrambi piuttosto rapidamente, ma ci vuole molto tempo perché il browser aggiorni la presentazione con il nuovo frame.

Purtroppo, non c’è moltissimo da rifattorizzare che possa aiutare in questo.

Ma alcuni fattori potrebbero causare un ritardo più lungo del normale:

• Uso eccessivo di requestAnimationFrame(). Ogni volta che questa funzione è chiamata, crea un piccolo ritardo. Quindi cerca casi in cui potrebbe essere usata troppo frequentemente o inutilmente.
• Gli attributi “Async” non funzionano come previsto. A seconda del contesto, alcune risorse che hai contrassegnato per il rendering asincrono potrebbero ignorare la direttiva o caricarsi in modo inaspettato. Se ciò accade, ritarderà altri elementi del percorso di rendering e il frame successivo.

#6 – Tempo Al Primo Byte (TTFB)

Ora, ci troviamo a riflettere su quel primo istante in cui si carica una pagina web.

Prima che la pagina possa iniziare a essere renderizzata, il browser dell’utente deve stabilire il contatto con il server web, capire con chi si sta connettendo e ricevere istruzioni su cosa iniziare a caricare e in che ordine.

Quella stretta di mano iniziale contiene il primo byte di informazioni. La rapidità con cui quel byte arriva è come lo sparo di partenza di una corsa di cavalli.

Cos’è Il Tempo Al Primo Byte?

Time to First Byte è il tempo necessario al tuo browser per eseguire processi come la ricerca DNS, i handshake TCP e SSL e la configurazione della connessione per richiedere – e ricevere – i primi byte di informazioni da un server web. La velocità di stabilire una connessione con il server web dipende quasi interamente dal server stesso e dal modo in cui il sito web è ospitato.

È misurato in millisecondi:

• Buono: < 800ms
• Richiede Miglioramenti: 800 – 1800ms
• Scarso: > 1800ms

Tecniche Per Migliorare Il TTFB

Puoi pensare al TTFB come al tempo che trascorri sulla linea di partenza prima che il pistolo venga sparato. Qualsiasi cosa che ritardi il primo via libera aggiungerà tempo al TTFB e al tempo di caricamento complessivo della pagina.

Quali sono le tue opzioni per migliorare?

Elimina I Reindirizzamenti

Prima di tutto, elimina i reindirizzamenti delle pagine ogni volta che è possibile. Se stai reindirizzando gli utenti da una pagina all’altra, il tempo necessario per eseguirlo rientra nella finestra TTFB, il che significa che aggiungerai una quantità significativa di tempo al tuo punteggio.

Questo include i reindirizzamenti 301 da vecchi URL a uno nuovo, così come reindirizzamenti temporanei e altre implementazioni.

Aggiorna Il Tuo Hosting Web

L’Hosting ha un ruolo fondamentale nella velocità complessiva e nel punteggio di prestazione del tuo sito web, specialmente per quanto riguarda il TTFB.

Dovrai esaminare i dettagli del tuo fornitore di hosting, prestando particolare attenzione a elementi come:

• Hosting Condiviso vs Hosting Dedicato: Il tuo sito web è ospitato su una propria istanza o sta condividendo risorse con altri utenti e i loro siti web? L’Hosting Dedicato di solito costa di più ma offre prestazioni più consistenti.
• Memoria (RAM): La memoria a cui il tuo sito può accedere sul server gioca un ruolo fondamentale nelle sue prestazioni complessive. Se la memoria è esaurita, il server non sarà in grado di elaborare e rispondere a nuove richieste.
• CPU / Processore: Anche la velocità del processore del server gioca un ruolo nella velocità di risposta e nel tempo di elaborazione.
• Aggiornamenti dell’infrastruttura: Il software in esecuzione sul server è mantenuto aggiornato e privo di errori o conflitti? Aggiorna alle ultime versioni di PHP, MySQL e altre applicazioni essenziali per massimizzare le prestazioni.

Implementa La Cache

Sui cosiddetti “siti dinamici”, come i siti che funzionano su WordPress, la memorizzazione nella cache delle tue pagine può portare a enormi miglioramenti nei tempi di caricamento delle pagine e nel TTFB.

La cache significa sostanzialmente che invece di recuperare le informazioni dal database del tuo sito ogni volta che viene caricata una pagina, il sito memorizzerà una copia della pagina e la fornirà all’utente. È molto più veloce che cercare le informazioni ogni volta.

Per una spiegazione dettagliata su come funziona, leggi la nostra guida alla Cache del sito web.

Una Nota Sull’Indice Di Velocità

Non abbiamo incluso una sezione separata focalizzata sulla metrica dell’Indice di Velocità in questa guida perché misura essenzialmente il tempo di caricamento totale della pagina.

Questo significa che affrontare i problemi dell’indice di velocità è solitamente una questione di gestire le altre metriche correlate che abbiamo già trattato:

• Primo Rendering del Contenuto
• Rendering Principale del Contenuto
• Interazione al Prossimo Rendering
• Tempo al Primo Byte

Ognuno avrà un piccolo ruolo nella velocità cumulativa della pagina e affrontarli direttamente dovrebbe migliorare il tuo punteggio complessivo dell’Indice di Velocità.

Considerazioni Finali su PageSpeed Insights

In questa guida, abbiamo coperto praticamente tutto ciò che c’è da sapere sul rapporto PageSpeed Insights e su come puoi affrontare strategicamente ogni potenziale problema.

Nel complesso, mi aspetto che le prestazioni della pagina, l’accessibilità e le migliori pratiche tecniche continueranno a crescere in importanza. Stiamo costruendo il web insieme – un sito web alla volta – e ciò dipende dal nostro impegno comune nel mantenere il web aperto, accessibile e bello.

Prendi Il Controllo Con L’Hosting VPS Flessibile

Ecco come l’offerta VPS di DreamHost si distingue: supporto clienti 24/7, un pannello intuitivo, RAM scalabile, larghezza di banda illimitata, domini di hosting illimitati e archiviazione SSD.

Scegli Il Tuo Piano VPS

Brian Glassman