Guida di Google PageSpeed Insights - 21 modi per migliorare il tuo punteggio

Nel mondo dinamico, frenetico e in continua evoluzione di Internet, milioni di siti web sono in lizza per l’attenzione dei visitatori. Questa feroce concorrenza ha posto una forte enfasi sull’ottimizzazione della velocità e sull’esperienza utente, che sono fattori critici che possono creare o distruggere il tuo sito web.
Qui è dove puoi fare buon uso di Google PageSpeed Insights (PSI). In questa guida, esploreremo cos’è PageSpeed Insights e come può aiutarti a mettere in risalto il tuo sito web nelle pagine dei risultati dei motori di ricerca.

Inserendo l’URL del tuo sito web, PSI valuterà le prestazioni del tuo sito web e suddividerà i risultati in diverse metriche chiave.

Questi risultati possono aiutarti a capire cosa sta rallentando il tuo sito e cosa puoi fare per migliorarlo.

Qual è l’importanza del punteggio di Google PageSpeed Insights?

Nel competitivo panorama digitale, avere un sito web più veloce può darti un vantaggio rispetto ai concorrenti più lenti. Avere un sito web veloce, stabile, ben progettato e facile da navigare porta a maggiori conversioni e vendite.

Google PageSpeed Insights controlla il tuo sito web rispetto a diverse metriche chiave e assegna punteggi a ciascuna per capire facilmente come funziona il tuo sito. Un punteggio PageSpeed Insights più alto può aiutarti ad attirare più visitatori e posizionare il tuo sito web in testa alla SERP (Search Engine Results Page). Utilizzando regolarmente lo strumento, puoi monitorare le prestazioni del tuo sito e concentrarti su aree specifiche che necessitano di raffinamento per stare al passo con i tuoi concorrenti.

Tuttavia, non dovresti ossessionarti nell’ottenere risultati 100/100 su tutte le metriche. Anche i siti web più popolari non possono ottenere un punteggio perfetto. Aumentare il tuo punteggio non dovrebbe andare a scapito dell’esperienza dell’utente.

Dovresti impegnarti per ottenere il punteggio più alto possibile, ma finché il tuo sito web raggiunge i segni “in verde” su tutte le metriche, dovresti stare tranquillo. Questo è particolarmente vero se hai già superato la soglia del 90%. Cercare di aumentare il punteggio sopra 90 spesso non ha vantaggi pratici e investirvi tempo e risorse potrebbe non essere utile.

Google PageSpeed Insights vs. Google Lighthouse

Sia PageSpeed Insights che Lighthouse sono strumenti sviluppati da Google che misurano le prestazioni del tuo sito web. Tuttavia, utilizzano diversi metodi di valutazione:

• Google PageSpeed Insights adotta un approccio più generale – prende i dati dall’esperienza dei visitatori in tempo reale del tuo sito web. Inoltre, PSI valuta il tuo sito web in un ambiente controllato, che fornisce risultati che gli sviluppatori troveranno utili. Pertanto, PageSpeed Insights dipinge un quadro più ampio delle prestazioni del tuo sito web.
• Lighthouse si concentra sulla valutazione del tuo sito web su una connessione simulata con le stesse condizioni preimpostate – la stessa rete e dispositivi predefiniti. Fornisce più dati tecnici, che sono particolarmente utili per gli sviluppatori che hanno bisogno di eseguire il debug dei siti web.

In che modo il mio punteggio di PageSpeed Insights di Google influisce sulla SEO?

Quando Google calcola il tuo punteggio SEO, non analizza il tuo sito web tramite PageSpeed Insights. Pertanto, il punteggio PSI non influisce direttamente sulla tua classifica.

Detto questo, PageSpeed Insights misura le metriche, che sono fattori chiave del posizionamento per il tuo punteggio SEO. Pertanto, utilizzando PSI, puoi migliorare la velocità del tuo sito, l’accessibilità e l’esperienza utente, il che aumenterà inevitabilmente il tuo punteggio SEO.

Come utilizzare lo strumento Google PageSpeed Insights?

Usare Google PageSpeed Insights è piuttosto semplice. Devi solo inserire l’URL della tua pagina nella barra degli indirizzi sullo schermo. Lo strumento valuterà il tuo sito web e ne mostrerà i risultati. Di seguito sono riportate le istruzioni passo-passo.

1. Apri la pagina PageSpeed Insights.
2. Digita l’URL del tuo sito web nella barra degli indirizzi e premi Analizza.
   

   

3. PageSpeed Insights eseguirà la scansione del tuo sito web per alcuni minuti e visualizzerà le sue metriche di performance. Esaminerà i risultati del test di velocità per i dispositivi Mobili e Computer. Puoi passare da Questo URL (mostra i risultati per la pagina specifica che hai inviato) e Origine (mostra i risultati per l’intero dominio/sito web).
   

   

4. Clicca su Espandi visualizzazione per una visualizzazione dettagliata delle metriche dei Core Web Vitals.
   

   

5. Scorri verso il basso fino ai risultati di Lighthouse e clicca su uno di essi per visualizzare i problemi in sospeso.
   

   

   PageSpeed Insights elencherà i problemi relativi alla metrica selezionata.

   

6. Scorri verso il basso fino alla sezione Opportunità per vedere suggerimenti per miglioramenti generali e stime di quanto tempo di caricamento ognuno risparmierebbe se applicato. Ispeziona anche la sezione Diagnostica, che suggerisce miglioramenti avanzati.
   

   

7. Clicca sulla freccia accanto a ciascun problema per visualizzare il rapporto dettagliato.
   

   

