CSS per Web Vitals

Tecniche correlate a CSS per l'ottimizzazione di Web Vitals

Katie Hempenius

Una Kravets

Il modo in cui scrivi gli stili e crei i layout può avere un grande impatto su Core Web Vitals. in particolare per Cumulative Layout Shift (CLS) e Largest Contentful Paint (LCP).

Questo articolo illustra le tecniche relative al CSS per l'ottimizzazione di Web Vitals. Queste ottimizzazioni vengono suddivise in base a diversi aspetti di una pagina: layout, immagini, caratteri, animazioni e caricamento. Lungo il percorso, esamineremo il miglioramento di una pagina di esempio:

Layout

Inserimento di contenuti nel DOM

Se inserisci contenuti in una pagina dopo che quelli circostanti sono già stati caricati, espandi tutto il resto della pagina verso il basso. Ciò causa spostamenti del layout.

Le notifiche relative ai cookie, in particolare quelle posizionate nella parte superiore della pagina, sono un esempio comune di questo problema. Altri elementi della pagina che spesso causano questo tipo di variazione del layout al caricamento includono annunci e incorporamenti.

Identificazione

Il controllo Lighthouse "Evita significative variazioni di layout" identifica gli elementi della pagina che si sono spostati. Per questa demo, i risultati sono i seguenti:

La notifica sui cookie non è elencata in questi risultati perché la notifica stessa non cambia quando viene caricata. ma fa spostare gli elementi sottostanti nella pagina (ovvero div.hero e article). Per ulteriori informazioni su come identificare e correggere i cambiamenti di layout, consulta Eseguire il debug dei cambiamenti di layout.

Correggi

Posiziona la notifica sui cookie nella parte inferiore della pagina utilizzando il posizionamento assoluto o fisso.

Prima:

.banner {
  position: sticky;
  top: 0;
}

Dopo:

.banner {
  position: fixed;
  bottom: 0;
}

Un altro modo per correggere questo cambiamento di layout è riservare spazio per l'informativa sui cookie nella parte superiore dello schermo. Questo approccio è altrettanto efficace. Per ulteriori informazioni, consulta le best practice per l'informativa sui cookie.

Immagini

Immagini e Largest Contentful Paint (LCP)

Le immagini sono in genere l'elemento Largest Contentful Paint (LCP) di una pagina. Altri elementi della pagina che possono essere l'elemento LCP includono blocchi di testo e immagini di poster dei video. Il momento in cui viene caricato l'elemento LCP determina il valore LCP.

È importante notare che l'elemento LCP di una pagina può variare da un caricamento pagina all'altro, a seconda dei contenuti visibili all'utente quando la pagina viene visualizzata per la prima volta. Ad esempio, in questa demo, lo sfondo della notifica sui cookie, l'immagine hero e il testo dell'articolo sono alcuni dei potenziali elementi LCP.

Nel sito di esempio, l'immagine di sfondo della notifica sui cookie è in realtà un'immagine di grandi dimensioni. Per migliorare la metrica LCP, puoi invece colorare il gradiente in CSS, anziché caricare un'immagine per creare l'effetto.

Correggi

Modifica il CSS .banner per utilizzare un gradiente CSS al posto di un'immagine:

Prima:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

Dopo:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

Immagini e variazioni del layout

I browser possono determinare le dimensioni di un'immagine solo dopo il caricamento. Se il caricamento dell'immagine avviene dopo il rendering della pagina, ma non è stato riservato spazio per l'immagine, si verifica uno spostamento del layout quando l'immagine viene visualizzata. Nella demo, l'immagine hero causa una variazione del layout al caricamento.

Identificazione

Per identificare le immagini senza width e height esplicite, utilizza il controllo "Gli elementi immagine hanno larghezza e altezza esplicite" di Lighthouse.

In questo esempio, sia l'immagine hero sia l'immagine dell'articolo mancano degli attributi width e height.

Correggi

Imposta gli attributi width e height su queste immagini per evitare variazioni del layout.

Prima:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

Dopo:

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">

Caratteri

I caratteri possono ritardare il rendering del testo e causare variazioni del layout. Di conseguenza, è importante caricare i caratteri rapidamente.

Rendering del testo ritardato

