Core Web Vitals: cosa sono a cosa servono e come si misurano

Ti sarà sicuramente capitato di navigare su di un sito inusabile a causa degli infiniti tempi di caricamento e della quantità smodata di banner di ogni sorta. Esperienza terribile.

Proprio l’esperienza di navigazione dell’utente sta per diventare uno dei fattori con cui Google deciderà l’ordinamento dei risultati del motore di ricerca.

Nella pagina about di Google si legge che lo scopo fondamentale del motore di ricerca è:

La nostra missione è organizzare le informazioni a livello mondiale e renderle universalmente accessibili e utili.

https://about.google

Organizzare le informazioni a livello mondiale significa trovare e catalogare tutte le pagine web esistenti in modo da fornire i migliori risultati possibili sulla base delle parole chiave digitate dall’utente.

Ma Google non si limita a classificare i risultati solamente in base al contenuto. Immagina di cercare una parola chiave come “miglior software gestionale per hotel” su Google.

Ti sei mai chiesto come faccia il motore di ricerca a decidere l’ordinamento con cui sono mostrati i risultati quando tutte le pagine hanno contenuti più o meno simili tra loro? Al fine di fornire anche in queste situazione i migliori risultati possibili, Google dichiara di tenere in considerazione oltre 100 fattori differenti!

E tra i fattori presi in considerazione, a partire dalla prima metà del 2021, uno che guadagnerà maggiore importanza nella definizione dell’ordinamento dei risultati di Google sarà proprio la così detta Page Experience. Proprio per misurare in maniera oggettiva la qualità di navigazione di un sito web Google aveva introdotto qualche anno fa i segnali Core Web Vitals. Nei prossimi mesi questi indicatori verranno inclusi all’interno del punteggio della Page Experience e da Maggio 2021 diventeranno un fattore di ranking a tutti gli effetti.

Questo vuol dire che a parità di contenuto un sito pulito, veloce a caricarsi e di facile consultazione verrà favorito rispetto ad un sito lento, pesante e complesso da usare.

NOTA: Chi si intende di ottimizzazione per i motori di ricerca conosce benissimo il motto “content is king” che sta a significare che il contenuto informativo il vero motivo per cui gli utenti aprono un sito. Questo motto continuerà ad essere valido anche con l’avvento dei Core Web Vitals tra i fattori di ranking. Un sito con il contenuto confuso e sgrammaticato ma con segnali Vitals al top continuerà ad essere penalizzato rispetto ad un sito con contenuto di qualità ma scarse performance.

Ma prima di trattare nel dettaglio dei Core Web Vitals mi presento: sono Lorenzo Millucci e sono un ingegnere del software che ama lavorare con Symfony e a cui piace condividere in questo blog le cose che impara. Non perderti anche il mio canale Telegram in cui ogni martedì parliamo di news e curiosità legate al mondo della tecnologia!


Indice


Cosa sono i segnali Core Web Vitals

I segnali Core Web Vitals sono degli indicatori che servono a rispondere alla domanda: “Qual’è l’esperienza di navigazione che il mio sito sta offrendo?”.

Secondo Google i concetti su cui si basa una navigazione di qualità sono tre:

  • Velocità: la navigazione deve avvenire senza la necessità di attendere tempi infiniti di caricamento tra una pagina e l’altra;
  • Interattività: una volta che il contenuto è stato mostrato a schermo l’utente non deve attendere un’infinità di tempo prima di poter interagire con la pagina;
  • Stabilità visuale: il contenuto della pagina non deve subire spostamenti mano a mano che i contenuti vengono caricati (es. viene caricato un banner pubblicitario che fa si che il testo venga scrollato più giù nella pagina).

Questi concetti possono essere misurati utilizzando rispettivamente le seguenti metriche:

  • Largest Contentful Paint (LCP): il caricamento dovrebbe avvenire entro 2.5s
  • First Input Delay (FID): dovrebbe essere possibile interagire con la pagina entro 100ms dal caricamento
  • Cumulative Layout Shift (CLS): il punteggio relativo alla stabilità non dovrebbe essere superiore a 0.1

