Posted by Chrome 88 appena rilasciato aggiunge funzionalità per gli sviluppatori in attesa del prossimo aggiornamento Page Experience , che aggiunge le metriche relativamente nuove Web Vitals a qualsiasi segnale di classificazione dell’esperienza utente preesistente.
Dati vitali web misurano diversi elementi che vengono poi raccolti in tre punteggi di riepilogo come Dati vitali web principali: Largest Contentful Paint , Primo ritardo di input e Cumulative Layout Shift [19459010 ]. Ognuno di questi deve essere ottimizzato per raggiungere le soglie di prestazioni (tempi) per evitare di soffrire di colleghi più performanti che potrebbero apparire sopra di te nelle classifiche di Google.
Due nuove funzionalità degne di nota
La prima nuova caratteristica degna di nota per noi è che Chrome 88 ora supporta una proprietà CSS chiamata aspect-ratio . Le regole delle proporzioni consentono di definire rapporti per gli elementi che, in determinate circostanze, possono aiutarti a ottimizzare lo spostamento cumulativo del layout . Ad oggi, è possibile definire un attributo HTML di larghezza o altezza in un tag immagine e la maggior parte dei browser proverà a calcolare l’attributo mancante.
Un designer lo farebbe con immagini variabili, come quelle fornite dagli utenti, per adattare il risultato a un sistema di layout. Questa capacità è ora disponibile per essere applicata come regola CSS alle immagini e ad altri tipi di elementi. Tra gli altri vantaggi, questa nuova regola può aiutarti a pianificare meglio layout reattivi senza dover ricorrere a calcoli delle dimensioni percentuali di hacking per ottenere un aspetto finale del layout.
Web Vitals corsia in Chrome 88 DevTools
L’altra nuova entusiasmante funzionalità è che Web Vitals ora ottiene la propria corsia di segnalazione in Chrome 88 DevTools. Sebbene i flag di corsia dei tempi per queste (e poche altre) metriche siano disponibili da tempo, c’è molto nuovo spazio riservato nella nuova corsia di Web Vitals per rapporti ancora più dettagliati.
Così com’è, le bandiere nella corsia Web Vitals sono codificate a colori con il verde per un punteggio di superamento e rosso per il mancato raggiungimento di una buona soglia di prestazione. Passando il mouse su una particolare bandiera, viene visualizzata l’abbreviazione identificativa del nome della metrica e il tempo registrato in millisecondi. I colori per le metriche nella corsia dei tempi non sono indicativi di un punteggio.
C’è anche una nuova area di segnalazione delle attività lunghe che può essere utilizzata per allinearsi agli eventi del thread principale per rilevare quali script vengono valutati in modo da poter risolvere i problemi se è possibile ottimizzare o eliminare il codice.
Per aggiungere la nuova corsia di Web Vitals a DevTools, accedere alla scheda Prestazioni e selezionare la casella di controllo associata. Puoi farlo anche dopo che i dati del rapporto sono stati raccolti nel caso in cui esegui un rapporto prima di selezionare la casella di controllo e puoi chiudere Chrome che ricorderà come hai lasciato lo stato della casella di controllo dopo l’ultima registrazione quando lo riaprirai.
Tieni presente che qualsiasi punteggio particolare è un riepilogo di altre metriche che dovresti cercare per trovare attività che precedono o allineano una pietra miliare del punteggio al fine di capire quale potrebbe essere la causa del problema. Le corsie di segnalazione di rete e CPU possono aiutarti a rilevare di cosa si tratta. Potresti trovare riferimenti a script che bloccano il rendering per valutare e caricare eventi di immagini in cui potresti scoprire l’opportunità di comprimerli o ridimensionarli.
Rapporti sulle prestazioni dell’avviamento a freddo
Affinché queste metriche siano più accurate, dovrai caricare un rapporto sul rendimento senza le risorse attualmente memorizzate nella cache del browser. Avvia una registrazione e tieni premuto shift mentre aggiorni la pagina nel browser, il che dovrebbe forzare il browser a caricare tutte le risorse dalla rete. Puoi anche selezionare il pulsante di ricarica in DevTools nella scheda Performance. Tieni presente, tuttavia, che il rapporto risultante non acquisirà necessariamente tutto ciò che desideri.
Entrambi gli approcci sono validi. Un avvio a freddo con un processo di registrazione aperto consente di decidere quando iniziare a raccogliere informazioni con l’aggiornamento a turno e quando elaborare il risultato nel rapporto finale quando si fa clic per interrompere il processo di registrazione. Hai la capacità di selezione per restringere e ingrandire le aree di interesse lungo la sequenza temporale dei rapporti una volta caricato il rapporto. Chrome memorizza anche una cronologia dei rapporti che puoi cancellare quando è il momento di analizzare un’altra pagina.
Come è vero per tutti i segnali di classifica, nessun singolo fattore aumenterà il tuo punteggio al numero uno su tutta la linea. Tieni presente che i siti Web con prestazioni scadenti possono comunque classificarsi bene quando il contenuto è indicizzabile e di una qualità che attira gli utenti della ricerca. Per quanto riguarda la SEO tecnica, Core Web Vitals non indica affatto che i tuoi contenuti siano indicizzabili. Questo dovrebbe servire come avvertimento che ci può essere molto di più da risolvere una volta che hai ottenuto punteggi di prestazioni eccellenti.
Perché dovremmo preoccuparci
L’aggiornamento di Page Experience in arrivo nel giro di pochi mesi è una ragione sufficiente per preoccuparci dei nostri punteggi Core Web Vitals. Google ci ha dato tutto il tempo per preparare i nostri siti al cambiamento. Come professionisti dell’ottimizzazione, cerchiamo ogni vantaggio che possiamo utilizzare per migliorare le classifiche e Web Vitals è qualcosa che senza dubbio migliora le cose sia per gli utenti che per i motori di ricerca.