Comprendere i punteggi e i report di PageSpeed Insights

I punteggi e i rapporti di Google PageSpeed Insights forniscono un’analisi completa delle prestazioni della tua pagina web, considerando varie metriche e benchmark.

Dopo aver controllato la tua pagina web, PSI assegna un punteggio compreso tra 0 e 100 in base alle sue prestazioni. Questo punteggio è classificato come segue:

• Da 0 a 49 (scarso) – Indica che la velocità della pagina deve essere migliorata.
• Da 50 a 89 (media) – Le prestazioni della pagina sono decenti, ma potrebbero essere migliorate.
• Da 90 a 100 (buono) – La pagina web è ben ottimizzata.

Più alto è il punteggio, migliori saranno le prestazioni della tua pagina web e migliore sarà l’esperienza utente.

Core Web Vitals Assessment (Field Data)

I field data forniscono un’istantanea delle prestazioni della tua pagina web utilizzando i dati del mondo reale raccolti dagli utenti effettivi tramite il Report sull’esperienza utente di Chrome (CrUX). Questi includono First Contentful Paint (FCP), Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS).

• First Contentful Paint (FCP) – Misura il tempo dal momento in cui la pagina inizia a caricarsi a quando qualsiasi parte del contenuto della pagina viene visualizzata sullo schermo.
• Largest Contentful Paint (LCP) – Misura il tempo che l’elemento visivo principale della pagina carica sullo schermo. È un buon indicatore di prestazioni di velocità.
• Interaction to Next Paint (INP) – Indica quanto è reattivo il tuo sito. In particolare, misura il tempo che impiega il tuo sito web a rispondere alle interazioni degli utenti, come il clic su un pulsante o un link, dopo che la pagina ha finito di caricarsi.
• Cumulative Layout Shift (CLS) – Rappresenta la stabilità visiva delle tue pagine web. Misura la frequenza con cui un visitatore sperimenta cambiamenti di layout imprevisti quando la pagina viene caricata.
• Time to First Byte (TTFB) – Questa metrica misura il tempo impiegato dal primo byte di risposta di un sito web alle richieste degli utenti per arrivare. TTFB è un indicatore della reattività e della velocità di un server web.

Questi risultati illustrano l’esperienza reale dei visitatori con il tuo sito web. PageSpeed Insights considera che il tuo sito web superi il test Core Web Vitals per dispositivi mobili o desktop se superi la soglia del punteggio del 75%.

Dati di laboratorio

I dati di laboratorio offrono informazioni dettagliate sulle prestazioni della tua pagina web sulla base di test in un ambiente controllato. I risultati sono generati da Google Lighthouse, che simula una connessione su una rete predefinita e desktop e dispositivi mobili selezionati. È utile per il debug di problemi di prestazioni e offre metriche come Speed Index, Time to Interactive e Total Blocking Time.

Opportunità, diagnostica e audit superati

Le opportunità sono i consigli di Google PageSpeed Insights di miglioramenti generali della velocità di caricamento della pagina. D’altra parte, la sezione Diagnostica fornisce ulteriori informazioni su come una pagina aderisce alle migliori pratiche di sviluppo web.

Gli audit superati sono i fattori in cui la tua pagina web eccelle già, indicando gli aspetti del tuo sito web che sono ben ottimizzati.

21 Passaggi per migliorare il punteggio di Google PageSpeed Insights

Passo 1. Riduci i tempi di risposta del server (TTFB)

Riducendo il tempo di risposta del server o il Time to First Byte (TTFB), puoi migliorare le prestazioni del tuo sito web e aumentare il punteggio di Google PageSpeed Insights.

TTFB è la quantità di tempo necessaria al browser di un utente per ricevere il primo byte di dati dal tuo server web dopo che è stata effettuata una richiesta. Un TTFB alto può portare a un ritardo nel rendering della pagina web, causando un notevole ritardo per l’utente. Google raccomanda un TTFB inferiore a 200 millisecondi.

Di seguito sono riportate le strategie più critiche per ridurre il tempo di risposta del server.

• Scegli un Hosting Affidabile – Il fattore più cruciale nella riduzione del tempo di risposta del server è la scelta di un host affidabile con soluzioni hardware e software ad alte prestazioni. SiteGround ha server di gamma superiore e varie soluzioni di miglioramento della velocità che garantiscono prestazioni ottimali del tuo sito web e velocità di caricamento elevate.
• Abilita la cache del server – La cache del server memorizza una versione del tuo sito web sul server, riducendo il tempo necessario per generare una pagina.
• Ottimizza il tuo database – Un database poco ottimizzato può causare tempi di risposta del server lenti. Cancella regolarmente i dati vecchi o non necessari, e considera l’utilizzo di una soluzione di indicizzazione per accelerare le query del database.
  Gli utenti di WordPress possono prendere in considerazione l’utilizzo di plugin che eseguono la manutenzione programmata del database, come

  

• Utilizza un Content Delivery Network (CDN) – Le CDN possono memorizzare nella cache il contenuto del tuo sito in vari server di tutto il mondo. Ciò significa che la richiesta di un utente non ha bisogno di viaggiare così lontano, riducendo il TTFB.
• Ottimizza il codice dell’applicazione – Assicurati che il codice di back-end del tuo sito web sia pulito, efficiente e non contenga attività non necessarie che potrebbero rallentare i tempi di risposta.

Quali azioni specifiche puoi intraprendere per implementare questi passaggi? Scoprilo nei seguenti passaggi.

Passo 2. Riduci CSS e JavaScript