I report di Google mostrano come un sito che soddisfi a pieno i requisiti di qualità appena definiti abbia un tasso di abbandono più basso del 24% rispetto ad uno sito che non li rispetta.

Misurare i Core Web Vitals

Ora che hai capito le motivazioni che hanno spinto Google ad introdurre i Core Web Vitals come indicatore dell’esperienza di navigazione percepita dall’utente vediamo come misurarli praticamente.

Una prima importante differenziazione da fare nella misura dei segnali Vitals è la distinzione tra “dati sul campo” e “dati sintetici”. I primi sono i dati raccolti da Google tramite l’analisi dei visitatori reali del sito web mentre i secondi sono dati ottenuti in laboratorio simulando quello che potrebbe essere il comportamento dell’utente nel sito.

Google (ovviamente) utilizza i dati sul campo per determinare l’ordinamento dei risultati di ricerca e ti farò vedere non sono facilmente accessibili. I dati sintetici invece possono essere generati facilmente e sono utilizzati principalmente dagli sviluppatori per individuare quali possono a cui gli utenti vanno incontro.

Google offre diversi strumenti per la misura dei Core Web Vitals che coprono diversi aspetti dello stesso problema e in particolare gli strumenti più usati sono:

  • Google Search Console
  • PageSpeed Insight
  • Lighthouse
I 3 strumenti più utilizzati per la misurazione dei segnali Core Web Vitals

Search Console

La Search Console è un servizio di Google dedicato ai webmaster con il quale è possibile monitorare e gestire la presenza del tuo sito nei risultati della ricerca Google.

Tra i vari report che è possibile consultare nella Search Console ne puoi trovare proprio uno dedicato interamente ai segnali Core Web Vitals.

Il report sui segnali web essenziali di Google Search Console

Il report della Search Console mostra i “dati sul campo” ed è ottimo per individuare rapidamente i problemi comuni a più pagine del sito visto che tutte le pagine con problematiche simili vengono raggruppate insieme. Ad esempio, se più pagine del sito hanno un layout comune con una grossa immagine in copertina, è molto probabile che il loro punteggio circa il Largest Contentful Paint (LCP) sia simile. In questi casi il report di Google segnalerà un eventuale problema su tutte le pagine.

Per farla breve la Google Search Console è lo strumento giusto da utilizzare per identificare eventuali problemi di performance a livello globale del sito. Lo svantaggio principale però della Console è che ogni punto del grafico è la media dei punteggi alle performance dei 28 giorni precedenti. Questo vuol dire che un miglioramento fatto oggi non sarà visibili nel report prima di un mese.

PageSpeed Insights (PSI)

PageSpeed Insight è un applicativo web di Google che permette di vedere nella stessa pagina sia i dati sul campo (se disponibili) che quelli sintetici. Tutto ciò che devi fare per ottenere il report di PageSpeed Insight è inserire l’URL della pagina da analizzare nell’applicazione e premere invio.

L’analisi del punteggio di questo blog da desktop secondo PageSpeed Insight

L’analisi svolta da questo strumento è relativa al singolo URL specificato e solo nel caso in cui la pagina sia frequentata da un numero sufficientemente alto di visitatori è possibile vedere i dati raccolti sul campo, altrimenti saranno mostrati solo dei dati sintetici raccolti tramite test automatici.

All’interno della pagina dei risultati dell’analisi sono presenti anche dei consigli relativi alle aree su cui concentrare l’attenzione per migliorare il punteggio della pagina. (Attenzione si tratta di suggerimenti ottenuti dal test sintetico eseguito sulla pagina, gli utenti reali potrebbero riscontrare problematiche differenti).

In breve, tramite l’analisi della PageSpeed Insight è possibile analizzare con precisione i dati reali delle performance misurate dai visualizzatori del sito per una determinata pagina.

