Mastering Core Web Vitals: una guida per migliorare l'esperienza dell'utente

Poiché l'e-commerce continua a dominare il mercato online, le aziende devono stare al passo con i tempi in termini di ottimizzazione del sito web. Un fattore chiave emerso negli ultimi anni è il concetto di Core Web Vitals. Nel 2020, Google ha stabilito metriche specifiche per questi elementi vitali del sito web, fornendo alle aziende di e-commerce un percorso più diretto per un migliore posizionamento del sito web. Ma cosa sono esattamente i Core Web Vitals e come possono le aziende ottimizzarli per ottenere il massimo impatto? In questo articolo, daremo un'occhiata più da vicino ai Core Web Vitals e condivideremo gli strumenti essenziali per ottimizzarli, in modo che il tuo sito di e-commerce possa stare al passo con la concorrenza.

Post correlato: 7 cose che i titolari di attività commerciali devono sapere su Core Web Vitals

Perché i Core Web Vitals sono così importanti

1. I Core Web Vitals incidono sulle classifiche di ricerca di Google del tuo sito

2. Sono fondamentali per fornire un'esperienza utente eccellente

3. L'ottimizzazione di Core Web Vitals può aumentare il traffico e le entrate del tuo sito

L'ottimizzazione di Core Web Vitals è essenziale per i proprietari e gli sviluppatori di negozi online per fornire un'esperienza utente ottimale, posizionarsi più in alto nei risultati di ricerca di Google e, in ultima analisi, aumentare le entrate. Queste tre metriche principali - Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS) - si basano sulla velocità di caricamento, interattività e presentazione visiva del tuo sito web.

Assegnando la priorità a queste metriche, il tuo sito web può fornire ai clienti un'esperienza fluida, reattiva e visivamente accattivante. Non trascurare i Core Web Vitals durante la progettazione o l'ottimizzazione del tuo sito Web, in quanto potrebbero fare la differenza tra un'esperienza utente buona e un'ottima e, in ultima analisi, avere un impatto sulle tue entrate.

Che cos'è la più grande vernice contenta (LCP)

Largest Contentful Paint (LCP) è una metrica cruciale che misura il tempo di caricamento dell'elemento di contenuto più significativo di una pagina web, come un'immagine o una casella di testo. È uno dei componenti critici di Core Web Vitals, un insieme di metriche essenziali per fornire un'esperienza utente senza soluzione di continuità. L'ottimizzazione dell'LCP del tuo sito Web può ridurre i tempi di caricamento della pagina e migliorare l'esperienza complessiva dell'utente, portando a una maggiore fidelizzazione e acquisizione dei clienti.

Noi di Perspective riceviamo frequenti richieste per migliorare l'LCP di Core Web Vitals. Di seguito puoi vedere un esempio di ottimizzazione del Largest Contentful Paint (LCP), che abbiamo fatto per uno dei nostri clienti:

1. La più grande pittura contenta prima dell'ottimizzazione

2. La più grande vernice contenta dopo l'ottimizzazione

Leggi anche: Chromebook Acer vs Lenovo: qual è quello giusto per te?

Quali sono le cause più comuni di vernice con contenuto più grande basso:

1. tempo di risposta del server lento

2. JS e CSS non ottimizzati

3. caricamento lento delle risorse

4. rendering lento sul lato client.

Come aumentare la più grande vernice contenta

Abbiamo creato un piccolo elenco di metodi di ottimizzazione, che vengono costantemente applicati nel nostro lavoro, e pertanto consigliamo quanto segue:

1. Elimina il codice JS che non è in uso e minimizza i file in modalità di produzione.

2. È meglio scrivere regole CSS in moduli (blocchi) in modo che la stilizzazione di alcuni selettori non ne fermi altri. Inoltre, consigliamo di evitare di creare una lunga catena di selettori. Tutti i file CSS, o le librerie da testare, devono essere archiviati localmente, non scaricati tramite CDN.

3. Comprimi le immagini per caricarle più velocemente e utilizza nuovi formati. Ad esempio, converti JPEG in WebP, che è di dimensioni 1/3 senza perdere qualità.

