Come raggiungere 100 in Google PageSpeed ​​Insights (su WordPress)

Non sarebbe fantastico se ci fosse uno strumento per aiutarti a rendere più veloce il tuo sito web? Beh, c'è! Google PageSpeed ​​Insights è il nome ed è un servizio gratuito a portata di mano per risolvere i problemi del tuo sito web lento. In questo articolo vedremo cos'è, come funziona e come puoi raggiungere l'inafferrabile punteggio di Google PageSpeed ​​Insights 100/100 in WordPress.

Che cos'è Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights è uno strumento online per misurare la velocità e l'esperienza utente del tuo sito web. Misura il tempo di caricamento di un sito su desktop e dispositivi mobili e visualizza varie metriche sulle prestazioni di un sito. Se le metriche vengono giudicate non ottimali, lo strumento fornisce suggerimenti su come migliorarle.

Basta andare su Google PageSpeed ​​Insights, inserire un URL e premere Analizza. Google giudica il tuo sito su dispositivi mobili e desktop. Potresti scoprire di ottenere un punteggio migliore su uno rispetto all'altro.

Google dava un punteggio complessivo di 100 per una pagina web, ma non lo fa più.

Invece, Google misura tre statistiche che chiama Core Web Vitals . Questi sono:

• Largest Contentful Paint (LCP) : quanto velocemente si carica il contenuto principale del sito. Questo dovrebbe essere di 2,5 secondi o meno per una buona esperienza utente.
• First Input Delay (FID) : quanto è reattivo il sito all'input dell'utente. Il FID deve essere di 100 millisecondi o meno.
• Cumulative Layout Shift (CLS) : misura la stabilità visiva di una pagina web. È preferibile un punteggio CLS di 0,1 o inferiore.

Inoltre, Google misura quanto segue:

• First Contentful Paint (FCP) : il tempo impiegato dalla pagina Web per iniziare il rendering sullo schermo. Un buon punteggio FCP è di 1,8 secondi o meno.
• Interaction to Next Paint (INP) : misura la reattività della pagina alle interazioni dell'utente. Un sito Web veramente reattivo ha un INP di 200 millisecondi o meno.
• Time to First Byte (TTFB) : il tempo impiegato per l'invio del primo byte di dati dopo una richiesta del server. Un TTFB di 0,8 secondi o meno è l'ideale.

Al di sotto, nella sezione Diagnostica problemi di prestazioni, Google PageSpeed ​​Insights fornisce quattro punteggi: Prestazioni, Accessibilità, Best Practice e SEO. 90 o più è un buon punteggio, da 50 a 89 indica che è possibile ottenere miglioramenti e qualsiasi valore inferiore a 50 è negativo.

Di seguito sono riportate Opportunità e Diagnostica di Google. Questi sono i modi in cui puoi migliorare indirettamente il tuo punteggio Performance. La metrica delle prestazioni ha la maggiore influenza sulla velocità del tuo sito.

Prima di capire come migliorare le prestazioni del tuo sito web, diamo un'occhiata al motivo per cui la velocità del sito web è importante.

Perché è importante la velocità del sito web?

La velocità del sito web ha un enorme impatto sul comportamento degli utenti e dei consumatori.

Il tempo medio necessario per caricare completamente una pagina di destinazione mobile è di 22 secondi [1] .

La probabilità di rimbalzo aumenta del 32% quando il tempo di caricamento della pagina passa da 1 secondo a 3 secondi [2] .

Il 53% delle visite viene abbandonato se un sito mobile impiega più di 3 secondi per caricarsi [3] .

Ovviamente, se gestisci un sito di e-commerce, un sito lento si traduce in una riduzione delle conversioni e questo è qualcosa che vorrai affrontare. Il tasso di conversione diminuisce con il tempo impiegato per caricare un sito [4] :

• Le pagine caricate in 2,4 secondi avevano un tasso di conversione dell'1,9%.
• A 3,3 secondi, il tasso di conversione era dell'1,5%
• A 4,2 secondi, il tasso di conversione era inferiore all'1%
• A 5,7+ secondi, il tasso di conversione è stato dello 0,6%