Per impostazione predefinita, un browser non mostra immediatamente un elemento di testo se i caratteri web associati non sono stati ancora caricati. Ciò avviene per evitare un "lampo di testo senza stile" (FOUT). In molti casi, questo ritarda il First Contentful Paint (FCP). In alcuni casi, questo ritarda il Largest Contentful Paint (LCP).

Variazioni del layout

Lo scambio dei caratteri, sebbene sia eccellente per mostrare rapidamente i contenuti agli utenti, ha il potenziale per causare variazioni del layout. Queste variazioni di layout si verificano quando un carattere web e il suo carattere di riserva occupano spazio diverso nella pagina. L'utilizzo di caratteri di proporzioni simili ridurrà al minimo le dimensioni di queste variazioni del layout.

Identificazione

Per vedere i caratteri che vengono caricati in una pagina specifica, apri la scheda Rete in DevTools e filtra per Carattere. I caratteri possono essere file di grandi dimensioni, quindi in genere è meglio utilizzare solo un numero ridotto di caratteri per migliorare le prestazioni.

Per vedere il tempo necessario per la richiesta del carattere, fai clic sulla scheda Tempi. Prima viene richiesto un carattere, prima può essere caricato e utilizzato.

Per visualizzare la catena di richieste per un carattere, fai clic sulla scheda Iniziatore. In generale, più breve è la catena di richieste, più rapidamente è possibile richiedere il carattere.

Correggi

Questa demo utilizza l'API Google Fonts. Google Fonts offre la possibilità di caricare caratteri tramite tag <link> o un'istruzione @import. Lo snippet di codice <link> include un suggerimento per la risorsa preconnect. Ciò dovrebbe comportare un caricamento più rapido dei fogli di stile rispetto all'utilizzo della versione @import.

A un livello molto alto, puoi considerare i suggerimenti per le risorse come un modo per suggerire al browser di dover configurare una determinata connessione o scaricare una determinata risorsa. Di conseguenza, il browser darà la priorità a queste azioni. Quando utilizzi gli hint delle risorse, tieni presente che l'assegnazione della priorità a una determinata azione sottrae le risorse del browser ad altre azioni. Di conseguenza, gli hint devono essere usati in modo ponderato e non per tutto. Per maggiori informazioni, consulta la pagina Stabilire in anticipo connessioni di rete per migliorare la velocità percepita delle pagine.

Rimuovi la seguente istruzione @import dal foglio di stile:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

Aggiungi i seguenti tag <link> al <head> del documento:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Questi tag link indicano al browser di stabilire una connessione anticipata alle origini utilizzate da Google Fonts e di caricare il foglio di stile che contiene la dichiarazione del carattere per Montserrat e Roboto. Questi tag <link> devono essere inseriti il prima possibile in <head>.

Animazioni

Il modo principale in cui le animazioni influiscono su Web Vitals è quando causano cambiamenti nel layout. Esistono due tipi di animazioni che dovresti evitare: animazioni che attivano il layout ed effetti "simili a un'animazione" che spostano gli elementi della pagina. In genere, queste animazioni possono essere sostituite con equivalenti più performanti utilizzando proprietà CSS come transform, opacity e filter. Per ulteriori informazioni, consulta la sezione Come creare animazioni CSS ad alte prestazioni.

Identificazione

L'audit di Lighthouse "Evita animazioni non composite" può essere utile per identificare le animazioni con scarso rendimento.

Correggi

Modifica la sequenza di animazione slideIn in modo da utilizzare transform: translateX() anziché eseguire la transizione della proprietà margin-left.

Prima:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

Dopo:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

CSS critico

I fogli di stile bloccano la visualizzazione. Ciò significa che, quando il browser rileva un stylesheet, interrompe il download di altre risorse finché non lo ha scaricato e analizzato. Questo potrebbe ritardare LCP. Per migliorare le prestazioni, valuta la possibilità di rimuovere i CSS inutilizzati, di incorporare il CSS critico e di differire il CSS non critico.

Conclusione

Anche se sono ancora disponibili ulteriori miglioramenti (ad esempio, utilizzando la compressione delle immagini per pubblicare le immagini più rapidamente), queste modifiche hanno migliorato notevolmente i Web Vitals di questo sito. Se il sito fosse un sito reale, il passaggio successivo sarebbe raccogliere dati sulle prestazioni da utenti reali per valutare se soddisfa le soglie di Web Vitals per la maggior parte degli utenti. Per ulteriori informazioni su Web Vitals, consulta la sezione Informazioni su Web Vitals.