4. Si consiglia di utilizzare immagini responsive (link) per ottimizzare le immagini in termini di velocità di download ed esperienza utente. C'è un punto importante qui. Il tag img ha due attributi critici:

1. src – per indicare la fonte dell'immagine originale. Le immagini dall'attributo src vengono scansionate e considerate nella classifica dai motori di ricerca, quindi è necessario specificare qui l'immagine di migliore qualità.

2. srcset – consente di specificare una varietà di versioni dell'immagine. Dalle immagini nell'attributo srcset, il browser seleziona un'immagine da caricare e visualizzare a seconda delle dimensioni dello schermo dei dispositivi desktop o mobili su cui viene eseguito.

5. sconsigliamo di aggiungere loading=”lazy” nell'attributo del tag <img>.

Rimuovi l'attributo pigro per aumentare la pittura più grande e ricca di contenuti

Che cos'è lo spostamento cumulativo del layout (CLS)

Il Cumulative Layout Shift (CLS) è una metrica cruciale per la stabilità visiva che quantifica l'entità dei cambiamenti di layout imprevisti durante il caricamento della pagina. Viene misurato dalla somma di tutti i punteggi di spostamento del layout che superano una soglia di 0,1. Il miglioramento di CLS è diventato una priorità assoluta per le aziende poiché l'esperienza dell'utente è al centro dello sviluppo web moderno. Pertanto, non sorprende che i clienti richiedano frequentemente miglioramenti a questo indicatore chiave di prestazione.

Leggi anche: La crescita dei casinò dal vivo nel 2023

Quali sono le cause più comuni di uno scarso Cumulative Layout Shift (CLS)

Gli indicatori visivi di stabilità sono fondamentali per garantire un'esperienza utente fluida e fluida. Tuttavia, una scarsa stabilità visiva può essere causata da diversi fattori tecnici. Alcuni colpevoli comuni includono il dimensionamento di immagini e file multimediali, query GraphQL e caroselli non ottimizzati.

DIMENSIONAMENTO NON CORRETTO DELL'IMMAGINE E DEI FILE MULTIMEDIALI

Quando le immagini oi file multimediali non hanno una dimensione specificata, il browser non può allocare la quantità di spazio appropriata quando l'elemento viene caricato. Ciò può comportare un layout di pagina che cambia costantemente, causando un'esperienza utente scadente.

QUERIES GRAPHQL NON OTTIMIZZATE

Quando si caricano immagini o blocchi GraphQL su un'app Web progressiva (PWA), la mancata prenotazione dello spazio può causare il "salto" della pagina dopo il caricamento. Ciò può portare a cambiamenti di layout scadenti e avere un impatto negativo sulle metriche delle prestazioni.

CAROSELLE NON OTTIMIZZATE

Un carosello non ottimizzato che utilizza animazioni non fluide e non combinate può attivare un ricalcolo del layout di pagina, con conseguenti punteggi CLS (Cumulative Layout Shift) scadenti. Sebbene un leggero spostamento possa essere appena percettibile per l'utente, può avere un impatto significativo sulla modifica complessiva del layout della pagina e sulla stabilità visiva.

Come migliorare l'indicatore di stabilità visiva e lo spostamento cumulativo del layout

UTILIZZO DEI SEGNALIBRI

L'implementazione dei segnaposto è una tecnica ampiamente adottata per migliorare le prestazioni percepite di un sito web. I segnaposto fungono da segnali visivi che indicano che il download è in corso e che il sito funziona correttamente. L'approccio più efficace per le immagini è l'impostazione degli attributi di altezza e larghezza.

Utilizzo dei segnaposto per migliorare il punteggio delle prestazioni in Core Web Vitals

Questa strategia consente al browser di riservare lo spazio necessario per le immagini prima del caricamento completo, evitando spostamenti di layout imprevisti. Ecco un esempio di implementazione di questa tecnica utilizzando il tag img.

<img data-src=”image.webp” width=”380″ height=”120″ alt=”image”>

Definendo gli attributi di altezza e larghezza, il browser può allocare spazio per l'immagine e impedire che il layout si sposti quando l'immagine viene caricata. Di conseguenza, gli utenti sperimenteranno un'esperienza di navigazione più fluida e visivamente più stabile.