File CSS e JavaScript grandi e ingombranti possono rallentare significativamente il tuo sito web e abbassare il punteggio di Google PageSpeed Insights. Ridurre la dimensione di questi file può velocizzare il tuo sito web diminuendo la quantità di dati che devono essere scaricati, analizzati ed eseguiti. Di seguito, troverai alcuni dei modi più efficaci per ottenerlo.

• Minificazione – Questo è il processo di rimozione di tutti i caratteri non necessari dal codice sorgente senza modificarne la funzionalità. Per i siti web WordPress, considera le funzionalità Minifica i file CSS e Minifica i file JavaScript del plugin Speed Optimizer.
• Elimina il codice inutilizzato – Man mano che il tuo sito si evolve, potrebbero esserci blocchi di codice CSS e JavaScript che non sono più necessari.
• Usa strutture di codice compatte – L’utilizzo di proprietà abbreviate CSS e l’ottimizzazione della struttura del codice JavaScript possono ridurre drasticamente le dimensioni dei tuoi file. Evita di scrivere codice lungo e ripetitivo dove è disponibile un’alternativa più compatta.

Scopri i metodi pratici per ridurre i file JavaScript e CSS nelle seguenti sezioni.

Passo 3. Elimina le risorse che bloccano il rendering

Le risorse che bloccano il rendering sono file che impediscono la visualizzazione di una pagina web finché non sono state caricate. Queste in genere includono file CSS e JavaScript. Eliminare o ridurre al minimo queste risorse può migliorare significativamente i tempi di caricamento del tuo sito e le prestazioni complessive.

Puoi identificare le risorse che bloccano il rendering dai report di PageSpeed Insights. Quindi, determina quali non sono essenziali e rimuovile dalla pagina. Tuttavia, tieni presente che farlo manualmente richiede una certa esperienza in programmazione e codici.

Se il tuo sito web è costruito in WordPress, puoi utilizzare un plugin WordPress per rinviare tali risorse. Raccomandiamo il plugin Speed Optimizer, che può farlo con un solo click. Apri la bacheca di WordPress, vai su Speed Optimizer > Frontend > JavaScript e attiva l’opzione Rinvia il blocco di visualizzazione JS.

Una volta terminata l’eliminazione delle risorse che bloccano il rendering, passa al passaggio successivo, che è la minificazione di JavaScript.

Passo 4. Minifica il JavaScript

La minimizzazione del JavaScript è il processo di rimozione dei caratteri non necessari dai file JavaScript, come spazi bianchi, caratteri di nuova riga e commenti. Di conseguenza, ridurrai il tempo necessario per scaricare ed eseguire questi script, migliorando le prestazioni complessive del tuo sito.

Farlo da solo richiederà una parte significativa del tuo tempo. Tuttavia, Speed Optimizer si rivelerà estremamente utile se sei un utente WordPress. Se l’hai già installato, vai alla tua bacheca e seleziona Speed Optimizer > Frontend > JavaScript. Attiva l’opzione Minifica i file JavaScript e il plugin minificherà automaticamente i file JavaScript.

Dopo aver terminato la minificazione dei file JavaScript, procedi alla minificazione del codice CSS.

Passo 5. Minimizza CSS

I CSS (Cascading Style Sheets) sono usati per lo stile e il layout delle tue pagine web. Simile a JavaScript, i file CSS possono anche contenere spazi bianchi e caratteri non necessari, rendendoli più grandi del necessario. Di conseguenza, i browser impiegano più tempo per leggerli, il che influisce sulla velocità di caricamento della pagina web.

Minificando i fogli di stile CSS, comprimerai il codice, migliorando le prestazioni della tua pagina web. Gli utenti di WordPress possono utilizzare il plugin Speed Optimizer per minimizzare i CSS con un solo click.

Accedi alla tua bacheca e vai su Speed Optimizer > Frontend > CSS. Attiva l’opzione Minifica i file CSS per minimizzare tutti i file CSS del tuo sito web.

Oltre a minimizzare il codice CSS, potresti anche voler rimuovere il codice CSS inutilizzato. Scopri come nel prossimo passaggio.

Passo 6. Rimuovi i CSS inutilizzati

CSS non utilizzato si riferisce alle regole di stile incluse nei tuoi file CSS che non sono utilizzate per lo stile o la visualizzazione delle tue pagine web. Potrebbero essere resti di precedenti design, stili o temi WordPress applicati a componenti che non esistono più sul tuo sito.

Queste regole di stile ridondanti creano rigonfiamenti non necessari, facendo sì che i tuoi file CSS siano più grandi del necessario. Ciò significa più dati per l’utente da scaricare e più per il browser da analizzare, con conseguente tempi di caricamento più lenti e un punteggio di Google PageSpeed Insights più basso.

Rimuovere questo CSS inutilizzato è fondamentale per ottimizzare le prestazioni del tuo sito web. Puoi utilizzare DevTools di Google Chrome o altri strumenti online per trovare quali regole CSS non sono utilizzate dal tuo sito.

Una volta identificato i CSS non utilizzati, il passaggio successivo è rimuovere queste regole non necessarie. Se non sei sicuro che una regola possa essere utilizzata in futuro, isolala in un file CSS separato invece di eliminarla.

Dopo aver apportato le modifiche, testa attentamente il tuo sito web per assicurarti che la rimozione dei CSS non utilizzati non abbia influito sulla funzionalità o sull’aspetto del tuo sito.

Ora che hai ottimizzato il codice del tuo sito web, dovresti anche prendere in considerazione l’implementazione di tecniche di ottimizzazione della velocità. Andiamo ai passaggi successivi.

Passo 7. Abilita la Compressione GZip