L’obiettivo di questo strumento dovrebbe essere quello di mettere a confronto i dati reali con quelli sintetici così da vedere se c’è un’effettiva corrispondenza in modo da scongiurare l’ipotesi per cui i dati sintetici siano migliori di quelli effettivamente riscontrati dagli utenti.

Il problema principale di questo report è che se la pagina da analizzare non è sufficientemente trafficata otterrai solo i dati sintetici (misurati tramite Lighthouse).

Lighthouse

Lighthouse è uno strumento automatico di analisi dei siti web incluso all’interno di Chrome (o anche il nuovo Edge basato su Chromium).

Questo strumento è principalmente rivolto agli sviluppatori e ha come finalità la raccolta di dati sintetici sulle performance di un sito.

Lighthouse in particolare permette di ricavare vari report:

  • Performance del sito: è il report che contiene le metriche legate alle prestazioni (tra cui i Core Web Vitals) ed è in grado di fornire agli sviluppatori vari suggerimenti sulle aree in cui intervenire per migliorare l’esperienza dell’utente.
  • Progressive Web App: questo report è rilevante solo nel caso in cui abbinata al sito ci sia una PWA e serve ad identificare se il sito web aderisce a tutti gli standard richiesti ad una PWA.
  • Best Practices: questo report si concentra sugli aspetti legati alla sicurezza e sugli aspetti legati ai moderni standard di sviluppo web.
  • Accessibilità: questo report serve ad individuare eventuali problematiche che possano rendere la pagina web inutilizzabile da persone con disabilità.
  • SEO: in questo report è indicato quanto la pagina web è facile da scansionare per un motore di ricerca (non solo Google). Più il punteggio è alto e più sarà facile che la pagina venga indicizzata e compaia come risultato della ricerca di un utente.
Punteggio relativo alle performance misurato da Lighthouse su dev.to (in rosso ho evidenziato i Core Vitals)

La navigazione web in questi anni si sta spostando sempre più dai PC verso i dispositivi mobili come smartphone e tablet.

Google è ampiamente a conoscenza di questo fenomeno e proprio per questo motivo tiene in particolare considerazione questa categoria di dispositivi permettendo a Lighthouse di simulare l’esperienza utente da uno smartphone.

La navigazione da smartphone però non è sempre ottimale. Dispositivi dalla scarsa potenza di calcolo e connessioni lente e/o ballerine sono molto più comuni di quanto si pensi. Per tenere conto di queste situazionivo Lighthouse simula uno smartphone che non sia un top di gamma (Moto G4) e che sia sotto una connessione lenta (slow 4G = 1.6Mbps download / 750 Kbps upload – latenza 150ms).
Proprio a causa di questa scelta il sito web che si carica in un lampo nel tuo iPhone 12 Pro potrebbe ottenere un punteggio delle performance basso (per verificare questa ipotesi il test da eseguire è quello della PageSpeed Insight).

Il ragionamento che ha spinto Google ad percorrere questa strada è il seguente: se la pagina web ha performance buone su un dispositivo limitato sicuramente sarà un piacere consultarla su di un cellulare di ultima generazione.

Il modo più semplice per misurare i segnali Core Web Vitals tramite Lighthouse è utilizzarlo direttamente da Chrome usando i seguenti comandi:

  • Naviga sulla pagina per cui vuoi misurare le performance
  • Apri gli strumenti per sviluppatori usando F12 (o utilizzando ctrl+shift+I)
  • Seleziona dalle tab in alto il menù Lighthouse
  • Metti la spunta sulla voce “Performance” (e rimuovere le altre se non sei interessato agli altri report)
  • Seleziona mobile o desktop per decidere se quale report vuoi ottenere
  • Avvia il test tramite il bottone “Genera Report”