DASPLAY FRONTALE: SWAP

Per ottenere il punteggio CLS (Cumulative Layout Shift) ottimale, gli sviluppatori possono utilizzare la proprietà font-display: swap per visualizzare il testo nel carattere di sistema prima che il file del carattere personalizzato sia stato caricato completamente. La regola font-face nel file di font CSS richiesto deve specificare i percorsi del file di font e includere la proprietà font-display: swap.

Ecco un esempio di come definire la regola font-face con la proprietà font-display: swap:

@font-face {Famiglia di caratteri: “Proxima Nova”;src: url(“../fonts/proximanova-regular.woff2”) format(“woff2”);font-display: swap;}

Utilizzando la proprietà font-display: swap, il browser visualizzerà immediatamente il testo nel carattere di sistema finché il file del carattere personalizzato non sarà completamente caricato. Questa tecnica può prevenire cambiamenti di layout imprevisti e migliorare la stabilità visiva della pagina, con conseguente migliore esperienza utente.

Leggi anche: L'impatto delle condizioni economiche globali sul valore della criptovaluta

TRASFORMAZIONE CSS

La funzione di trasformazione CSS è uno strumento influente che gli sviluppatori possono utilizzare per migliorare le prestazioni del proprio sito e l'esperienza dell'utente. Ad esempio, l'utilizzo della trasformazione CSS può aiutare a mitigare i problemi relativi al caricamento dei caroselli di immagini, risultando in un'esperienza di navigazione più veloce e più user-friendly.

Quando si ottimizza il caricamento dei blocchi CMS (soprattutto nei progetti PWA) tramite elementi HTML GraphQL, si consiglia di impostare le proprietà CSS con un'altezza fissa. Questo approccio può aiutare a prevenire cambiamenti di layout imprevisti e garantire una pagina visivamente stabile dopo il caricamento.

Implementando queste tecniche, le aziende possono migliorare il punteggio Core Web Vitals e fornire un'esperienza utente più fluida e piacevole. In uno dei nostri casi recenti, abbiamo notevolmente migliorato il punteggio CLS aggiungendo la proprietà font-display: swap nel file CSS, impostando un'altezza minima e ottimizzando il caricamento dei caratteri (@font-face).

1. NEGOZIO ONLINE PRIMA DELL'OTTIMIZZAZIONE DI Core Web VITALS

2. NEGOZIO ONLINE DOPO L'OTTIMIZZAZIONE DI Core Web VITALS

Cos'è il First Input Delay (FID)?

First Input Delay (FID) è una metrica critica che misura l'interattività di un sito web. Il First Input Delay misura il tempo impiegato da un sito per rispondere alla prima interazione di un utente con una pagina, ad esempio facendo clic su un pulsante o digitando in un campo del modulo.

Usare FID in Magento 2

In Magento 2, molte interazioni dell'utente possono influenzare il FID del sito, come fare clic su un pulsante di chat dal vivo, aggiungere un prodotto al carrello o completare un acquisto. Se queste interazioni non sono reattive e non forniscono un feedback immediato all'utente, possono risultare in un'esperienza utente lenta e frustrante.

Per garantire un'esperienza utente ottimale, è essenziale ottenere un punteggio FID inferiore a 100 ms. Ciò può essere ottenuto attraverso varie tecniche di ottimizzazione, come la riduzione al minimo del tempo di esecuzione di JavaScript, l'ottimizzazione di script di terze parti e l'ottimizzazione del tempo di risposta del server. Ottimizzando FID, le aziende possono fornire un sito Web più reattivo e coinvolgente che mantiene gli utenti coinvolti e soddisfatti.

Come ottimizzare il First Input Delay

COMPITO DECOMPOSIZIONE

Un approccio consigliato per migliorare il First Input Delay (FID) consiste nel suddividere le attività più lunghe in attività secondarie più piccole e più gestibili. Le attività lunghe possono sovraccaricare il thread principale, ostacolando l'elaborazione e l'esecuzione dell'input dell'utente. Qualsiasi segmento di codice che impedisce il flusso per più di 50 millisecondi si qualifica come un'attività lunga.

