Acing della valutazione di PageSpeed ​​Insights di Google

Se sei un imprenditore, sei interessato a ottenere migliori classifiche di ricerca per il tuo sito web. Se sei uno sviluppatore, dovrai soddisfare le esigenze del cliente e creare un sito in grado di posizionarsi bene. Google considera centinaia di caratteristiche quando determina l'ordine dei siti Web nella sua pagina di posizionamento sui motori di ricerca (SERP).

La velocità della pagina è stata ufficialmente citata come un importante attributo di ranking a metà del 2018. In questo articolo, spiegheremo i punteggi delle prestazioni a cui gli imprenditori dovrebbero prestare attenzione: PageSpeed ​​Insights. Approfondiremo alcuni dettagli tecnici che aiuteranno gli sviluppatori di software ad apportare miglioramenti in casi complicati, come quelli relativi alle applicazioni a pagina singola.

Perché il test di PageSpeed ​​Insights di Google è importante

Quando Google ha introdotto PageSpeed ​​Tools nel 2010, la maggior parte dei proprietari di siti web ne ha avuto conoscenza. Chi non l'ha fatto dovrebbe aprire PageSpeed ​​Insights per controllare i propri siti.

Il servizio fornisce dettagli sulle prestazioni di un sito Web sia su browser desktop che mobili. È facile perdere il fatto che puoi passare da uno all'altro utilizzando le schede Mobile e Desktop nella parte superiore dell'analisi:

Poiché i dispositivi mobili sono compatti e mirano a preservare la durata della batteria, i loro browser Web tendono a mostrare prestazioni inferiori rispetto ai dispositivi che eseguono sistemi operativi desktop, quindi aspettati che il punteggio del desktop sia più alto.

Le grandi aziende tecnologiche non segneranno in rosso in nessuna area, ma i siti più piccoli con budget più ristretti potrebbero farlo. Gli imprenditori possono anche eseguire PageSpeed ​​Insights sui siti dei loro concorrenti e confrontare i risultati con i propri per vedere se hanno bisogno di investire per migliorare le prestazioni.

Quale punteggio è sufficiente per superare la valutazione PageSpeed?

PageSpeed ​​utilizza le metriche di Core Web Vitals per fornire una valutazione pass/fail.

Questo strumento ha tre punteggi:

1. PageSpeed ​​mostra il punteggio delle prestazioni in modo ben visibile in un cerchio colorato nella sezione Diagnostica problemi di prestazioni. Viene calcolato utilizzando le macchine virtuali integrate di PageSpeed ​​con caratteristiche corrispondenti al dispositivo mobile o desktop medio. Tieni presente che questo valore è per il caricamento della pagina e per la macchina virtuale di PageSpeed ​​e non è considerato dal motore di ricerca di Google.

   Questa cifra è utile quando gli sviluppatori implementano modifiche a un sito Web, poiché consente loro di verificare l'effetto delle modifiche sulle prestazioni. Tuttavia, il motore di ricerca di Google considera solo i punteggi dettagliati.

2. I punteggi dettagliati per una pagina specifica, e per quelle che PageSpeed ​​considera simili alla pagina analizzata, sono calcolati dalle statistiche che i browser Chrome raccolgono su computer reali e inviano a Google. Ciò significa che le prestazioni su Firefox, Safari e altri browser non Chromium non vengono prese in considerazione.

3. Il riepilogo di tutte le pagine del sito si ottiene allo stesso modo del punteggio di una singola pagina. Per accedervi, seleziona la scheda Origine invece della scheda Questo URL. L'URL elencato sotto la barra delle schede sarà diverso, poiché Origin visualizzerà la pagina principale del sito (solo dominio).

Google aggiorna costantemente l'elenco delle metriche considerate da PageSpeed, quindi la migliore fonte di ciò che è importante è la sezione Experience / Core Web Vitals in Google Search Console, supponendo che tu abbia già aggiunto il tuo sito web lì.

Per superare il Core Web Vitals Assessment, tutti i punteggi devono essere verdi:

Affinché i valori siano verdi, la pagina deve ottenere un punteggio di almeno il 75% nel test e molti utenti devono sperimentare valori uguali o migliori. La soglia differisce per ogni punteggio ed è significativamente più alta per FID.

Per comprendere meglio i valori, fare clic sul titolo della partitura:

Questo si collega a un post del blog che spiega le soglie per la categoria specificata in modo più dettagliato.

I dati vengono accumulati per 28 giorni e ci sono altre due differenze principali rispetto a ciò che potrebbero sperimentare gli utenti reali:

1. Le prestazioni dei dispositivi reali e le velocità di Internet variano, quindi questo test produce risultati diversi dai risultati della macchina virtuale di PageSpeed.
2. Le valutazioni dettagliate vengono calcolate durante l'intera vita della pagina, prendendo i valori peggiori da ogni intervallo di cinque secondi in cui la pagina è aperta.