Al termine dell’analisi del sito verrà mostrato un voto complessivo del sito e sarà possibile analizzare nel dettaglio tutte le voci che concorrono alla determinazione del punteggio. Per sapere come sono combinate tra loro le voci per il calcolo del punteggio complessivo ti lascio la documentazione ufficiale di Google.

Nel momento in cui scrivo Lighthouse 6 utilizza questi pesi per mediare le metriche e determinare il punteggio complessivo

Il report è diviso in due sezioni: metrics e opportunities. I valori delle metriche sono quelli che vanno ad influire direttamente sul punteggio globale assegnato alle performance mentre le opportunità non incidono direttamente. In ogni caso aggiustare una delle problematiche segnalate nella sezione opportunità può avere un impatto sul valore di una delle metriche e quindi contribuire ad aumentare il punteggio globale.

Analizzando i le voci contenute nella sezione metriche è possibile individuare i valori dei Core Web Vitals:

  • Largest Contentful Paint
  • Cumulative Layout Shift
  • Total Blocking Time (che non è esattamente il First Input Delay ma lo approssima con buona precisione).

NOTA: se ti dovesse servire automatizzare la creazione del report per più pagine non perderti questo articolo.

Conclusione

L’ottimizzazione dei siti web per i motori di ricerca (SEO) non è una scienza esatta. Gli algoritmi usati dai motori di ricerca cambiano continuamente e quello che è valido oggi potrebbe non essere più valido domani. L’unica cosa certa è che ci sono dei principi generici a cui i motori di ricerca si ispirano costantemente. Tra questi principi fondamentali uno che nel 2021 acquisirà maggiore importanza sarà proprio la valutazione delle performance del sito misurata tramite i segnali Core Web Vitals.

Google ha avvisato con largo anticipo che il cambiamento avverrà intorno al mese di Maggio in modo da dare tempo a chiunque gestisca un sito di iniziare a valutarne le performance e ad apportare i cambiamenti necessari. Chi non si adegua in tempo vedrà soffiarsi il primo posto nei risultati di ricerca da i competitor.

Come ho accennato poco fa, Google non fornisce delle regole esatte ma solo dei principi a cui si ispira per questo motivo quello che è scritto in questo post potrebbe essere aggiustato e modificato da Google in ogni momento. Per tale motivo ho cercato di mettere sempre i link alla documentazione ufficiale in modo da poter risalire sempre alla fonte di ogni dato riportato nel post.


Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Evitare le fregature su Amazon con Keepa

Tracciare i prezzi di Amazon usando Keepa

Ti capita spesso di sfogliare la pagina delle offerte di Amazon?
Io quasi tutte le mattine sfoglio la pagina con le offerte di Amazon e controllo gli oggetti che ho aggiunto alla lista desideri nella speranza di trovare l’occasione irripetibile che mi faccia risparmiare qualche buon euro.

Il problema di Amazon è che tutti i prodotti sono sempre scontati e che i prezzi che applica sono molto variabili. Può benissimo capitare che un prodotto che tengo sott’occhio un giorno costi 20€, il giorno dopo 25€ per poi magari essere scontato per qualche ora a 10€.

Quindi, come posso fare per capire un prodotto è veramente in offerta o meno?
Proprio a questo scopo ti viene in aiuto un estensione per il browser chiamata Keepa che consente di tracciare i prezzi e le offerte dei prodotti di Amazon.

Prima di mostrarti come installare Keepa all’interno del tuo browser ti voglio fare un esempio concreto.

Prendiamo in considerazione il gioco per Nintendo Switch “Pokemon: Let’s Go“, puoi notare come il prezzo consigliato sia di 59,99€ mentre il prezzo applicato da Amazon sia di 49,99€.
Un risparmio di 10€ sul prezzo di listino potrebbe sembrare una buona offerta ma dopo aver installato Keepa nel tuo browser potrai notare che poco sotto i dettagli del prodotto è presente un grafico con l’andamento del prezzo negli ultimi 3 mesi.

