Vitali principali del web

Cosa sono i Core Web Vitals?

I Core Web Vitals sono un insieme di metriche stabilite da Google per migliorare l'esperienza dell'utente sulle pagine web. In altre parole, sono fattori che il motore di ricerca considera per dare un punteggio all'esperienza della pagina, che corrisponde a diverse sfaccettature di essa.

Il Core Web Vitals cerca di rispondere a tre domande:

  • Quanto è veloce il caricamento di una pagina?
  • Quanto tempo ci vuole perché un sito web diventi interattivo?
  • E per stabilizzare?

Bene, Google ha indicato che il Core Web Vitals si evolverà nel tempo. Ma al momento, si concentra su tre aspetti che rispondono alle domande di cui sopra.

vitali del web del nucleo

 

Vernice a più alto contenuto (LCP)

LCP si riferisce al tempo necessario per caricare l'elemento di contenuto più grande che l'utente può vedere. Google ha sottolineato che gli elementi disposti in quello che è noto come "above the fold" devono essere disponibili rapidamente ed essere leggibili.

Gli elementi mostrati all'utente una volta che ha cliccato sullo schermo non influenzano l'LCP. Quando si parla di elemento di contenuto più grande, ci si può riferire a un'immagine o a un blocco di testo.

Per Google, il tempo massimo di caricamento dell'LCP per fornire una buona esperienza all'utente sarebbe meno di 2,5 secondi.

 

Ritardo del primo ingresso (FID)

FID si riferisce all'interattività, cioè, quanto tempo impiega la pagina a rispondere quando l'utente interagisce con uno qualsiasi degli elementi che contiene. In altre parole, è la velocità con cui il browser agisce e produce un risultato dal momento in cui un utente fa clic.

Il motore di ricerca considera che un buon FID dovrebbe essere inferiore a 100 millisecondi. Sono necessari miglioramenti da 100 a 300 millisecondi, e un valore superiore a 300 millisecondi potrebbe essere allarmante.

 

Spostamento cumulativo del layout (CLS)

Questa metrica si riferisce al caricamento di elementi che modificano la visualizzazione della pagina mentre reagisce. Ciò che si cerca in questo caso è di garantire che il contenuto sullo schermo sia stabile e non cambi mentre vengono caricate altre risorse.

Google trova (giustamente) estremamente fastidioso quando alcuni elementi della pagina si caricano e causano lo spostamento di altri. Il risultato è spesso che l'utente finisce per cliccare su un sito che non voleva. E il motore di ricerca considera un buon CLS sotto 0,1 secondi.

 

Perché sono importanti?

Già a maggio 2020, Google ci aveva avvertito: sarebbe arrivato il momento in cui diversi segnali che misurano l'esperienza on-page dell'utente sarebbero stati presi in considerazione ai fini del ranking di ricerca. Questo avrà un impatto enorme sul SEO.

Senza entrare nei dettagli, abbiamo iniziato a sentire parlare di Core Web Vitals, che sono già fondamentali per una ragione: perché Google ha annunciato nel novembre 2020 che entro maggio 2021, sarebbero stati un fattore di posizionamento sostanziale.

Google aveva promesso di annunciare con sei mesi di anticipo l'aggiornamento dell'esperienza della pagina e lo ha fatto sul suo blog ufficiale il 10 novembre dello scorso anno.

Pertanto, le pagine che non soddisfano i valori considerati appropriati in queste metriche avranno difficoltà ad apparire nelle prime posizioni della SERP.

In questo contesto, il gigante della ricerca raccomanda di prepararsi in anticipo per soddisfare queste metriche sul vostro sito. Bisogna essere pronti quando arriva il momento in cui l'algoritmo di Google li applica.

Core Web Vitals e altre metriche definiranno presto l'esperienza on-page e giocheranno un ruolo decisivo nel posizionamento SEO.

esperienza utente

Ma i Core Web Vitals sono importanti solo perché Google li considererà un fattore di ranking nel prossimo futuro? In realtà, se il motore di ricerca ha preso questa decisione, è perché questi aspetti sono fondamentali. Ci sono tre ragioni principali per cui sono essenziali:

  • Migliorano l'impegno e l'esperienza dell'utente.
  • Aiuta gli editori a valutare le prestazioni di una pagina.
  • Dare continuità all'esperienza della pagina su diversi dispositivi: PC, cellulari e tablet.

 

Come misurare Core Web Vitals

È possibile misurare queste metriche attraverso il rapporto Core Web Vitals di Google Search Console (GSC), che indica quali URL hanno bisogno di miglioramenti. Da lì, si può indagare su ciò che richiede la vostra attenzione, e si dovrebbe ottimizzare.

Ora con FandangoSEO, puoi anche monitorare il Core Web Vitals. Individua rapidamente qualsiasi area del tuo sito che ha bisogno di miglioramenti. Per accedere a questa funzione, una volta aperto il tuo progetto, devi solo andare su Page Info > Core Web Vitals.

Per accedere al Rapporto sull'esperienza utente in Google Chrome, per prima cosa, accedi all'SGC. Sulla sinistra, c'è una barra che contiene una sezione chiamata "Miglioramenti". Una volta lì, devi cliccare su "Core Web Vitals". Vedrete alcuni grafici in cui viene visualizzata l'opzione "Open report". Lì puoi eseguire un'analisi approfondita di queste metriche.

I rapporti GSC sono collegati ai rapporti Page Speed Insights, che è forse lo strumento più efficace per rilevare qualsiasi problema riguardante il Core Web Vitals.

Page Speed Insights, a sua volta, è alimentato da Lighthouse, che consiste in una serie di metriche di performance. Per alcune persone, il loro utilizzo può essere un po' complicato perché richiede conoscenze tecniche. Se questo è il vostro caso, avrete bisogno di assumere i servizi di un esperto con conoscenza di Web Vitals.

 

Come ottimizzare Core Web Vitals

Una volta analizzate le prestazioni dei tuoi Web Vitals, è il momento di migliorarle. Vediamo come puoi ottimizzare il tuo Core Web Vitals in dettaglio.

Prestazioni del sito web

La più grande ottimizzazione dei contenuti della vernice

In primo luogo, per ottimizzare la LCP, controllate le cause più comuni che possono portare ad un cattivo risultato. In questo modo, sarete in grado di sapere cosa fare in ogni caso.

Tempi di risposta del server lenti

Per migliorare il tempo di risposta del vostro server, potete intraprendere le seguenti azioni.

  • Ottimizza il tuo server
  • Utilizzare un CDN
  • Applicare la cache del server
  • Servire pagine HTML complete o parziali prima della cache

Render-blocking JavaScript e CSS

Render-blocking JavaScript e CSS impediscono ai siti di mostrare una pagina prima del caricamento di questi file. Per risolvere questo problema, si consiglia di minificare il CSS. Inoltre, rinviare il CSS non critico e inlineare il CSS critico.

Tempi di caricamento delle risorse lenti

  • Per ridurre il tempo di caricamento delle risorse, potete prendere le seguenti misure
  • Ottimizzare e comprimere le immagini
  • Precaricare risorse significative
  • Comprimere i file di testo
  • Utilizzare un lavoratore di servizio

Rendering lato client

Se usi un grande bundle Javascript senza ottimizzarlo in un sito per lo più renderizzato sul lato client, danneggerai le prestazioni di LCP. Per evitare questo problema, minificate il Javascript, rinviate il Javascript inutilizzato e riducete al minimo i polyfill inutilizzati.

 

Ottimizzazione del primo ritardo d'ingresso

Una scarsa FID è comunemente il risultato di una pesante esecuzione di JavaScript. In altre parole, è necessario ottimizzare il modo in cui JavaScript viene analizzato, compilato ed eseguito nella pagina. Per fare ciò, puoi intraprendere le seguenti azioni.

  • Suddividere i compiti lunghi in compiti più piccoli e asincroni
  • Ottimizzare per la prontezza di interazione come il caricamento progressivo del codice
  • Esaminare il codice di terze parti e dare priorità al caricamento
  • Utilizzare un web worker (Comlink, Workway, Workerize)
  • Ridurre il tempo di esecuzione di JS

 

Ottimizzazione dello spostamento del layout cumulativo

Vediamo quattro elementi che hanno maggiori probabilità di danneggiare le prestazioni del tuo CLS. Controlla ognuno di essi e prendi le misure necessarie per migliorare il tuo CLS.

  • Annunci, embed e iframe senza dimensioni specificate: Dovresti sempre riservare spazio per annunci, embed e iframe. Non mettere gli annunci vicino alla parte superiore della finestra.
  • Immagine senza dimensioni specificate: Assicuratevi di includere gli attributi di larghezza e altezza sui vostri elementi immagine e video.
  • Contenuto iniettato dinamicamente: Ricordatevi di evitare di inserire nuovi contenuti sopra quelli esistenti.
  • Web Fonts that cause FOIT/FOUT: Use font-display, font Loading API, or <link rel=” preload”> for key web fonts.

 

Altri Web Vitals che dovresti anche prendere in considerazione

Abbiamo visto che i Core Web Vitals saranno un fattore di posizionamento essenziale da maggio di quest'anno. Tuttavia, non saranno gli unici Web Vitals che Google prenderà in considerazione. In particolare, non bisogna perdere di vista le seguenti metriche:

 

Ridurre il tempo al primo byte (TTFB)

TTFB è il tempo che passa da quando il browser richiede la prima informazione da un server fino a quando la riceve. Questo può ritardare il processo di visualizzazione di una pagina da parte del browser. Un ritardo tra la richiesta del browser e la risposta del server aumenta il tempo TTFB.

 

Prima Vernice Contentevole (FCP)

Questa metrica si riferisce al tempo da quando inizia il caricamento del web fino a quando una qualsiasi parte del contenuto del web viene visualizzata sullo schermo (testo, immagini, ecc.). La differenza tra l'FCP e l'LCP è che quest'ultimo misura il tempo necessario al caricamento del contenuto principale della pagina, non di qualsiasi contenuto. Per ottimizzare il tuo FCP, devi accelerare il caricamento dei font. A tal fine, precaricate i web font per migliorare la velocità di caricamento.

 

Tempo di blocco totale (TBT)

Misura la reattività di caricamento della pagina quando l'utente entra nella pagina. In altre parole, si riferisce al tempo totale in cui il sito web è stato bloccato, impedendo all'utente di interagire con esso.

 

Tempo di interattività (TTI)

Questa metrica misura la durata del tempo da quando la pagina inizia a caricarsi fino al caricamento delle sue risorse secondarie più importanti. Questo è il momento in cui la pagina può rispondere rapidamente e in modo affidabile all'input dell'utente.

Arrow-up