Come migliorare i tuoi punteggi vitali web di Google Core?

Pubblicato il

(23 agosto 2020)

La prossima era sul rendimento delle pagine web

Lavoro da un paio di mesi sulle strategie per migliorare le prestazioni delle pagine web sui siti web di proprietà della mia azienda e, ad essere onesti, è un lavoro davvero interessante da condividere con voi ragazzi.

Capisco che lavorare sulle prestazioni delle pagine web non sia una novità e le persone hanno escogitato molte idee e trucchi per aumentare la velocità di caricamento della tua pagina. Ma ora sembra che non sia più abbastanza e devi passare al livello successivo !! voi ragazzi dovreste conoscere limportanza della SEO (Search Engine Optimization) e far emergere i risultati della vostra pagina web non solo nella prima pagina dei risultati di Google ma nella parte superiore della stessa prima pagina è davvero un ottimo affare! Per farla breve, ti garantisco che, dora in poi, i dati vitali web di Google Core saranno uno di questi maggiori contributori al ranking SEO dei risultati di ricerca di Google.

Breve & Semplice spiegazione su Google Core Web Vitals

Core Web Vitals, introdotta nel primo trimestre di questanno, sono un insieme di metriche relative a velocità, reattività e stabilità visiva della tua pagina web.

Google li ha definiti come i principali dati vitali web:

  • La pittura più grande con contenuti : il tempo necessario per il caricamento del contenuto principale di una pagina. Una misurazione LCP ideale è 2,5 secondi o più veloce.
  • Ritardo primo input : il tempo impiegato da una pagina per diventare interattiva. Una misura ideale è inferiore a 100 ms .
  • Spostamento cumulativo del layout : la quantità di spostamento imprevisto del layout del contenuto visivo della pagina. Una misura ideale è inferiore a 0,1 .

Questo insieme di metriche è stato progettato per aiutare i proprietari di siti a misurare lesperienza utente che stanno fornendo in termini di caricamento, interattività e stabilità visiva.

In generale, dora in poi il rendimento della tua pagina sarà classificato come di seguito.

Elenco completo delle metriche considerate per le metriche sul rendimento della pagina.

La sezione successiva parla fondamentalmente delle idee o dei metodi per migliorare le prestazioni di caricamento della pagina e i punteggi CWV.

Suggerimenti per migliorare i tuoi punteggi vitali web fondamentali

