Tecniche correlate a CSS per ottimizzare i Segnali web
Il modo in cui scrivi gli stili e i layout delle app può avere un grande impatto sui Segnali web essenziali. Questo vale in particolare per Cumulative Layout Shift (CLS) e Largest Contentful Paint (LCP).
Questo articolo illustra le tecniche correlate a CSS per ottimizzare i Segnali web. Queste ottimizzazioni sono suddivise in base a diversi aspetti di una pagina: layout, immagini, caratteri, animazioni e caricamento. Lungo il percorso, vedremo come migliorare una pagina di esempio:
Layout
Inserimento di contenuti nel DOM
Se inserisci contenuti in una pagina dopo che i contenuti circostanti sono già stati caricati, tutti gli altri contenuti presenti nella pagina vengono spinti verso il basso. Questo provoca cambiamenti del layout.
Le notifiche relative ai cookie, in particolare quelle visualizzate 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 durante il caricamento includono annunci e incorporamenti.
Identificazione
Il controllo "Evita variazioni di layout di grandi dimensioni" di Lighthouse identifica gli elementi della pagina che sono stati spostati. Per questa demo, i risultati hanno il seguente aspetto:
La notifica relativa ai cookie non è elencata in questi risultati perché
la notifica stessa non si sposta durante il caricamento. determina invece lo spostamento degli elementi al di sotto della pagina (ovvero div.hero e article). Per ulteriori informazioni su
come identificare e correggere le variazioni del layout, consulta la pagina relativa al debug
delle variazioni di layout.
Correggi
Posiziona la notifica relativa ai cookie in fondo alla pagina utilizzando il posizionamento assoluto o fisso.
Prima:
.banner {
position: sticky;
top: 0;
}
Dopo:
.banner {
position: fixed;
bottom: 0;
}
Un altro modo per correggere questa variazione del layout è riservare spazio per l'informativa sui cookie nella parte superiore della schermata. Questo approccio è ugualmente efficace. Per ulteriori informazioni, consulta Best practice per le notifiche 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 di pagina che possono essere l'elemento LCP includono blocchi di testo e immagini poster video. Il momento in cui viene caricato l'elemento LCP determina la metrica LCP.
È importante notare che l'elemento LCP di una pagina può variare in base al caricamento e al caricamento della pagina, 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 di LCP.
Nel sito di esempio, l'immagine di sfondo della notifica relativa ai cookie è in realtà un'immagine di grandi dimensioni. Per migliorare la metrica LCP, puoi applicare il gradiente in CSS anziché caricare un'immagine per creare l'effetto.
Correggi
Modifica il CSS .banner in modo da utilizzare un gradiente CSS anziché 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 averla caricata. Se il caricamento dell'immagine si verifica dopo il rendering della pagina, ma non è stato riservato nessuno spazio per l'immagine, si verifica una variazione del layout quando viene visualizzata l'immagine. Nella demo, l'immagine hero causa una variazione del layout al caricamento.
Identificazione
Per identificare le immagini senza valori width e height espliciti, utilizza il controllo "Gli elementi immagine hanno larghezza e altezza esplicite" di Lighthouse.
In questo esempio, sia l'immagine hero che 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 pubblicare i caratteri rapidamente.
Ritardo del rendering del testo
Per impostazione predefinita, un browser non esegue immediatamente il rendering di un elemento di testo se i caratteri web associati non sono ancora stati caricati. Ciò viene fatto per evitare "lampeggi di testo senza stile" (FOUT). In molte situazioni, questo ritarda la First Contentful Paint (FCP). In alcuni casi, questo ritarda la visualizzazione di Largest Contentful Paint (LCP).
Variazioni del layout
Sebbene sia eccellente per mostrare rapidamente i contenuti all'utente, lo scambio dei caratteri ha il potenziale per causare variazioni del layout. Queste variazioni del layout si verificano quando un carattere web e il suo carattere di riserva occupano quantità diverse di spazio sulla pagina. L'utilizzo di caratteri di proporzioni simili ridurrà al minimo le dimensioni di queste variazioni del layout.
Identificazione
Per visualizzare i caratteri caricati su una determinata pagina, apri la scheda Rete in DevTools e filtra per Carattere. I caratteri possono essere file di grandi dimensioni, quindi è preferibile utilizzare meno caratteri.
Per sapere quanto tempo occorre per richiedere il carattere, fai clic sulla scheda Tempistiche. Prima viene richiesto un carattere, prima potrà essere caricato e utilizzato.
Per vedere la catena di richieste di un carattere, fai clic sulla scheda Initiator. In linea di massima, più breve è la catena di richieste, prima potrà essere richiesto il carattere.
Correggi
Questa demo utilizza l'API Google Fonts. Google Fonts consente di caricare
i caratteri tramite i tag <link> o un'istruzione @import. Lo snippet di codice <link> include un suggerimento per le risorse preconnect. Di conseguenza, l'invio dei fogli di stile dovrebbe essere più rapido rispetto all'utilizzo della versione @import.
A livello generale, i suggerimenti sulle risorse sono un modo per suggerire al browser che dovrà configurare una determinata connessione o scaricare una determinata risorsa. Di conseguenza, il browser darà la priorità a queste azioni. Quando utilizzi i suggerimenti sulle risorse, tieni presente che dare priorità a una determinata azione sottrae risorse del browser alle altre azioni. I suggerimenti delle risorse devono quindi essere usati con cura e non per tutto. Per ulteriori informazioni, consulta Stabilire in anticipo le 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> a <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 con le origini utilizzate da Google Fonts e di caricare il foglio di stile che contiene la dichiarazione dei caratteri 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 variazioni
del layout. Esistono due tipi di animazioni che dovresti evitare di usare:
animazioni che attivano il layout ed
effetti "simile alle animazioni" 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 l'articolo Come creare animazioni CSS ad alte prestazioni.
Identificazione
Il controllo "Evita animazioni non composte" di Lighthouse può essere utile per identificare le animazioni con prestazioni non elevate.
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 fondamentale
I fogli di stile bloccano la visualizzazione. Ciò significa che il browser trova un foglio di stile e smette di scaricare altre risorse fino a quando il browser non ha scaricato e analizzato il foglio di stile. Questo potrebbe ritardare l'LCP. Per migliorare le prestazioni, valuta la possibilità di rimuovere CSS inutilizzato, incorporare CSS critici e rinviare il CSS non critico.
Conclusione
Sebbene ci sia ancora spazio per ulteriori miglioramenti (ad esempio, l'utilizzo della compressione delle immagini per pubblicare le immagini più rapidamente), queste modifiche hanno notevolmente migliorato i Segnali web di questo sito. Se il sito fosse reale, il passaggio successivo sarebbe raccogliere dati sulle prestazioni da utenti reali per valutare se raggiunge le soglie di Segnali web per la maggior parte degli utenti. Per ulteriori informazioni su Web Vitals, consulta la pagina Imparare i vitali web.