Per cui, dal grafico è possibile notare subito due cose:

  • Benché il prezzo consigliato sia di 59,99€ il gioco non è mai stato a quel prezzo. Nel momento in cui era più costoso veniva comunque circa 56€ rendendo lo sconto attuale di 6€ anziché 10€;
  • In passato il gioco è costato decisamente meno, per cui è possibile che in futuro venga scontato nuovamente.

Sulla base di queste informazioni potresti convenire che, se non hai fretta, sia meglio attendere qualche altra offerta prima di acquistare il gioco.

Per vedere Keepa all’opera puoi guardare anche questo video:

Keepa in esecuzione sulla pagina di Pokemon Let’s go

Come installare Keepa

L’installazione di Keepa è veramente banale, bastano pochissimi click ed è disponibile per tutti i principali browser disponibili sul mercato.
Per installarlo direttamente nel tuo browser ti lascio di seguito i link diretti:

  • Estensione per Firefox: clicka qui e premi il pulsante Aggiungi a Firefox
  • Estensione per Chrome: clicka qui e premi il pulsante Aggiungi
  • Estensione per Edge: clicka qui e premi il pulsante Aggiungi

Da questo punto in poi, per ogni pagina di Amazon che consulterai potrai trovare il grafico con l’andamento dei prezzi del prodotto subito dopo la sezione dedicata alle caratteristiche generali.

Buono shopping su Amazon!

Conclusioni

Come hai potuto notare non tutti gli sconti di Amazon sono delle reali offerte. Questo non vuol dire che non ci siano mai offerte eccezionali su alcuni prodotti ma a volte le gli sconti proposti sono meno sensazionali di quello che sembrano. Grazie a Keepa potrai avere il polso sull’andamento del prezzo nel tempo e delle offerte dei prodotti che ti servono e potrai decidere con cognizione di causa se un offerta è veramente buona o se è soltanto una leggera riduzione di costo.

Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci. Inoltre ti invito ad iscriverti al mio canale Telegram per non perderti nemmeno un post del mio blog.

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Google Chrome: Disabilitare la richiesta di iscrizione alle notifiche

Richiesta di iscrizione alle notifiche

Richiesta di iscrizione alle notifiche da parte di facebook

Quante volte aprendo una pagina web ti sei dovuto districare tra richieste di iscrizioni alla newsletter, banner pubblicitari invadenti e richieste d’iscrizione alle notifiche prima di poter leggere il contenuto della pagina? A me succede molto più spesso di quanto vorrei.

In questo post ti voglio svelare il metodo per disattivare completamente il pop-up di richiesta di iscrizione alle notifiche di una pagina web utilizzando Google Chrome.

Disattivare le notifiche

Per disattivare il pop-up di richiesta del permesso di inviare le notifiche ti basta aprire Google Chome, premere i tre puntini in alto a destra, e clickare la voce impostazioni. Scorrendo la pagina con tutte le impostazioni del browser, in fondo, dovrai premere il pulsante Avanzate e alla sezione Privacy e sicurezza selezionare la voce Impostazioni sito.

Impostazioni google chrome
Impostazioni -> Avanzate -> Impostazioni sito

A questo punto, premendo la voce Notifiche si aprirà una pagina da cui gestire tutti i siti a cui ti sei iscritto per la ricezione di notifiche. Per disattivare completamente il pop-up di richiesta di iscrizione alle notifiche ti basta disabilitare la voce Bloccato.

disattivazione pop-up notifiche

Rimuovendo la spunta da Bloccato non verrà mai più mostrato il pop-up di richiesta di iscrizione alle notifiche

A questo punto il gioco è fatto, d’ora in poi nessun sito mostrerà più i fastidiosi pop-up di richiesta di iscrizione alle notifiche 🎉️
Leggi questo articolo per sapere come disattivare le notifiche anche sulla versione chromium-based di Microsoft Edge.

