Perch\u00e9 Core Web Vitals?<\/h2>\n
Il contenuto rimane cruciale. Ma se confrontate due siti con testo e popolarit\u00e0 simili, quello che offre la migliore esperienza web avr\u00e0 la priorit\u00e0 nei risultati di Google Search.<\/p>\n
Oltre a un page rank migliorato, i siti ad alte prestazioni possono essere inclusi nel carosello di ricerca mobile. Questo era precedentemente riservato alle Accelerated Mobile Pages (AMP)<\/a>, che richiedevano il porting dei contenuti in un sito separato ospitato da Google. AMP ha attirato critiche, soprattutto perch\u00e9 le pagine non sono sempre pi\u00f9 veloci di quelle di un sito statico o WordPress ben ottimizzato. Tuttavia questo non \u00e8 pi\u00f9 un requisito<\/a>.<\/p>\n Non importa cosa avete scelto: pi\u00f9 veloce e responsive \u00e8 il vostro sito, pi\u00f9 possibilit\u00e0 ha di posizionarsi pi\u00f9 in alto nei risultati di Google Search.<\/p>\n Se considerate che la pagina media pesa all\u2019incirca 2 MB, fa pi\u00f9 di 60 richieste HTTP e impiega 16 secondi per il rendering completo su un dispositivo mobile, vedrete che c’\u00e8 un certo margine per migliorare il vostro sito. Vi mostreremo i modi migliori per ottenere questi miglioramenti.<\/p>\n Ci sono quattro fattori chiave di posizionamento da esaminare prima di iniziare a valutare le prestazioni:<\/p>\n Una volta soddisfatti questi requisiti, il vostro sito sar\u00e0 valutato per le sue prestazioni.<\/p>\n\n Rendere il vostro sito veloce nel caricamento<\/a>, nel rendering e nella reattivit\u00e0 \u00e8 vitale. Ma quanto \u00e8 veloce per gli utenti?<\/p>\n Le applicazioni per misurare le prestazioni<\/a> come DevTools del browser riportano misure tecniche come:<\/p>\n Queste possono essere usate per determinare specifici colli di bottiglia come il carico del server, il caching del CMS<\/a>, il caching del browser, la velocit\u00e0 di download e l’efficienza di JavaScript<\/a>. Ma non possono determinare se una pagina fornisce un’esperienza utente buona o cattiva. Per esempio:<\/p>\n I Core Web Vitals sono il tentativo di Google di risolvere questi dilemmi.<\/p>\n I Core Web Vitals (CWV) di Google sono tre metriche di performance che valutano l’esperienza utente nel mondo reale:<\/p>\n Questo nuovo aggiornamento dell’algoritmo di Google<\/a> ha iniziato a diffondersi globalmente dalla fine di agosto 2021. Le metriche Core Web Vitals influenzano principalmente i risultati di ricerca mobile, ma si proseguir\u00e0 poi con gli equivalenti desktop se l’esperimento avr\u00e0 successo.<\/p>\n I punteggi LCP, FID e CLS di una pagina si basano sugli ultimi 28 giorni di metriche reali dell’utente raccolte in modo anonimo attraverso il browser Chrome. Queste misurazioni possono variare a causa del dispositivo dell’utente, della connessione e di altre attivit\u00e0 concomitanti, quindi viene calcolato il 75\u00b0 percentile piuttosto che una media.<\/p>\n In altre parole, le metriche di tutti gli utenti sono ordinate dalla migliore alla peggiore, e viene presa la cifra a tre quarti. Tre visitatori del sito su quattro sperimenteranno quindi quel livello di prestazioni, o uno superiore.<\/p>\n Qualsiasi pagina che raggiunge un buon punteggio (verde) per tutte e tre le metriche Core Web Vitals ricever\u00e0 un posizionamento pi\u00f9 alto nei risultati di ricerca e sar\u00e0 inclusa nel carosello “Top Stories” nell’applicazione Google News.<\/p>\n Nelle sezioni seguenti, descriveremo l’algoritmo usato per calcolare una metrica, gli strumenti che potete usare per identificare il punteggio di una pagina, le cause tipiche dei punteggi bassi e i passi che potete fare per risolvere i problemi di prestazioni.<\/p>\n Largest Contentful Paint misura le prestazioni di caricamento<\/a>. In sostanza, quanto velocemente viene reso il contenuto utilizzabile sulla pagina?<\/p>\n Il LCP analizza quanto tempo impiega l’immagine pi\u00f9 grande o il blocco di testo a diventare visibile all’interno della finestra del browser (above the fold). Nella maggior parte dei casi, l’elemento pi\u00f9 prominente sar\u00e0 un’immagine, un banner, un titolo o un grande blocco di testo.<\/p>\n Con il Largest Contentful Paint si possono analizzare questi elementi:<\/p>\n Le pagine in cui il Largest Contentful Paint viene completato entro i primi 2,5 secondi del caricamento della pagina sono considerate buone (verde). Le pagine che superano i 4.0 secondi sono considerate scarse (rosso):<\/p>\n LCP \u00e8 la metrica Core Web Vital pi\u00f9 facile da comprendere, ma potrebbe non essere ovvio quale elemento sar\u00e0 scelto per l’analisi.<\/p>\n Il pannello DevTools Lighthouse<\/strong> \u00e8 incluso nei browser basati su Chromium come Chrome, Edge, Brave<\/a>, Opera e Vivaldi. Aprite DevTools dal menu del browser, di solito da Altri strumenti<\/strong> > Strumenti di sviluppo<\/strong> o dalle scorciatoie da tastiera Ctrl | Cmd + Shift + i<\/strong> o F12<\/strong>, poi navigate fino alla scheda Lighthouse<\/strong> (le vecchie edizioni potrebbero chiamarla Audit<\/strong>).<\/p>\n Generate un rapporto Prestazioni da mobile, poi esaminate la sezione Prestazioni<\/strong> risultante. Il tempo di Largest Contentful Paint risultante viene mostrato con una sezione espandibile, che identifica l’elemento scelto:<\/p>\n Potete generare informazioni identiche negli strumenti online PageSpeed Insights<\/a> e web.dev Measure<\/a> se non avete accesso a un browser basato su Chromium:<\/p>\n Il pannello Performance<\/strong> di DevTools mostra anche un indicatore LCP. Per iniziare, fate clic sull’icona circolare Record<\/strong>, ricaricate la pagina e poi fate clic sul pulsante Stop<\/strong> per visualizzare il rapporto. Fate clic sull’icona LCP nella sezione Timings<\/strong> per identificare l’elemento e visualizzare un riassunto delle statistiche.<\/p>\n L’estensione Web Vitals<\/a> \u00e8 disponibile per Google Chrome ma pu\u00f2 essere installata sulla maggior parte dei browser basati su Chromium. Calcola le metriche Core Web Vitals per ogni sito che visitate e la sua icona diventa verde, arancione o rossa a seconda del risultato. Potete anche fare clic sull’icona dell’estensione per visualizzare pi\u00f9 dettagli sul LCP:<\/p>\n La Search Console di Google<\/a> ora offre una sezione Core Web Vitals<\/a> se il vostro sito viene aggiunto come propriet\u00e0<\/a>. Il rapporto illustra come le metriche CWV sono cambiate nel tempo. Notate che non identifica metriche LCP specifiche e sono disponibili solo i siti con un traffico ragionevolmente alto:<\/p>\n Il Chrome User Experience Report<\/a> vi permette di consultare le statistiche reali di utilizzo, compreso l’LCP attraverso diversi Paesi, connessioni e dispositivi, per un URL specifico. \u00c8 un progetto pubblico su Google BigQuery, quindi dovete registrarvi per un account Google Cloud Platform<\/a> e fornire i dettagli di fatturazione. Di nuovo, il rapporto sar\u00e0 utile solo quando un URL ha un livello di traffico ragionevolmente alto.<\/p>\n Infine, la libreria JavaScript web-vitals<\/a> \u00e8 un piccolo script di 1 kB che pu\u00f2 calcolare LCP e altre metriche Core Web Vitals per utenti reali sul votro sito live. Pu\u00f2 essere scaricato da un CDN, quindi potete aggiungere il seguente script al vostro HTML Lo script qui sopra emette l’oggetto nella console, anche se \u00e8 pi\u00f9 pratico inviare i dati a un server o a Google Analytics<\/a> per ulteriori analisi.<\/p>\n Bassi punteggi di LCP sono tipicamente causati da pagine che si caricano lentamente e che impediscono al blocco pi\u00f9 grande di apparire rapidamente:<\/p>\n Un controllo accurato pu\u00f2 identificare i problemi di caricamento, ma generalmente si tratta di ridurre la quantit\u00e0 di dati inviati al browser<\/a>. I seguenti consigli vi aiuteranno a migliorare il punteggio LCP:<\/p>\n Il First Input Delay misura la reattivit\u00e0 della vostra pagina. In sostanza, quanto velocemente risponde alle azioni dell’utente come clic, tap o scrolling?<\/p>\n La metrica FID \u00e8 calcolata come il tempo tra l’interazione dell’utente e l’elaborazione della sua richiesta da parte del browser. Non misura il tempo per eseguire la funzione di gestione, che in genere elabora l’input e aggiorna il DOM.<\/p>\n Le pagine con un tempo FID di 100 millisecondi o meno sono considerate buone (verde). Le pagine che superano i 300 millisecondi sono considerate scarse (rosso):<\/p>\n Il First Input Delay \u00e8 impossibile da simulare perch\u00e9 pu\u00f2 essere misurato solo quando la pagina viene servita a un utente reale che interagisce con la pagina. Il risultato dipende quindi dalla velocit\u00e0 e dalle capacit\u00e0 del processore di ogni dispositivo.<\/p>\n Il FID non \u00e8 calcolato nel pannello DevTools Lighthouse o in PageSpeed Insights<\/a>. Tuttavia, pu\u00f2 determinare il Tempo Totale di Blocco (Total Blocking Time o TBT). Questa \u00e8 un’approssimazione ragionevole per il First Input Delay. Misura la differenza di tempo tra:<\/p>\n L’estensione Web Vitals<\/a> per Google Chrome pu\u00f2 anche mostrare una metrica FID dopo aver interagito con la pagina tramite scroll o clic. Fate clic sull’icona dell’estensione per rivelare maggiori informazioni:<\/p>\n Come LCP<\/a>, il Chrome User Experience Report<\/a> vi permette di interrogare le statistiche FID reali registrate in diversi paesi, connessioni e dispositivi per un URL specifico.<\/p>\n La libreria JavaScript web-vitals<\/a> pu\u00f2 anche calcolare le metriche FID per gli utenti reali sul vostro sito live. Potete aggiungere il seguente script al vostro Scarsi punteggi FID e TBT sono solitamente causati da codice lato client che occupa il processore, come per esempio:<\/p>\n Per impostazione predefinita, i browser funzionano su un singolo thread, che pu\u00f2 elaborare solo un compito alla volta. Se una funzione JavaScript impiega un secondo per essere eseguita, tutti gli altri processi di rendering sono bloccati durante quel secondo. La pagina non pu\u00f2 reagire all’input dell’utente, aggiornare il DOM, mostrare animazioni e cos\u00ec via. Anche le animazioni GIF possono essere bloccate nei vecchi browser.<\/p>\n Un controllo JavaScript lato client pu\u00f2 identificare i problemi, ma generalmente si tratta di rimuovere il codice ridondante e di assicurare che i compiti vengano eseguiti rapidamente.<\/p>\n I seguenti consigli vi aiuteranno a raggiungere un miglior punteggio FID:<\/p>\n Il CLS misura la stabilit\u00e0 visiva della pagina. In sostanza, il contenuto della pagina si muove o salta all\u2019improvviso, soprattutto durante il caricamento iniziale?<\/p>\n Il CLS calcola il punteggio in funzione degli elementi che si muovono senza preavviso o interazione dell’utente. Probabilmente vi \u00e8 capitato di sperimentarlo leggendo un articolo su un dispositivo mobile: il testo salta fuori campo e voi perdete il filo. Nei casi peggiori potreste finire per fare clic su un link sbagliato.<\/p>\n I problemi di CLS sono pi\u00f9 evidenti quando una grande immagine o una pubblicit\u00e0 si carica sopra la posizione di scorrimento attuale e uno spazio ad altezza zero cresce all\u2019improvviso di diverse centinaia di pixel.<\/p>\n I punteggi Cumulative Layout Shift sono calcolati moltiplicando insieme le seguenti metriche:<\/p>\n Google ha apportato delle modifiche alla metrica CLS per adattarsi alle seguenti situazioni:<\/p>\n Le pagine che hanno un punteggio CLS di 0,1 o meno sono considerate buone (verde). Le pagine che superano 0,25 sono considerate scarse (rosso):<\/p>\n Le metriche CLS sono calcolate nel pannello DevTools di Lighthouse<\/strong>, in PageSpeed Insights<\/a> e negli strumenti web.dev Measure<\/a>:<\/p>\n Anche l’estensione Web Vitals<\/a> di Google Chrome mostra la metrica CLS:<\/p>\n Come gi\u00e0 visto per il LCP<\/a> e il FID<\/a>, il Chrome User Experience Report<\/a> vi permette di interrogare le statistiche CLS reali registrate in diversi Paesi, connessioni e dispositivi per un URL specifico.<\/p>\n Anche la libreria JavaScript web-vitals<\/a> pu\u00f2 calcolare le metriche CLS per gli utenti reali sul vostro sito live, proprio come fa con LCP e FID. Il seguente script potrebbe essere aggiunto al vostro I bassi punteggi di CLS sono di solito causati da risorse di pagina che si caricano lentamente e da elementi DOM dinamici o non dimensionati:<\/p>\n Un controllo lato client pu\u00f2 identificare i problemi, ma generalmente si tratta di assicurare che lo spazio sia riservato al contenuto prima che venga scaricato. I suggerimenti per l’ottimizzazione del server suggeriti per il Largest Contentful Paint<\/a> offrono qualche beneficio, ma sono possibili ulteriori miglioramenti:<\/p>\nFattori Chiave del Posizionamento su Google<\/h2>\n
\n
Come Fa Google a Valutare le Prestazioni del Web?<\/h2>\n
\n
\n
Cosa Sono i Core Web Vitals?<\/h2>\n
\n
Largest Contentful Paint (LCP)<\/h2>\n
\n
<img><\/code> )<\/li>\n<image><\/code> incorporato in un <svg><\/code>)<\/li>\n<video><\/code>)<\/li>\nbackground-image url()<\/code>)<\/li>\n![\"Largest](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/lcp-rank.png\"){kind=icon}
<\/a>Strumenti di Analisi di Largest Contentful Paint<\/h3>\n
![\"Rapporto](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-lighthouse.png\")
<\/a>![\"Analisi](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-lcp.png\")
<\/a>![\"Indicatore](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-performance.png\")
<\/a>![\"LCP](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-lcp.png\")
<\/a>![\"Core](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/console-lcp.png\")
<\/a><head><\/code>:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getLCP } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetLCP(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\ngetLCP()<\/code> \u00e8 una funzione asincrona a cui viene passata una callback attivata quando il valore LCP \u00e8 stato calcolato (anche se potrebbe non attivarsi mai se la pagina viene caricata in una scheda in background). Alla funzione di callback viene passato un oggetto contenente:<\/p>\n\n
name<\/code><\/strong>: il nome della metrica (“LCP” in questo caso)<\/li>\nvalue<\/code><\/strong>: il valore calcolato<\/li>\nid<\/code><\/strong>: un ID unico che rappresenta questa metrica per la pagina corrente<\/li>\ndelta<\/code><\/strong>: il delta tra il valore corrente e l’ultimo valore riportato<\/li>\nentries<\/code><\/strong>: un array di voci usate nel calcolo del valore<\/li>\n<\/ul>\nCause Comuni di Punteggi Bassi per il Largest Contentful Paint<\/h3>\n
\n
Come Migliorare i Punteggi del Largest Contentful Paint<\/h3>\n
\n
loading=\"lazy\"<\/code>. Aggiungete attributi di larghezza e altezza per assicurare che venga riservato lo spazio appropriato nella pagina prima che l’immagine completi il caricamento.<\/li>\n<link><\/code> all’inizio della pagina, poi caricate altri fogli di stile in modo asincrono.<\/li>\nFirst Input Delay (FID)<\/h2>\n
![\"First](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/fid-rank.png\"){kind=icon}
<\/a>Strumenti di Analisi del First Input Delay<\/h3>\n
\n
![\"Total](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-fid.png\")
<\/a>![\"Estensione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-fid.png\")
<\/a><head><\/code> HTML per emettere le metriche FID su una funzione di callback:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getFID } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetFID(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nCause Comuni di Punteggi per il First Input Delay<\/h3>\n
\n
Come Migliorare i Punteggi di First Input Delay<\/h3>\n
\n
Cumulative Layout Shift (CLS)<\/h2>\n
\n
\n
![\"Cumulative](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/cls-rank.png\"){kind=icon}
<\/a>Strumenti di Analisi del Cumulative Layout Shift<\/h3>\n
![\"CLS](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-cls.png\")
<\/a>![\"CLS](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-cls.png\")
<\/a><head><\/code> HTML per emettere le metriche CLS su una funzione di callback
\n:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getCLS } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetCLS(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nCause Comuni di Punteggi Bassi per il Cumulative Layout Shift<\/h3>\n
\n
Come Migliorare i Punteggi di Cumulative Layout Shift<\/h3>\n
\n
<img><\/code> e <iframe><\/code> o usate la nuova propriet\u00e0 CSS aspect-ratio<\/a> per assicurarvi che lo spazio appropriato sia riservato sulla pagina prima del download delle risorse.<\/li>\n<link><\/code> all’inizio della pagina, poi caricate altri fogli di stile in modo asincrono.<\/li>\n