Se molti utenti di un sito vivono in regioni con accesso a Internet lento e utilizzano dispositivi obsoleti o con prestazioni insufficienti, la differenza può essere sorprendente. Questo non è uno dei consigli di miglioramento di PageSpeed ​​Insights. A prima vista, non è ovvio come affrontare questo problema, ma cercheremo di spiegarlo in seguito.

Migliorare i punteggi utilizzando i consigli di PageSpeed ​​Insights

La parte principale della valutazione deriva dal modo in cui la maggior parte degli utenti apre la pagina. Nonostante il fatto che non tutti gli utenti visitino un sito Web per un lungo periodo di tempo e la maggior parte visiti un sito Web occasionalmente, tutti gli utenti vengono considerati nelle valutazioni, quindi il miglioramento della velocità di caricamento della pagina, che ha un impatto su tutti, è un buon punto di partenza.

Possiamo trovare consigli nella sezione Opportunità sotto i risultati della valutazione.

Possiamo espandere ogni articolo e ottenere consigli dettagliati per miglioramenti. Ci sono molte informazioni, ma ecco i suggerimenti più basilari e importanti:

• Migliora la velocità di risposta del server. Ad esempio, se stai utilizzando l'hosting condiviso, aggiorna il tuo piano o migra a un server privato virtuale (VPS) o anche a un server dedicato. Inoltre, non tutti gli host sono uguali. Prova a scegliere un hosting affidabile con un buon hardware e garanzie di uptime.
• Riduci il volume di traffico necessario per aprire il tuo sito. Per ottenere ciò, puoi sostituire le immagini con quelle ottimizzate: cambiarne il formato, regolare la risoluzione e la compressione, sostituire le immagini animate con quelle statiche se necessario, ecc. I sistemi di gestione dei contenuti più diffusi dispongono di plug-in che semplificano questo processo.
• Memorizza più dati nella cache. Il modo più semplice per farlo è utilizzare una rete di distribuzione dei contenuti (CDN) come Cloudflare per i contenuti statici (immagini, stili, script, pagine che non cambiano). È possibile configurare le regole di memorizzazione nella cache per ottimizzare le prestazioni.

Ora diamo un'occhiata a fattori più complicati, in cui un programmatore esperto può aiutare.

Come eseguire il debug dei punteggi durante la vita della pagina

Come accennato, Google Search Console considera i punteggi medi ottenuti dai browser basati su Chromium negli ultimi 28 giorni e include anche i valori per l'intera vita della pagina.

L'impossibilità di vedere cosa succede durante la vita della pagina è un problema. La macchina virtuale di PageSpeed ​​non può tenere conto delle prestazioni della pagina una volta caricata e gli utenti interagiscono con essa, il che significa che gli sviluppatori del sito non avranno accesso ai consigli per i miglioramenti.

La soluzione consiste nell'includere la libreria di Google Chrome Web Vitals nella versione per sviluppatori di un progetto del sito per vedere cosa sta succedendo mentre un utente interagisce con la pagina.

Varie opzioni su come includere questa libreria sono nel suo file README.md su GitHub. Il modo più semplice è aggiungere il seguente script. È stato ottimizzato per visualizzare i valori durante la durata della pagina nel <head> del modello principale:

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

Si noti che il calcolo Cumulative Layout Shift (CLS) e Largest Contentful Paint (LCP) è disponibile solo per i browser basati su Chromium, inclusi Chrome, Opera, Brave (disabilita Brave Shields per far funzionare la libreria) e la maggior parte degli altri browser moderni, ad eccezione di Firefox , che si basa su un motore Mozilla e sul browser Safari di Apple.

Dopo aver aggiunto lo script e ricaricato la pagina, apri gli strumenti per sviluppatori del browser e passa alla scheda Console.

Per vedere come vengono calcolati questi valori per la versione mobile, passa al dispositivo mobile utilizzando la barra degli strumenti Dispositivo. Per accedervi, fai clic sul pulsante Attiva/disattiva barra degli strumenti del dispositivo negli strumenti per sviluppatori del tuo browser.

Questo aiuterà a individuare i problemi. Espandendo la riga nella console verranno mostrati i dettagli su ciò che ha attivato la modifica del punteggio.

Il più delle volte, il consiglio automatico per altri punteggi è sufficiente per avere un'idea su come migliorarli. Tuttavia, CLS cambia dopo che la pagina è stata caricata con le interazioni dell'utente e semplicemente potrebbero non esserci consigli, specialmente per le applicazioni a pagina singola. Potresti vedere un punteggio perfetto di 100 nella sezione Diagnostica problemi di prestazioni, anche se la tua pagina non riesce a superare la valutazione per i fattori considerati dal motore di ricerca.

Per quelli di noi che lottano con CLS, questo sarà utile. Espandi il record di registro, quindi le voci, la voce specifica, le fonti, la fonte specifica e confronta currentRect con previousRect :

Ora che possiamo vedere cosa è cambiato, possiamo identificare alcuni modi per risolverlo.

Riduzione dello spostamento cumulativo del layout