L'accertamento del FID richiede l'esecuzione di misurazioni in condizioni reali, poiché un'autentica interazione dell'utente con la pagina Web è essenziale per ottenere misurazioni precise.

TEST IN CONDIZIONI REALI

Per misurare accuratamente il First Input Delay (FID), si consiglia di utilizzare strumenti specializzati che misurino le prestazioni in condizioni reali. Alcuni di questi strumenti includono:

1. Test PageSpeed ​​Insights;

2. Search Console (rapporto Core Web Vitals);

3. Rapporto sull'esperienza utente di Chrome;

Poiché il FID richiede l'interazione dell'utente, non è possibile condurre test in un ambiente di laboratorio. Al contrario, le metriche sul campo catturano le prestazioni del mondo reale analizzando il comportamento degli utenti. Tuttavia, il Total Blocking Time (TBT), una metrica che valuta il periodo tra il First Contentful Paint (FCP) e il Time to Interactive (TTI), può essere misurato in un ambiente di laboratorio ed è ben correlato con il FID in condizioni di campo. TBT è anche abile nell'identificare i problemi legati all'interattività. Di conseguenza, qualsiasi ottimizzazione che migliora il TBT in un ambiente di laboratorio migliorerà anche il FID per gli utenti. Lighthouse è uno strumento in grado di misurare efficacemente il TBT.

Leggi anche: Una guida dettagliata alla creazione di una vetrina Shopify personalizzata

ABILITA IL DOWNLOAD SU RICHIESTA

È possibile utilizzare codice di terze parti per abilitare il download su richiesta per le pagine web. Ad esempio, puoi abilitare il download su richiesta in modo che il banner in fondo alla pagina o l'annuncio venga visualizzato solo quando scorrono vicino alla vista. L'idea principale è quella di scaricare elementi Web che forniscono il valore più significativo agli utenti, non quelli che possono essere scaricati alla fine della linea, come priorità.

OTTIMIZZA JAVASCRIPT

Per migliorare le prestazioni del sito Web, è fondamentale eliminare tutti i file JavaScript non necessari. Un approccio consigliato consiste nel posticipare il download dei file JavaScript finché non sono necessari. Questa tecnica consente inizialmente al browser di ottenere elementi Web critici come HTML e CSS. Successivamente, gli script possono essere valutati, facilitando così un tempo di caricamento più rapido. L'adozione di questa strategia è particolarmente utile per i siti Web con estensioni JavaScript sostanziali, come l'estensione Mega Menu utilizzata da molti negozi Magento. Questa tecnica consente ai proprietari di siti Web di semplificare il processo di caricamento e fornire un'esperienza utente più efficiente. Pertanto, la rimozione di JavaScript inutilizzato è una tecnica di ottimizzazione fondamentale che dovrebbe essere considerata per migliorare le prestazioni del sito web.

Più indicatori per migliorare i Core Web Vitals

Oltre ai tre principali parametri vitali del Core Web di cui sopra, esistono diverse metriche supplementari.

Prima vernice contenta (FCP)

First Contentful Paint (FCP) è una metrica preziosa che aiuta a misurare il tempo impiegato da una pagina per visualizzare l'immagine iniziale o il blocco di testo. Questa metrica include il tempo di elaborazione per le richieste DNS, le richieste del server, le operazioni lato server e il rendering primario DOM. Mentre fattori come il DNS e la velocità della rete sono al di fuori del nostro controllo, la riduzione del tempo di elaborazione per le attività lato server e l'ottimizzazione del caricamento di stili e script può avere un impatto significativo sulle prestazioni. Nello specifico, Google consiglia di dare la priorità all'inclusione dei soli stili critici nella sezione principale della pagina Web e, se possibile, di utilizzare i tag di stile anziché i tag di collegamento per ridurre al minimo le richieste del server non necessarie.