La compressione GZip è una tecnica vitale per l’ottimizzazione delle prestazioni che può migliorare notevolmente il punteggio di Google PageSpeed Insights.

Quando un utente visita il tuo sito web, viene inviata una richiesta al tuo server per fornire i file richiesti. Più grandi sono questi file, più tempo impiegano a viaggiare dal server al browser. GZip comprime questi file in un file ZIP, rendendoli più piccoli e quindi più veloci da consegnare. Il browser del visitatore scarica e decomprime i file e li utilizza per il rendering del sito web.

Ci sono diversi modi per abilitare la compressione GZip per il tuo sito web.

• Abilita GZip sul tuo server – Questo processo varia a seconda del tuo server. Per i server Apache, puoi utilizzare il file .htaccess per abilitare la compressione GZip. Per i server Nginx, dovrai aggiungere le direttive appropriate nel tuo file di configurazione Nginx.
  Se il tuo sito web è ospitato con SiteGround, utilizza già la compressione GZip. SiteGround ha abilitato la compressione GZip e Brotli su tutti i server per impostazione predefinita.
• Usa un plugin – Diversi plugin possono abilitare la compressione GZip se il tuo sito web è costruito con WordPress.

Un altro modo per migliorare le prestazioni del tuo sito web è abilitare la cache del browser. Il prossimo passo copre i metodi più comuni, quindi continua a leggere.

Passo 8. Abilita la Cache del Browser

Il caching del browser è una tecnica che può ridurre drasticamente i tempi di caricamento del tuo sito web per i visitatori di ritorno, portando a un miglioramento del punteggio di Google PageSpeed Insights.

Quando un utente visita una pagina web per la prima volta, il browser memorizza nella cache molti elementi della pagina, inclusi fogli di stile, file JavaScript, immagini e il documento HTML. Il caching implica l’archiviazione di questi file localmente sul dispositivo dell’utente. Quando l’utente visita nuovamente la pagina, il browser non ha bisogno di ricaricare l’intera pagina ma può recuperare la maggior parte dei file dalla cache, riducendo così significativamente il tempo di caricamento.

Ecco come puoi abilitare la cache del browser:

• Sfrutta la cache del browser con .htaccess – Se il tuo sito è su un server Apache, puoi abilitare la cache del browser aggiungendo direttive al tuo file .htaccess. Dovrai specificare le istruzioni di memorizzazione nella cache per diversi tipi di file in base alla frequenza con cui vengono aggiornati. Per istruzioni dettagliate, leggi questa guida su come sfruttare la cache del browser per immagini, CSS e JS.
• Utilizza Cache-Control Headers – L’header HTTP Cache-Control contiene le direttive per la memorizzazione nella cache sia nelle richieste che nelle risposte. Le direttive specificano chi può memorizzare nella cache la risposta, a quali condizioni e per quanto tempo.
• Utilizza un plugin di caching – Per WordPress, diversi plugin possono abilitare il caching del browser con pochi click. Raccomandiamo Speed Optimizer, che presenta varie opzioni di caching e di miglioramento della velocità. Per abilitare il caching del browser, vai alla dashboard, apri Speed Optimizer > Caching e attiva l’opzione Cache File-based.
  

  

Oltre al caching del browser, dovresti anche sfruttare le capacità di caching del tuo server. Vai al passaggio successivo per ulteriori informazioni.

Passo 9. Abilita la cache del server

Il caching del server è una delle tecniche più efficaci per aumentare il punteggio di Google PageSpeed Insights. Memorizza una copia cache del tuo sito web sul server e la consegna all’utente finale. Questo elimina la necessità per il server di creare dinamicamente la stessa pagina ogni volta che un visitatore vi visita, riducendo così significativamente il carico del server.

Come utente SiteGround, puoi aumentare la velocità del tuo sito web con SuperCacher, una soluzione interna con tre livelli di caching: statico, dinamico e Memcached. Scopri come funziona in questo tutorial su SuperCacher.

L’utilizzo di una Content Delivery Network (CDN) è un altro modo per aumentare la velocità del tuo sito. Leggi il passaggio successivo per scoprire come implementarlo.

Passo 10. Usa Content Delivery Network (CDN)

Un modo per rendere l’esperienza coerente per tutti gli utenti in tutto il mondo è utilizzare una rete di distribuzione dei contenuti (CDN). Una CDN creerà copie del tuo sito web sulla sua rete di server e i visitatori caricheranno il sito web da quello più vicino. Ciò garantirà prestazioni stabili e tempo di caricamento indipendentemente dalla posizione dei visitatori.

Gli utenti di SiteGround possono beneficiare della CDN di SiteGround come parte del loro piano di hosting. Per saperne di più sul servizio, leggi questa guida su SiteGround CDN.

Quindi, ottimizza le immagini del tuo sito web per migliorare la velocità di caricamento. Segui le istruzioni nel passaggio successivo.

Passo 11. Ottimizza le tue immagini

Le immagini spesso costituiscono una percentuale significativa della dimensione totale di una pagina web. Codificare e ottimizzare in modo efficiente le tue immagini può portare a miglioramenti sostanziali nei tempi di caricamento e nelle prestazioni complessive del sito web. Questo, a sua volta, può avere un impatto positivo sul punteggio di Google PageSpeed Insights.

L’ottimizzazione delle immagini implica la scelta del formato, del livello di compressione e della risoluzione corretti, mantenendo un livello di qualità accettabile. Ecco alcune strategie per ottimizzare in modo efficiente le tue immagini:

• Scegli il formato immagine corretto – Diversi formati di file immagine hanno diversi punti di forza. JPEG è una buona scelta per fotografie o immagini complesse con molti colori, mentre PNG è la soluzione migliore per immagini che richiedono trasparenza.
• Usa formati immagine di nuova generazione – I formati più recenti, come WebP, offrono una compressione superiore e più funzionalità rispetto ai formati precedenti. Le immagini salvate in questi formati sono piccole mentre la loro qualità viene preservata.
  Se il tuo server di hosting supporta WebP, utilizza le immagini in questo formato per migliorare la velocità e le prestazioni del tuo sito. SiteGround ha implementato da tempo WebP su tutti i server.
  Se il tuo sito web è costruito in WordPress, considera l’utilizzo di un plugin per convertire tutte le immagini esistenti nella tua Libreria multimediale in WebP. Speed Optimizer è uno di questi plugin. Inoltre, ha un meccanismo di fallback che consente al tuo sito web di visualizzare i vecchi file di immagine invece di WebP nel caso in cui i browser dei visitatori non siano compatibili con WebP.
  Per convertire le immagini, apri la dashboard, vai su Speed Optimizer > Media e attiva Usa le immagini WebP.

  

  
  

• Applica compressione – Più piccoli sono i file di immagine, più veloce sarà il caricamento del tuo sito web. Molti strumenti di modifica delle immagini, plugin e servizi online offrono opzioni per comprimere le immagini, riducendo la dimensione del file. Fai attenzione a bilanciare la compressione con la qualità dell’immagine, però.
  Speed Optimizer può anche tornare utile per gli utenti di WordPress a questo proposito. Può ottimizzare tutte le immagini esistenti e fornisce diverse impostazioni di compressione. Dalla tua bacheca, vai su Speed Optimizer > Media e premi il pulsante Modifica accanto a Compressione delle immagini. Nella seguente finestra pop-up, puoi scegliere le impostazioni delle nuove immagini compresse.

  

• Ottimizza la risoluzione – Assicurati che le tue immagini non siano più grandi di quanto dovrebbero essere. Servire un’immagine a una risoluzione più alta del necessario comporta file di dimensioni maggiori e tempi di caricamento più lenti.
• Usa immagini reattive – Implementa immagini reattive utilizzando gli attributi HTML srcset e sizes. Ciò ti consente di servire la giusta dimensione dell’immagine in base al dispositivo dell’utente e alla dimensione del viewport, diminuendo il trasferimento di dati non necessario.
• Sfrutta la cache del browser e una CDN – Browser caching e Content Delivery Networks (CDN) possono anche aiutare a migliorare i tempi di caricamento delle immagini. La memorizzazione nella cache consente ai visitatori abituali di caricare le immagini localmente anziché scaricarle di nuovo, mentre una CDN può servire le immagini dal server più vicino all’utente.

L’ottimizzazione delle immagini è fondamentale, ma puoi migliorare ulteriormente le prestazioni del tuo sito rinviando le immagini fuori schermo. Leggi il seguente passaggio per sapere come.

Passo 12. Rinvia le immagini fuori schermo

Spesso, quando apri un sito web, l’intera pagina non può adattarsi allo schermo e devi scorrere verso il basso per vedere tutto il contenuto e le immagini. Queste immagini non visibili sono chiamate immagini fuori schermo. I browser li scaricano prima ancora di scorrere verso il basso, il che rallenta la visualizzazione della pagina.

Per migliorare la velocità di caricamento, puoi posticipare le immagini fuori schermo. Una soluzione molto utile è il lazy loading. Usandolo, i browser daranno la priorità al caricamento del contenuto “in cima” e visualizzeranno le immagini fuori schermo una volta che vengono visualizzate.

Speed Optimizer può aiutarti ancora una volta se sei un utente WordPress. Vai su Speed Optimizer > Media > Ottimizzazione dei media e attiva Lazy Load dei media.

Indubbiamente, le immagini richiedono più tempo per caricarsi e prendersene cura migliora drasticamente le prestazioni del tuo sito web. Ma ci sono altre risorse a cui devi prestare attenzione. Il caricamento dei font web può anch’esso influire sull’esperienza dell’utente. La sezione seguente affronta le azioni per migliorare questo aspetto.

Passo 13. Assicurati che il testo rimanga visibile durante il caricamento dei font web

I font web personalizzati sono diventati sempre più popolari nel web design moderno. Tuttavia, i font web possono influire sulle prestazioni della pagina, in particolare sulla velocità di caricamento percepita del contenuto del testo. Per impostazione predefinita, i browser nasconderanno il testo che utilizza un font web fino a quando il font non è completamente caricato, un comportamento noto come “Flash of Invisible Text” (FOIT). Questo può portare a una scarsa esperienza utente, influenzando il tuo punteggio di Google PageSpeed Insights.

Per fornire un’esperienza utente senza interruzioni, assicurati che il testo rimanga visibile durante il caricamento del font web. In questo modo, il browser visualizzerà immediatamente il testo in un font di fallback e poi lo scambierà con il font web una volta caricato. Questo comportamento, noto come “Flash of Unstyled Text” (FOUT), è generalmente un approccio più intuitivo.

Ecco come garantire che il testo rimanga visibile durante il caricamento del webfont:

• Usa la proprietà CSS font-display – Questa proprietà controlla come un carattere viene visualizzato in base a se e quando è stato scaricato ed é pronto all’uso. Il valore font-display: swap; assicura che il testo rimanga visibile durante il caricamento del font web utilizzando un font di sistema fino a quando il font personalizzato non è pronto.
  Di seguito, puoi vedere un esempio di codice CSS che incorpora il font-display: swap; descrittore.

   @font-face {
    font-family: ExampleFont;
    src: url(/path/to/fonts/examplefont.woff) format('woff'),
         url(/path/to/fonts/examplefont.eot) format('eot');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

• Ospita i font localmente – Ospitare font sul tuo server anziché su un server di terze parti può ridurre i tempi di caricamento.
• Limita il numero di famiglie di font – Mentre la varietà di caratteri può migliorare il tuo design, aggiungono anche ulteriore peso alla tua pagina. Cerca di limitare il numero di famiglie di font, spessori e stili che stai utilizzando solo a quelli necessari.
• Precarica i principali font web – Il preloading fa sì che il browser scarichi i caratteri web quando carica la pagina prima che tutto il CSS venga analizzato. I siti web WordPress possono utilizzare il plugin Speed Optimizer per il precaricamento dei font web.
  Per abilitare questa funzione, apri la dashboard, vai su Speed Optimizer > Frontend > General e attiva Ottimizzazione dei font web. Puoi anche selezionare quali font web devono essere precaricati dall’opzione Precaricamento dei font se ne hai più di uno.

  

Finora, abbiamo coperto le misure più generali e critiche. Tuttavia, puoi implementare strategie più specifiche per migliorare ulteriormente il tuo sito web. Iniziamo con le istruzioni per prevenire reindirizzamenti eccessivi.

Passo 14. Evita reindirizzamenti eccessivi

Spesso, devi utilizzare i reindirizzamenti quando sposti o elimini delle pagine. Il loro scopo è quello di inviare utenti e motori di ricerca a un URL diverso da quello originariamente richiesto. Tuttavia, reindirizzamenti eccessivi o non necessari possono comportare tempi di caricamento della pagina più lenti, con un impatto negativo sull’esperienza utente e sul punteggio di Google PageSpeed Insights.

Ogni reindirizzamento attiva un ulteriore ciclo HTTP di richiesta-risposta, aumentando il tempo complessivo necessario per il caricamento di una pagina. Questo è particolarmente problematico per gli utenti mobili, che spesso si affidano a connessioni di rete meno affidabili.

Ecco come evitare reindirizzamenti eccessivi e ottimizzare le prestazioni del tuo sito web:

• Riduci al minimo le catene di reindirizzamento – Una catena di reindirizzamento si verifica quando c’è più di un reindirizzamento tra l’URL originale e la pagina di destinazione finale. È importante aggiornare tutti i link in modo che puntino all’URL di destinazione finale per ridurre al minimo queste catene.
• Usa link diretti – Quando possibile, assicurati di utilizzare link diretti nella tua navigazione, sitemap e struttura del documento.
• Controlla regolarmente i tuoi reindirizzamenti – È buona norma controllare regolarmente il tuo sito per reindirizzamenti non necessari.
• Usa i reindirizzamenti in modo saggio per i siti mobili – Se hai siti desktop e mobili separati, assicurati di reindirizzare correttamente gli utenti mobili. Evita reindirizzamenti errati, come l’invio di un utente a una pagina irrilevante o l’utilizzo di un reindirizzamento quando un link diretto sarebbe più appropriato.

Dopo aver risolto i problemi di reindirizzamento in sospeso, è possibile esaminare il concatenamento delle richieste critiche. Troverai maggiori informazioni nella prossima sezione.

Passo 15. Evita di concatenare le Richieste Critiche

Il concatenamento si verifica quando le risorse dipendono l’una dall’altra. Ad esempio, un file JavaScript o CSS richiesto all’interno di un’altra risorsa (come un documento HTML) crea una catena. Il browser deve attendere fino a quando non riceve la risposta HTML per scoprire la richiesta JavaScript o CSS, quindi attendere di nuovo per ottenere la risposta JS o CSS.

Più è lunga la catena, più tempo impiega il rendering della pagina, con un impatto negativo sul punteggio di Google PageSpeed Insights. L’utilizzo dei seguenti metodi può aiutarti a ridurre al minimo il concatenamento delle risorse.

• Riduci al minimo il numero di risorse critiche – Includi solo le risorse assolutamente necessarie per il rendering iniziale della pagina. I file JavaScript non critici o CSS possono essere caricati in modo asincrono o differiti fino a dopo il primo rendering. Per WordPress, puoi utilizzare plugin di ottimizzazione come Speed Optimizer che contengono le funzionalità Minify CSS , Minify JavaScript e Defer Render-blocking JavaScript.
• Ottimizza l’ordine delle tue richieste – Dai la priorità al caricamento dei contenuti visibili o dei contenuti in cima. Questo può garantire che i tuoi utenti vedano qualcosa sullo schermo il più rapidamente possibile. Usa Speed Optimizer e la sua opzione Lazy Load se il tuo sito web è basato su WordPress.
• Precarica risorse chiave – È possibile utilizzare il precaricamento per caricare prima le risorse chiave e ridurre la lunghezza della catena di richieste. Ad esempio, puoi utilizzare Ottimizzazione dei font web e Precaricamento dei font in Speed Optimizer per il tuo sito WordPress.

Facendo un salto di qualità, puoi migliorare la velocità di caricamento precaricando le richieste chiave. Leggi la seguente sezione per sapere come.

Passo 16. Richieste chiave di precaricamento

Le richieste chiave sono richieste critiche che la pagina esegue con priorità in una fase di caricamento iniziale. Potrebbero essere qualsiasi cosa: file JavaScript, stili CSS o webfont. Applicare il precaricamento delle richieste chiave può migliorare significativamente il tempo di caricamento della pagina.

Puoi implementare il precaricamento delle richieste chiave con alcune tecniche:

• Identifica le risorse chiave – Questi potrebbero essere file JavaScript o CSS critici, immagini importanti o webfont che sono necessari all’inizio del processo di caricamento della pagina.
• Usa la direttiva Preload – Aggiungi un link tag nell’intestazione del tuo documento HTML con `rel=”preload”` e href che puntano alla risorsa che vuoi precaricare. Ad esempio:

  <link rel="preload" href="/styles/important.css" as="style">

  L’attributo as è necessario per specificare il tipo di contenuto da precaricare.

• Precarica i web font – I web font vengono spesso scoperti tardi in fase di caricamento. Il precaricamento di font web chiave può renderli disponibili prima, riducendo la possibilità di un “flash di testo non stilizzato”. Ad esempio:

  <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

  Se gestisci un sito WordPress, puoi utilizzare un plugin come Speed Optimizer per il precaricamento dei web font.

• Sii selettivo – Il precaricamento di troppe risorse può effettivamente compromettere le prestazioni, in quanto potrebbe comportare il download di risorse non critiche che competono con risorse più importanti. Sii selettivo su ciò che precarichi.
• Usa Preconnect o Prefetch quando appropriato – Preconnect può stabilire connessioni anticipate con importanti origini di terze parti. Prefetch, d’altra parte, può aiutare a caricare le risorse che verranno utilizzate nella prossima navigazione / caricamento della pagina.

Ora possiamo concentrarci sull’ottimizzazione dei contenuti animati del tuo sito web. Il passaggio successivo descrive i metodi più vantaggiosi.

Passo 17. Usa i formati video per i contenuti animati

I contenuti animati sono un ottimo modo per coinvolgere i visitatori e arricchire la loro esperienza utente. Tuttavia, il formato che scegli per le tue animazioni può influire in modo significativo sulla velocità di caricamento del tuo sito e sulle prestazioni complessive.

Tradizionalmente, le animazioni venivano spesso create come GIF, ma le GIF possono essere piuttosto grandi, con conseguenti tempi di caricamento lenti. Un’alternativa migliore è utilizzare i formati video per i contenuti animati. I formati video, come MP4 o WebM, sono più efficienti nella compressione e possono fornire una qualità superiore con file di dimensioni inferiori.

Di seguito, troverai alcuni suggerimenti per la gestione dei contenuti animati.

• Converti GIF in formati video – Strumenti come FFmpeg o convertitori online possono aiutarti a convertire GIF esistenti in formati MP4 o WebM. Puoi quindi utilizzare l’elemento video HTML5 per incorporarli nel tuo sito.
• Usa le impostazioni di compressione corrette – Quando crei un video, sperimenta diverse impostazioni di qualità e compressione per creare un equilibrio tra le dimensioni del file e la qualità visiva.
• Autoplay e Loop – Puoi fare in modo che i tuoi video si comportino come GIF utilizzando gli attributi autoplay e loop nel tag video. Ricorda di aggiungere le `muted` per riprodurre automaticamente i video in linea, specialmente sui dispositivi mobili.
• Utilizza una piattaforma di hosting video – Prendi in considerazione l’utilizzo di una piattaforma di hosting video come YouTube o Vimeo. Questo può ridurre il carico sul tuo server, fornire una buona esperienza di visualizzazione su vari dispositivi e connessioni Internet e offrire funzionalità aggiuntive come l’analisi video.

Ora esaminiamo alcune pratiche di manutenzione salutari per le applicazioni CMS popolari come i siti WordPress.

Passo 18. Riduci l’utilizzo di codice di terze parti

Il codice di terze parti è costituito da script ospitati su altri siti web ma caricati ed eseguiti sul tuo sito. Questi possono essere script per analisi, pubblicità, assistenza clienti, pulsanti di condivisione dei social media e altre funzionalità. Di solito forniscono funzionalità utili, ma possono influire in modo significativo sul tempo di caricamento del sito e sulle prestazioni complessive.

Ogni script di terze parti richiede una richiesta HTTP aggiuntiva, che si aggiunge al tempo di caricamento. Inoltre, poiché questi script sono ospitati su server esterni, hai meno controllo sulle loro prestazioni.

Le seguenti linee guida possono aiutare a ridurre il loro impatto:

• Controlla gli script di terze parti – Inizia identificando tutti gli script di terze parti in esecuzione sul tuo sito web. Puoi utilizzare la scheda DevTools di Google Chrome per farlo. Valuta il valore che ogni script fornisce rispetto al suo impatto sulle prestazioni.
• Limita il numero di script di terze parti – Utilizzare solo gli script di terze parti necessari. Ogni script che rimuovi migliorerà il tempo di caricamento del tuo sito e le prestazioni generali.
• Carica script in modo asincrono – Il caricamento asincrono consente al resto della pagina web di continuare il caricamento mentre lo script viene scaricato. L’applicazione di questo a script di terze parti può impedire loro di bloccare il rendering della pagina.
• Usa il Lazy Loading – Prendi in considerazione l’utilizzo del caricamento lento per contenuti di terze parti che non sono immediatamente visibili (come widget o incorporamenti). Questa tecnica ritarda il caricamento delle risorse finché non sono necessarie, ad esempio quando un utente scorre la pagina verso il basso.
• Ospita gli script localmente – Se il provider di terze parti lo consente, considera di ospitare gli script localmente sul tuo server. Questo ti dà un maggiore controllo sulle loro prestazioni ed elimina una ricerca DNS aggiuntiva.

Un altro problema spesso riscontrato nei siti web WordPress è una grande dimensione del Document Object Model (DOM). Scopri come affrontarlo nel passaggio successivo.

Passo 19. Riduci le dimensioni del Document Object Model (DOM).

Il Document Object Model (DOM) è una rappresentazione della tua pagina web che i browser usano per costruire l’interfaccia visiva. Quando una pagina web ha un DOM complesso o di grandi dimensioni, significa che ci sono numerosi elementi sulla pagina che il browser deve elaborare e gestire. Ciò può rallentare il tempo di caricamento della pagina, influire sull’interazione dell’utente e abbassare il punteggio di Google PageSpeed Insights.

Un DOM di grandi dimensioni può derivare dall’avere elementi profondamente nidificati o semplicemente troppi elementi in generale sulla pagina. Un numero elevato di elementi richiede più memoria e risorse CPU e rallenta il rendering della pagina.

Ecco alcune strategie per ridurre le dimensioni del tuo DOM:

• Semplifica la struttura della pagina – Cerca di semplificare il più possibile la tua struttura HTML. Riduci la profondità e il numero di elementi figlio ed evita le relazioni genitore-figlio non necessarie.
• Rimuovi elementi non necessari – Elimina gli elementi che non contribuiscono all’interfaccia visiva o alla funzionalità della pagina. Questo potrebbe includere elementi vuoti o duplicati.
• Suddividi le pagine grandi in pagine più piccole – Una pagina grande con molti contenuti genererà inevitabilmente un grande DOM. Prendi in considerazione la possibilità di suddividere le pagine di grandi dimensioni in più pagine più piccole.
• Limita gli elementi sulla pagina – Come regola generale, prova a limitare la tua pagina web a meno di 1500 elementi. Le pagine con più di questo possono spesso riscontrare problemi di prestazioni.
• Lazy Load di contenuto – Prendi in considerazione il caricamento lazy per i contenuti below the fold“più in giù”. Questo può ritardare l’elaborazione di parti non critiche della tua pagina, riducendo la dimensione iniziale del DOM.
• Usa temi affidabili – Molto spesso, il colpevole che causa una grande dimensione del DOM è un tema WordPress che contiene molto codice spazzatura. Usa temi provati e testati con codice pulito per evitare di generare un DOM di grandi dimensioni.

Infine, assicurati che il tuo sito web utilizzi le ultime tecnologie, che generalmente migliorano le prestazioni e la sicurezza. Leggi gli ultimi due passaggi per maggiori informazioni.

Passo 20. Implementa HTTP/2

HTTP/2, l’ultima versione di HTTP, offre miglioramenti delle prestazioni rispetto al suo predecessore, come il multiplexing e la compressione degli header. L’implementazione di HTTP/2 può migliorare significativamente il punteggio del tuo sito web.

Assicurati che il tuo server web sia configurato per utilizzare questo protocollo per garantire tempi di caricamento e prestazioni migliori. I server di SiteGround hanno incorporato questa funzionalità da molto tempo. Per ulteriori informazioni, leggi questa guida su cosa è HTTP/2.

Passo 21. Usa le ultime tecnologie PHP

La maggior parte dei siti web, inclusi i popolari sistemi di gestione dei contenuti (CMS) come WordPress, sono costruiti in PHP. PHP è un linguaggio di programmazione che subisce costantemente aggiornamenti e revisioni che includono miglioramenti delle prestazioni e della sicurezza.

Utilizza l’ultima versione di PHP possibile per sfruttare tutti gli aggiornamenti di sicurezza e prestazioni, che possono aumentare il tuo punteggio PSI. SiteGround supporta sempre le ultime tecnologie e PHP non fa eccezione. Puoi abilitare PHP Gestito, che imposterà automaticamente l’ultima versione stabile di PHP.

Inoltre, abbiamo sviluppato una configurazione PHP, chiamata PHP Ultraveloce, che può aumentare la velocità del tuo sito web fino al 30%. Per saperne di più, leggi questa guida su PHP Ultraveloce.

Conclusione

Google PageSpeed Insights è uno strumento indispensabile per qualsiasi proprietario o sviluppatore di siti web che cerchi di ottimizzare le prestazioni del sito web. Fornendo preziose metriche e consigli pratici, aiuta a identificare le aree di miglioramento che possono migliorare significativamente il tempo di caricamento del tuo sito web, l’usabilità e l’esperienza utente complessiva.

Questo articolo ha mostrato diverse strategie per migliorare il tuo punteggio di PageSpeed Insights. Ci auguriamo che li metterai a frutto e realizzerai la migliore versione del tuo sito web.

Domande frequenti su Google PageSpeed Insights

Google PageSpeed Insights influisce sul posizionamento SEO del mio sito?

No, Google non tiene conto del punteggio di PageSpeed Insights quando formula la classifica SEO del tuo sito web. Tuttavia, PSI misura metriche come l’accessibilità e le prestazioni che formulano il punteggio di ottimizzazione dei motori di ricerca.

Quanto costa Google PageSpeed Insights?

Google PageSpeed Insights è uno strumento assolutamente gratuito e Google non prevede di renderlo un servizio premium.

Google possiede Google PageSpeed Insights?

Sì. Sia PageSpeed Insights che Lighthouse sono strumenti sviluppati e di proprietà di Google.

Perché c’è una differenza tra i punteggi di PageSpeed Insights e Lighthouse?

I punteggi di PageSpeed Insights e Lighthouse differiscono a causa dei diversi approcci adottati da entrambi gli strumenti per testare il tuo sito web. PageSpeed Insights si basa sui dati in tempo reale raccolti dagli utenti che visitano il tuo sito web su varie reti e dispositivi. Lighthouse testa il tuo sito web in un ambiente controllato con condizioni prefissate: la stessa rete e gli stessi dispositivi simulati.