Di tutti i punteggi, CLS è il più difficile da capire, ma è fondamentale per l'esperienza dell'utente. Lo spostamento del layout si verifica quando un elemento viene aggiunto al modello a oggetti del documento (DOM) o viene modificata la dimensione o la posizione di un elemento esistente. Fa sì che gli elementi al di sotto di quell'elemento si spostino e l'utente si sente come se non potesse controllare cosa sta succedendo, costringendolo a lasciare il sito web.

È relativamente facile gestirlo su una semplice pagina HTML. Imposta gli attributi di larghezza e altezza per le immagini in modo che il testo sottostante non venga spostato durante il caricamento. Questo probabilmente risolverà il problema.

Se la tua pagina è dinamica e gli utenti ci lavorano come con un'applicazione, considera i seguenti passaggi per risolvere i problemi di CLS:

1. Imposta la pagina in modo che mostri il contenuto 500 millisecondi dopo che l'utente ha fatto clic su un pulsante o un collegamento senza che si attivi CLS.
2. Modifica i parametri che non causano lo spostamento di altri elementi DOM: sfondo, colore, ecc.
3. Assicurati che altri elementi non si spostino quando modifichi la dimensione o la posizione di un elemento.

Consigli più dettagliati sono disponibili nella pagina Google Developers Optimize CLS.

Come 500 millisecondi possono ridurre il CLS

Per illustrare come utilizzare la soglia di 500 millisecondi, utilizzeremo un esempio relativo al caricamento di un'immagine.

Normalmente quando un utente carica un file, lo script aggiunge un elemento <img> al DOM, quindi il browser client scarica l'immagine dal server. Il recupero di un'immagine da un server può richiedere più di 500 millisecondi e può causare uno spostamento del layout.

Ma c'è un modo per ottenere l'immagine più velocemente poiché è già sul computer client, e quindi creare l'elemento <img> prima che scada la scadenza di 500 millisecondi.

Ecco un esempio universale su ECMAScript puro senza librerie che funzionerà sulla maggior parte dei browser moderni:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

Come abbiamo visto in precedenza, risolvere questo tipo di problemi potrebbe richiedere agilità mentale. Con i dispositivi mobili, in particolare quelli economici, e con Internet mobile lento, l'arte degli anni '90 dell'ottimizzazione delle prestazioni diventa utile e gli approcci di programmazione web della vecchia scuola possono ispirare la nostra tecnica. I moderni strumenti di debug del browser aiuteranno in questo.

Aggiorna Google Search Console

Dopo aver individuato ed eliminato i problemi, il motore di ricerca di Google potrebbe impiegare del tempo per registrare le modifiche. Per aggiornare i risultati un po' più velocemente, fai sapere a Google Search Console che hai risolto i problemi.

Seleziona la pagina su cui stai lavorando utilizzando la casella della proprietà Cerca nell'angolo in alto a sinistra. Quindi vai a Core Web Vitals nel menu dell'hamburger a sinistra:

Fai clic sul pulsante Apri rapporto in alto a destra nel rapporto per dispositivi mobili o desktop. (Se hai riscontrato problemi con entrambi, ricorda di ripetere le stesse azioni per il secondo rapporto in un secondo momento.)

Successivamente, vai alla sezione Dettagli sotto il grafico e fai clic sulla riga con l'avviso di convalida non riuscita.

Quindi fare clic sul pulsante Visualizza dettagli per questo problema.

E infine fai clic su Avvia nuova convalida.

Non aspettarti risultati immediati. La convalida può richiedere fino a 28 giorni.

L'ottimizzazione è una lotta continua

L'ottimizzazione SEO è un processo continuo e lo stesso vale per l'ottimizzazione delle prestazioni. Man mano che il tuo pubblico cresce, i server ricevono più richieste e le risposte diventano più lente. L'aumento della domanda di solito significa che nuove funzionalità vengono aggiunte al tuo sito e possono influire sulle prestazioni.

Quando si tratta dell'aspetto costi/benefici dell'ottimizzazione delle prestazioni, è necessario trovare il giusto equilibrio. Gli sviluppatori non hanno bisogno di ottenere i migliori valori su tutti i siti, in ogni momento. Concentrarsi su ciò che causa i problemi di prestazioni più significativi; otterrai risultati più velocemente e con meno sforzo. Le grandi aziende possono permettersi di investire molte risorse e ottenere tutti i punteggi, ma questo non è il caso delle piccole e medie imprese. In realtà, una piccola impresa molto probabilmente ha solo bisogno di eguagliare o superare le prestazioni dei suoi concorrenti, non di pesi massimi del settore come Amazon.

Gli imprenditori dovrebbero capire perché l'ottimizzazione del sito è fondamentale, quali aspetti del lavoro sono più importanti e quali competenze ricercare nelle persone che assumono per farlo. Gli sviluppatori, da parte loro, dovrebbero tenere sempre a mente le prestazioni, aiutando i propri clienti a creare siti che non solo siano veloci per gli utenti finali, ma che abbiano anche un buon punteggio in PageSpeed ​​Insights.