Punteggio PageSpeed ​​Insights elevato rispetto alla velocità effettiva della pagina

Google calcola il punteggio di PageSpeed ​​Insights sia dai dati di laboratorio (raccolti in condizioni controllate) sia dai dati sul campo (raccolti da utenti reali in natura).

Per testare la velocità effettiva della tua pagina puoi utilizzare strumenti online come GTmetrix o il test di velocità di Pingdom.

Utilizzando questi strumenti puoi testare il tuo sito in diverse località.

Puoi vedere su GTmetrix che il tempo di caricamento della pagina per un server di prova a San Antonio, in Texas, è di 666 ms, un punteggio molto buono.

A Hong Kong, il tempo di caricamento della pagina è un po' più lungo: 1,4 secondi.

Pingdom mostra anche un tempo di caricamento rapido di 850 ms per un test a Washington DC, ma un tempo di caricamento più lento di 1,06 secondi a Tokyo, in Giappone.

Lo strumento Uptrends ti consente di eseguire test su dispositivi mobili e desktop. Ecco il risultato per il sito WP Shout di Parigi, Francia su iPad Air – un tempo di caricamento di 1,9 secondi:

Quindi sembra esserci una correlazione tra il punteggio di Google PageSpeed ​​Insights e la velocità effettiva della pagina.

Come ottenere il punteggio ideale di Google PageSpeed ​​Insights 100 su WordPress

Ora che sai perché un punteggio elevato di Google PageSpeed ​​Insights è importante, è il momento di esaminare i modi per migliorarlo.

I modi per migliorare il punteggio di Google PageSpeed ​​Insights

1. Ottimizza le immagini

L'ottimizzazione delle immagini per il Web è un modo semplice per migliorare il punteggio delle prestazioni.

Avrai bisogno di un plug-in per la compressione delle immagini come Optimole.

Questo plug-in può comprimere le tue immagini in un file di dimensioni inferiori in modo che siano più veloci da caricare. Puoi usarli per tutti i nuovi caricamenti di immagini e per quelli esistenti. La cosa fantastica di Optimole è che consegnerà anche le tue immagini attraverso un CDN, rendendo la consegna ancora più rapida.

Può anche convertire le tue immagini nel formato WebP, che ha dimensioni inferiori rispetto ai file JPG o PNG. Questo ti aiuterà a passare la raccomandazione Servire le immagini nei formati di nuova generazione . Inoltre, puoi ridimensionare qualsiasi immagine più grande che hai impostando una larghezza massima per loro.

Assicurati che le tue immagini abbiano gli attributi di larghezza e altezza specificati per soddisfare gli elementi Immagine non hanno opportunità di larghezza e altezza esplicite .

Il plug-in Optimole include anche il caricamento lento, che carica solo immagini o video quando un utente li scorre verso il basso. Questo aiuta con l'opportunità di rinviare le immagini fuori schermo , mostrata di seguito.

Un altro metodo per ridurre le dimensioni del file immagine consiste nell'utilizzare le immagini SVG. Gli SVG sono file vettoriali in modo che possano essere facilmente ridimensionati senza alcun impatto sulla dimensione del file. Non sono supportati nativamente in WordPress ma puoi aggiungerli alla tua libreria multimediale con un plug-in come SVG Support o Safe SVG.

2. Evitare una dimensione DOM eccessiva

Cos'è il DOM? DOM è l'acronimo di Document Object Model ed è una struttura ad albero con tutti gli elementi HTML, gli attributi e il testo della pagina inclusi.

Un paio di strategie per ridurre le dimensioni del DOM sono suddividere lunghe pagine Web in sezioni più piccole ed evitare di nascondere i nodi DOM con la dichiarazione {display:none;} nei CSS.

Un fattore che può aumentare la dimensione del DOM è l'utilizzo di un page builder. I costruttori di pagine tendono ad aumentare il numero di elementi <div> su una pagina.