Per non perderti nemmeno un post del blog puoi iscriverti al mio canale su Telegram oppure contattarmi direttamente a t.me/lorenzomillucci.

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Chrome: Installare un certificato SSL self-signed da Ubuntu

Molto spesso durante lo sviluppo di applicazioni web è necessario riprodurre all’interno del proprio PC esattamente lo stesso ambiente che verrà utilizzato poi nel server in produzione. Grazie a Docker è semplice riprodurre in locale la stessa configurazione software utilizzata del server. Tuttavia spesso accade che non si abbia a disposizione un certificato SSL firmato da un autorità valida da sfruttare nell’ambiente locale per cui, provando ad accedere all’applicazione da un browser, si ottiene il messaggio di avviso “la connessione non è privata”.

Con questo post voglio spiegarti come aggiungere (o rimuovere) un certificato SSL all’archivio utilizzato da Google Chrome in modo da evitare di ricevere i messaggi di errore dal browser.

NOTA: se utilizzi anche Firefox ricordati di seguire la procedura per aggiungere un certificato anche li.

Pagina d'errore: la connessione non è privata NET:ERR_CERT_AUTHORITY_INVALID
La connessione non è privata NET:ERR_CERT_AUTHORITY_INVALID

Perché su Linux non basta un doppio click sul file del certificato?

La risposta alla domanda è molto semplice: quando utilizzi una distribuzione Linux, Google Chrome non utilizza lo stesso archivio di certificati del sistema operativo.
Tale scelta da parte degli sviluppatori è stata dettata dal fatto che non esiste un unico software di gestione dei certificati comune a tutto il mondo Linux ma ogni distribuzione implementa un meccanismo differente.
A causa di ciò, mentre su Windows e Mac OS X basta aggiungere con un doppio click un certificato all’archivio del sistema operativo affinché venga automaticamente accettato da Chrome su Linux questa procedura non porta ad alcun risultato.
Infatti su Linux viene utilizzato come gestore dei certificati la libreria Mozilla Network Security Services (NSS). Di conseguenza, per far riconoscere un certificato a Chrome, è necessario aggiungerlo direttamente all’archivio gestito da questa libreria.

Aggiungere il certificato

La prima cosa da fare per poter aggiungere un certificato SSL a Google Chrome è installare certutil. Tramite questo pacchetto è possibile andare ad aggiungere ed a rimuovere i certificati gestiti dalla libreria NSS.
Per installarlo puoi usare il seguente comando da terminale:

sudo apt install libnss3-tools

NOTA: a seconda della versione del sistema operativo questo pacchetto potrebbe essere già incluso all’interno della distribuzione in uso.

Una volta che il pacchetto è stato installato all’interno del sistema, per aggiungere un certificato (con estensione .crt) all’archivio dei certificati puoi utilizzare il seguente comando (ricordandoti di rimpiazzare il placeholder<FILE_CRT> con il nome effettivo del tuo certificato):

certutil -d sql:$HOME/.pki/nssdb -A -t "TC,," -n "<CERT_NICKNAME>" -i <FILE_CRT>

NOTA: CERT_NICKNAME rappresenta l’alias da utilizzare per riconoscere il certificato nella lista di quelli installati

NOTA2: Per sapere cosa significano i trustargs (la parte dopo il -t) puoi consultare la documentazione ufficiale.

Per verificare che l’aggiunta del nuovo certificato SSL sia andata a buon fine puoi farti restituire la lista di tutti i certificati aggiunti all’archivio NSS utilizzando il seguente comando:

certutil -d sql:$HOME/.pki/nssdb -L

Se tutto sarà andato a buon fine, riavviando Chrome, non dovresti più ricevere il messaggio d’errore riguardante la connessione non privata.

Rimuovere il certificato

Nel caso in cui sia necessario rimuovere il certificato il comando da eseguire è:

 certutil -d sql:$HOME/.pki/nssdb -D -n <CERT_NICKNAME>  

Conclusioni

Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Fonti:
Documentazione Network Security Services
Documentazione Chromium

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!