Per migliorare ulteriormente le prestazioni del sito Web, Google Analytics fornisce una vasta gamma di informazioni sul comportamento e sul coinvolgimento degli utenti. Ad esempio, utilizzando il rapporto Tempi utente, i proprietari di siti Web possono monitorare la durata di azioni ed eventi specifici, inclusi caricamenti di pagine, interazioni degli utenti e altri eventi personalizzati. Questi dati possono aiutare a identificare le aree del sito Web che richiedono l'ottimizzazione e monitorare l'efficacia di eventuali modifiche apportate.

Metrica dell'indice di velocità

Mentre FCP misura il tempo necessario per la visualizzazione del primo elemento, la metrica Speed ​​Index (SI) cattura la velocità complessiva di caricamento delle pagine web considerando il tempo necessario affinché la pagina diventi completamente visibile all'utente. Fornisce una panoramica completa delle prestazioni di caricamento della pagina e considera gli effetti della velocità della rete e del tempo di elaborazione del server. Sfruttando una combinazione di FCP e SI, i proprietari dei siti possono ottenere una panoramica completa delle prestazioni del sito Web e adottare le misure appropriate per migliorare l'esperienza dell'utente.

SI prende in considerazione vari fattori che influiscono sulle prestazioni delle pagine Web, tra cui la velocità della rete, il tempo di elaborazione del server e la dimensione delle risorse caricate. La metrica calcola la completezza visiva di una pagina Web a intervalli regolari durante il processo di caricamento e assegna un punteggio che rappresenta la velocità della pagina. Più basso è il punteggio SI, più veloce è il caricamento della pagina e migliore è l'esperienza dell'utente.

Per migliorare SI, gli sviluppatori Web possono utilizzare una varietà di tecniche di ottimizzazione, inclusa la riduzione al minimo delle risorse esterne come CSS e JavaScript, la riduzione delle dimensioni delle immagini e l'utilizzo della memorizzazione nella cache del browser per accelerare il caricamento delle risorse. Analizzando i punteggi SI con strumenti come Google Analytics e WebPageTest, i proprietari di siti web possono identificare le aree che richiedono l'ottimizzazione e apportare modifiche per migliorare le prestazioni del sito web. In definitiva, migliorando le prestazioni del sito Web e migliorando l'esperienza dell'utente, i proprietari di siti Web possono migliorare il coinvolgimento, aumentare le conversioni e far crescere le proprie attività.

Interazione con Next Paint

Interaction to Next Paint (INP) è una metrica critica che misura il tempo che intercorre tra l'interazione di un utente con la pagina Web e la visualizzazione di una risposta visiva. Questa metrica è particolarmente rilevante per le pagine che richiedono frequenti interazioni con l'utente, come piattaforme di social media e siti di e-commerce. INP fornisce preziose informazioni sulla reattività di una pagina Web e aiuta a identificare le aree che richiedono l'ottimizzazione per migliorare l'esperienza dell'utente.

L'INP viene calcolato selezionando l'interazione dell'utente più recente durante l'attuale visita della pagina Web e misurando il tempo impiegato dalla pagina Web per rispondere con un aggiornamento visivo. Questo aggiornamento può includere varie modifiche, come l'aspetto di una nuova immagine o blocco di testo, la posizione di un elemento o la regolazione delle dimensioni o l'esecuzione di un'animazione complessa. Misurando il tempo che intercorre tra l'interazione dell'utente e la risposta visiva, INP può fornire preziose informazioni sulle prestazioni percepite di una pagina Web e aiutare a identificare le aree che richiedono l'ottimizzazione.

Per migliorare INP, gli sviluppatori Web possono implementare una serie di tecniche di ottimizzazione, come ridurre al minimo l'uso di JavaScript e ridurre le dimensioni di immagini e video. Inoltre, l'utilizzo di moderne tecnologie Web come Intersection Observer API e Web Worker può aiutare a migliorare le prestazioni scaricando le attività ad alta intensità di risorse e riducendo il carico di lavoro sul thread principale.

Leggi anche: In che modo la traduzione francese avrà un impatto positivo sulla tua attività?

Tempo al primo morso (TTFB)