Se usi Elementor, dalla versione 3.0 alcuni wrapper HTML sono stati rimossi, il che ha ridotto le dimensioni del DOM.

Oppure potresti passare all'utilizzo di Gutenberg invece di un generatore di pagine, come ha fatto Chris Lema.

Puoi trovare ulteriori suggerimenti su come evitare una dimensione DOM eccessiva in questo post.

3. Ottimizza JavaScript e CSS

I file CSS e JS possono essere minimizzati e compressi per migliorare le prestazioni. La minificazione rimuove tutti gli spazi da un file CSS o JS, mentre la compressione GZIP rimuove i caratteri ripetuti come {.

I plugin di WordPress che ti consentono di minimizzare CSS o JS includono Autoptimize (gratuito) e WP Rocket (a pagamento).

La minificazione può danneggiare il tuo sito, quindi i plug-in che minificano hanno un'opzione di esclusione dei file dalla minificazione se hai un problema.

WP Rocket ha anche la possibilità di combinare i tuoi file CSS e JS in un unico file, riducendo le richieste. Tuttavia, non vorrai farlo se il tuo server web utilizza HTTP/2. Puoi verificare se il tuo server esegue HTTP/2 per verificare prima.

Puoi attivare la compressione GZIP con la maggior parte dei plug-in di memorizzazione nella cache. Se il tuo server web è Apache o LiteSpeed, il plugin può scrivere direttamente sul tuo file .htaccess o fornire linee da copiare e incollare su di esso. Se utilizzi NGINX o IIS, Hummingbird fornisce anche la configurazione per abilitare la compressione su questi server.

Se sul tuo sito sono presenti CSS o JS che non vengono utilizzati, è il momento di rimuoverli. Puoi utilizzare Chrome DevTools per trovare CSS e JS inutilizzati, che molto probabilmente provengono da un plug-in.

Puoi anche utilizzare CSS Saver di Rapidload per vedere quali CSS puoi perdere dal tuo sito web:

4. Elimina le risorse che bloccano il rendering

CSS e JS che bloccano il rendering sono file che vengono contrassegnati come bloccanti per il primo disegno della tua pagina web.

Il plug-in Autoptimize può porre rimedio a questo problema e, di conseguenza, migliorare i punteggi First Contentful Paint e Largest Contentful Paint.

5. Ridurre il tempo di risposta iniziale del server

Il tempo di risposta del server dipende da alcuni fattori: il tema e i plug-in che utilizzi e il tipo di web hosting che possiedi.

Prendi in considerazione la rimozione di eventuali plug-in in eccesso che non utilizzi o il passaggio a un tema leggero, come Astra.

Per l'hosting, consigliamo l'hosting WordPress gestito rispetto all'hosting web condiviso. Gli host WordPress gestiti includono l'ottimizzazione del server come parte del servizio.

6. Assicurati che il testo rimanga visibile durante il caricamento del webfontAssicurati che il testo rimanga visibile durante il caricamento del webfont

Se utilizzi caratteri web, la raccomandazione di Google impedirà al testo delle tue pagine di essere invisibile durante il caricamento.

La raccomandazione suggerisce di aggiungere font-display: swap; alla tua dichiarazione @font-face nel tuo foglio di stile.

Lo screenshot seguente mostra come aggiungere questa proprietà utilizzando il plug-in Asset CleanUp.

7. Mantieni bassi i conteggi delle richieste e le dimensioni dei trasferimenti ridotte

Google PageSpeed ​​Insights registra il numero di file richiesti dal server web e la dimensione di questi file.

Se hai numeri grandi qui, puoi ridurli di:

• Ottimizzazione delle immagini e dei file multimediali. Si consiglia di utilizzare i file video al posto delle GIF animate.
• Ottimizzazione di CSS e JS
• Ottimizzazione dei font e degli script di terze parti
• Riduzione delle dimensioni del file HTML

8. Evitare di concatenare le richieste critiche

Le richieste critiche sono richieste essenziali per il caricamento della pagina. Ad esempio, un logo potrebbe essere una richiesta critica.

Catene lunghe e catene contenenti grandi download sono considerate dannose per la velocità del tuo sito web. Hanno un impatto sulla prima pittura contenta e sulla pittura contenta più grande.

Secondo Google, per evitare di concatenare richieste critiche, dovresti:

• Riduci al minimo il numero di risorse critiche: eliminale, rimandane il download, contrassegnale come asincrone e così via.
• Ottimizza il numero di byte critici per ridurre il tempo di download (numero di round trip).
• Ottimizza l'ordine in cui vengono caricate le restanti risorse critiche: scarica tutte le risorse critiche il prima possibile per accorciare la lunghezza del percorso critico.

Puoi farlo tramite:

• Precaricamento di richieste di chiavi, immagini e caratteri utilizzando "link rel="preload" nell'HTML che li fa riferimento.
• Minimizzare CSS e JavaScript.
• Elimina le risorse che bloccano il rendering.

Puoi utilizzare un plug-in come WP Rocket per eseguire queste attività per te.

9. Evita lunghe attività del thread principale e riduci al minimo il lavoro del thread principale

Le attività lunghe del thread principale sono attività JavaScript (oltre 50 ms) che ritardano il tempo per l'interazione per l'utente.

Ridurre al minimo il lavoro del thread principale significa ridurre il tempo di analisi, compilazione ed esecuzione di JS.

Puoi ridurre la lunghezza e il tempo delle attività JavaScript:

• riducendo al minimo l'uso di plug-in gonfiati
• ospitare localmente i font e gli script di analisi
• minimizzare o rinviare JS e CSS
• caricamento pigro immagini di sfondo

Consulta il seguente articolo per ulteriori suggerimenti su come ridurre al minimo il lavoro del thread principale in WordPress.

10. Evita grandi spostamenti di layoutEvita grandi spostamenti di layout

I turni di layout contribuiscono alla metrica Cumulative Layout Shift e danno agli utenti l'impressione di saltare da una pagina all'altra.

Puoi curare questo problema:

• Aggiunta di dimensioni ai tuoi media
• Precaricamento dei font
• Ottimizzazione dei contenuti dinamici, ad esempio moduli di iscrizione alla newsletter

Per ulteriori informazioni, leggi questa guida su come correggere lo spostamento cumulativo del layout in WordPress.

11. Ridurre l'impatto del codice di terze parti

Gli script di terze parti sono quelli ospitati altrove, come il monitoraggio di Google Analytics o gli incorporamenti di YouTube.

Ove possibile, prova a ospitare gli script in locale. Non puoi farlo con YouTube, ma puoi ospitare localmente il tuo codice di analisi e i tuoi caratteri.

Puoi utilizzare il plug-in Local Google Fonts per ospitare Google Fonts sul tuo server.

Il plug-in Google Analytics locale per WordPress – memorizza nella cache le richieste esterne ospiterà il tuo Google Analytics localmente.

12. Usa un CDN

Una rete per la distribuzione di contenuti è una rete remota di server che archivia e fornisce contenuti Web agli utenti.

Un CDN può migliorare la velocità del tuo sito memorizzando nella cache i file statici (ad es. HTML, CSS e JavaScript) e servendoli da una posizione vicina a un utente. Questo aiuta a ridurre i punteggi della prima pittura con contenuto e della pittura con contenuto più grande.

Usiamo Cloudflare CDN su WP Shout. Puoi iniziare gratuitamente.

Scopri di più sul motivo per cui dovresti utilizzare un CDN e le migliori opzioni.

Conclusione su come raggiungere il punteggio 100 di Google PageSpeed ​​Insights

Abbiamo visto che ci sono parecchi fattori in gioco che determinano la velocità del sito. Questi suggerimenti ti aiuteranno a ottenere un punteggio perfetto.

Tuttavia, non dovresti concentrarti troppo sul punteggio di 100: un punteggio di 90+ ​​è comunque molto buono. Leggi il post di David sull'ottimizzazione delle prestazioni del sito per vedere cosa abbiamo fatto per migliorare i nostri punteggi.