Di seguito sono riportati alcuni metodi che mi ha aiutato a migliorare drasticamente i miei punteggi Core Web Vitals, nonché a migliorare le prestazioni complessive della pagina.

  1. Utilizza in modo efficace il browser e la cache CDN (migliora FID e LCP)
    Questo è un approccio molto semplice ch per migliorare i tuoi punteggi FID e LCP. Assicurati che le tue risorse statiche siano servite da una CDN (se è AWS, puoi memorizzarla nella cache in Cloudfront). Quindi questo si traduce nellottenere rapidamente le risorse nel tuo browser. Per migliorare il secondo caricamento del tempo, assicurati che gli asset che hanno raggiunto sul lato client siano memorizzati nella cache del browser.
    cache-control: max-age=120 – significa che la risorsa restituita è valida per 120 secondi, dopodiché il browser deve richiedere una versione più recente.
    Puoi anche memorizzare nella cache le tue pagine dinamiche anche in la tua CDN con il valore TTL corretto in base al comportamento dellapplicazione.
  2. Imposta attributi o dimensioni esatte per i tuoi media e annunci (migliora il CLS)
    Questo è qualcosa di molto importante per migliorare i tuoi punteggi CLS. Assicurati di avere un height:XXpx; width: YYpx impostato correttamente per la tua immagine o per qualsiasi tag multimediale. Anche in questo caso è molto importante almeno per i componenti che sono above the fold. Una scorciatoia per questo è che se stai esaurendo le idee per ottenere laltezza esatta dellimmagine, puoi impostare come height:auto; che mi ha davvero aiutato. Oltre ai media, se il tuo sito visualizza annunci, assicurati di aver impostato gli slot pubblicitari appropriati con dimensioni adeguate poiché spingere verso lalto o verso il basso i componenti nella pagina farà sicuramente diminuire il tuo punteggio CLS. Quindi tieni docchio anche gli annunci!
  3. Caricamento lento delle immagini con risoluzione corretta in base al tipo di dispositivo (migliora lLCP)
    Questa è davvero una vittoria veloce per te! Ci sono molti pacchetti di caricamento lento nel mondo che puoi usare nella tua pagina web per caricare lentamente tutte le immagini sulla tua pagina.Ciò ridurrà il peso complessivo della pagina e il tempo di caricamento per il rendering della pagina nel browser. Un altro elemento importante è che, pre-definire la risoluzione dellimmagine che si desidera caricare in base al tipo di dispositivo. Non dovresti caricare le immagini con la stessa risoluzione su tipi di dispositivi diversi.
  4. Utilizza in modo efficace SSR e CSR nella tua pagina web (migliora FID & LCP)
    Dovresti sapere che Google promuove e incoraggia le pagine con rendering lato server (SSR) per ottenere buoni valori SEO. Ma idealmente è un compromesso tra SEO e prestazioni di caricamento della pagina. Se la tua pagina è troppo grande in termini di contenuto e se decidi di renderizzare lintera pagina nel server, ci vorrà sicuramente più tempo per caricare lintera pagina così come la pagina anche il peso sarà alto. Per farla breve, il mio consiglio è che è meglio eseguire il rendering SSR per i componenti della pagina che appaiono above the fold e renderizzare il resto dei componenti dal lato client che appare below the fold. In questo modo, lutente ottiene la pagina caricata above the fold e il resto della pagina viene visualizzato in modo asincrono senza ostacolare lesperienza dellutente.
  5. Usa codice Suddividere & suddividere le risorse in blocchi (migliora il FID & LCP)
    Non è sempre una buona idea avere risorse enormi (qualsiasi cosa superiore a 100 KB è enorme) (soprattutto file JS) nella tua applicazione. Quindi è meglio utilizzare pacchetti come “webpack” per suddividere risorse pesanti in piccoli blocchi che caricheranno le tue risorse in modo asincrono nel browser (se abiliti il ​​protocollo h2). Puoi anche sfruttare le funzionalità di suddivisione del codice per suddividere i componenti della pagina in file separati anziché comprimerli in un unico file HTML.
  6. Comprimi tutte le tue risorse statiche con la compressione Brotli (migliora LCP)
    Incoraggio a usare Brotli per comprimere le tue risorse statiche che offre una co rapporti di compressione rispetto ad altre librerie sul mercato. Allo stesso tempo, tieni presente che quando utilizzi Brotli con un rapporto di compressione più elevato, aumenterà sicuramente il tempo di compilazione e creazione del pacchetto nel percorso della pipeline DevOps. Per me, è andato bene sacrificare il tempo di compilazione dellapplicazione poiché ottengo un valore migliore in termini di prestazioni di caricamento della pagina.
  7. Ottimizza la richiesta API e contenuto della risposta (migliora il FID & LCP)
    Questo è estremamente importante da considerare poiché ogni byte è importante qui quando parliamo di prestazioni della pagina. Spero che non ti pentirai di tornare indietro e controllare le tue richieste API & risposte per popolare la tua pagina. Assicurati di recuperare solo i dati di cui hai bisogno per la tua pagina essere visualizzato dalle risposte dellAPI. Unaltra cosa stupida che potresti commettere è che le tue chiamate API vengono invocate internamente, invece di utilizzare endpoint pubblici o tramite Internet, perché è sempre costoso in termini di tempo in cui stanno invocando le tue API tramite Internet quando le tue API sono ospitate nella stessa sottorete o almeno nella stessa rete!
  8. Riduci la pagina / documento generale size (migliora lLCP)
    Idealmente, se la tua pagina di destinazione è pesante (classificherei qualsiasi pagina con> 80 KB come pesante), questo contribuirà sicuramente in modo negativo al punteggio LCP poiché aumenterà proporzionalmente la velocità di recupero e download della tua pagina. Quindi assicurati di non ricevere grossi blocchi di dati inutilizzati dal lato server e carica solo i dati necessari per il rendering della tua pagina.
  9. Usa formati di immagine NEXT-GEN (migliora LCP)
    JPEG 2000, JPEG XR e WebP sono formati di immagine che hanno caratteristiche di compressione e qualità superiori rispetto ai loro precedenti JPEG e Controparti PNG. La codifica delle immagini in questi formati anziché in JPEG o PNG significa che verranno caricate più velocemente e consumeranno meno dati cellulari. Puoi utilizzare qualsiasi tipo di strumento sul mercato per convertire le immagini in immagini formattate NEXT-GEN oppure puoi persino creare un servizio di immagini runtime che può eseguire una conversione di immagini in tempo reale da JPEG a WebP e servire nel browser.
  10. Abilita il fallback ai caratteri supportati dal browser nativo (migliora il FID)
    È dimostrato che i caratteri può davvero ridurre i punteggi delle prestazioni se il browser ritarda a caricare il carattere personalizzato utilizzato nella tua applicazione a meno che non sia un carattere predefinito supportato dal browser. In questo caso, una rapida vittoria per te è avere un approccio di riserva nel caricamento il tuo carattere con i caratteri che sono supportati per impostazione predefinita dal browser. Di seguito è riportato uno snippet di codice di esempio su come avere un approccio di riserva con altri caratteri.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Tutti i suggerimenti forniti sopra potrebbero essere implementati in modo incrementale nella tua applicazione e di nuovo come menzionato prima che i punteggi di Core Web Vitals siano evoluti da utenti reali dati e non più da eventuali dati “Lab”. Quindi ci vuole tempo per riflettere i miglioramenti nel punteggio che è per lo più 28 giorni di tempo per riflettere. Puoi ancora utilizzare lo strumento Page Speed da google – https://developers.google.com/speed/pagespeed/insights/ per ottenere i tuoi punteggi CWV.

Spero che questo ti aiuti e ti auguro tutto il successo nei tuoi lavori! Salute!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *