Scopri di più su tre nuovi lanci relativi alle prestazioni web presentati alla conferenza I/O 2019.
Durante il talk"Velocità su larga scala" alla conferenza Google I/O 2019, abbiamo annunciato tre novità che ci auguriamo miglioreranno il rendimento del web nel corso del prossimo anno.
Lighthouse ora supporta il budget delle prestazioni
LightWallet è una nuova funzionalità di Lighthouse che aggiunge il supporto per i budget delle prestazioni. I budget per le prestazioni consentono di stabilire gli standard per le prestazioni del tuo sito. Ancora più importante, consentono di identificare e correggere facilmente le regressioni del rendimento prima della spedizione.
LightWallet è disponibile nella versione più recente di Lighthouse CLI e richiede solo un paio di minuti per la configurazione. Queste istruzioni forniscono ulteriori informazioni.
Non sai quali dovrebbero essere i tuoi budget? Prova il nostro Calcolatore del budget per il rendimento sperimentale, che può generare una configurazione del budget compatibile con LightWallet.
Il caricamento lento delle immagini e degli iframe a livello di browser è disponibile sul web
Le pagine web contengono spesso un numero elevato di immagini, che contribuiscono all'utilizzo dei dati, al gonfiamento delle pagine e al caricamento più lento delle pagine. Molte di queste immagini non sono visibili sullo schermo e richiedono all'utente di scorrerle per visualizzarle.
Fino ad ora, per risolvere il problema del caricamento lento delle immagini era necessario utilizzare una libreria JavaScript, ma a breve la situazione potrebbe cambiare. Questa estate, Chrome lancerà il supporto per l'attributo loading, che introduce sul web il caricamento differito standardizzato <img>
e <iframe>
.
L'attributo loading
consente a un browser di posticipare il caricamento di immagini e iframe fuori schermo finché gli utenti non li visualizzano scorrendo. loading
supporta tre valori:
lazy
: è un buon candidato per il caricamento lento.eager
: non è una buona scelta per il caricamento differito. Carica subito.auto
: il browser determinerà se eseguire o meno il caricamento differito.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Le strategie euristiche esatte per "quando l'utente scorre vicino" sono lasciate al browser. In generale, ci auguriamo che i browser inizino a recuperare le immagini e i contenuti iframe differiti poco prima che vengano visualizzati nel viewport.
L'attributo loading
è implementato dietro i flag in Chrome Canary. Puoi provare questa demo in Chrome 75 e versioni successive con i flag about://flags/#enable-lazy-image-loading
e about://flags/#enable-lazy-frame-loading
attivati.
Per maggiori dettagli, è disponibile un articolo sulla funzionalità di caricamento lento.
Google Fonts ora supporta font-display come parametro di query
Abbiamo annunciato che il supporto di font-display è ora disponibile in produzione per tutti i Google Fonts tramite il parametro della stringa di query display:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Il descrittore font-display
ti consente di decidere come verranno visualizzati i caratteri web o il fallback, a seconda del tempo necessario per il loro caricamento. Supporta una serie di valori, tra cui auto
, block
, swap
, fallback
e optional
.
In precedenza, l'unico modo per specificare font-display
per i caratteri web di Google Fonts era ospitarli autonomamente, ma questa modifica elimina la necessità di farlo.
La documentazione di Google Fonts è stata aggiornata per includere font-display
negli script incorporati predefiniti (come mostrato di seguito). Ci auguriamo che questo incoraggi un maggior numero di sviluppatori a provare questa nuova funzionalità.
Ecco una demo su Glitch dell'utilizzo di display con più famiglie di caratteri. Prova con l'emulazione della rete di DevTools per vedere l'impatto di font-display: swap
.
Guarda altro
Il nostro intervento ha anche trattato diversi casi di studio di produzione sull'utilizzo di pattern di prestazioni avanzati per migliorare l'esperienza utente. tra cui siti che utilizzano CDN di immagini, compressione Brotli, caricamento e precaricamento di JavaScript intelligenti per velocizzare le pagine. Guarda il talk per scoprire di più :)