Il tempo al primo byte (TTFB) è una metrica cruciale per le prestazioni della pagina. Rappresenta il tempo impiegato dal server per ricevere il primo byte di dati dopo l'invio di una richiesta. Il valore TTFB è influenzato da vari fattori, come la latenza della rete, il tempo di elaborazione del server e la complessità del codice del sito web. Un valore TTFB più basso è auspicabile in quanto indica tempi di caricamento più rapidi e una migliore esperienza utente. Il tempo di risposta ideale per un sito Web è compreso tra 250 e 350 millisecondi, mentre qualsiasi valore superiore a 500 è considerato un tempo di risposta lungo e può influire negativamente sulle prestazioni del sito Web.

Per migliorare i valori del TTFB, i proprietari di siti Web possono utilizzare vari strumenti e tecniche. Una di queste tecniche è la memorizzazione nella cache delle query, che memorizza i dati a cui si accede di frequente in una cache, consentendo un accesso e un recupero più rapidi. Strumenti come Varnish possono fungere da livello di memorizzazione nella cache tra il server e l'utente, migliorando la velocità del sito Web e riducendo il carico del server. Per i progetti PWA, i service worker possono essere utilizzati per memorizzare nella cache il contenuto HTML, che può essere aggiornato quando il contenuto cambia, fornendo un accesso più rapido al contenuto a cui si accede di frequente.

Per i progetti Magento, la memorizzazione nella cache a pagina intera può anche migliorare i valori TTFB. La memorizzazione nella cache a pagina intera consente di memorizzare nella cache l'intera pagina, riducendo la necessità per il server di eseguire molto codice e recuperare informazioni dal database. Con la cache a pagina intera abilitata, il browser può leggere la pagina direttamente dalla cache, portando a tempi di caricamento più rapidi e una migliore esperienza utente.

Pertanto, non dovresti creare quante più pagine e blocchi ma ridurli il più possibile.

Strumenti consigliati per l'audit di Core Web Vitals

Lighthouse è un potente strumento di controllo delle prestazioni Web che può aiutare gli sviluppatori a diagnosticare problemi di velocità e interattività del sito Web. Combina le moderne tecnologie web e le migliori pratiche per fornire un'analisi approfondita delle prestazioni del sito Web e offre approfondimenti sull'ottimizzazione attuabili. Eseguendo gli audit Lighthouse, gli sviluppatori possono identificare rapidamente le opportunità per migliorare la velocità del sito, l'interattività e altre metriche chiave.

Il rapporto Lighthouse ha diverse sezioni:

1. Prestazioni del sito: analisi della velocità di download del sito

2. Funzionalità: descrive come velocizzare il tuo sito e migliorare le prestazioni.

3. Diagnosi: indica a cosa prestare attenzione e correggere

4. Programma web progressivo: audit dettagliato

5. Disponibilità: sezione su come migliorare il design UX

6. Best practice: i modi migliori per ottimizzare in modo affidabile la maggior parte dei siti

Prima di eseguire un controllo, puoi utilizzare il pulsante Analizza caricamento pagina per regolare il livello di controllo in base ai tuoi interessi (prestazioni, SEO, accessibilità, ecc.).

Il rapporto di verifica verrà visualizzato nella nuova finestra all'avvio della verifica. È anche disponibile per la misurazione sul sito web di PageSpeed ​​Insights.

Non dimenticare che le metriche dei parametri vitali del Core Web verranno rilevate negli ultimi 28 giorni.

Leggi anche: Quali sono i migliori laptop Apple MacBook Air e MacBook Pro?

Conclusioni

In conclusione, considera di contattare il nostro team di audit Core Web Vitals per garantire una buona esperienza utente per il tuo negozio online. Sebbene le metriche di Core Web Vitals possano sembrare astratte, rendono il tuo sito più user-friendly. Inoltre, queste metriche hanno una chiara connessione con la funzionalità del codice del tuo sito, rendendole relativamente facili da migliorare.

Sulla base della nostra esperienza, l'ottimizzazione di queste metriche può portare a rapidi miglioramenti del ranking e dei tassi di conversione. Misurando i Core Web Vitals, puoi individuare le aree di ottimizzazione e migliorare l'esperienza utente complessiva del tuo sito web. Quindi, non esitare a contattare il team di audit Core Web Vitals e vedere l'impatto positivo che può avere sul tuo business online!