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 stabiliscono gli standard per le prestazioni del sito. Ancora più importante, consentono di identificare e correggere facilmente le regressioni del rendimento prima della spedizione.
LightWallet è disponibile nell'ultima versione dell'interfaccia a riga di comando di Lighthouse e la configurazione richiede solo pochi minuti. 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 di iframe e immagine a livello di browser sul web arriva
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 a ora, per risolvere il problema del caricamento differito 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 <img> e <iframe> standardizzato.
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 per font-display è ora disponibile in produzione per tutti i caratteri Google tramite il parametro display query-string:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Il descrittore font-display ti consente di decidere come verranno visualizzati o di riserva i tuoi caratteri web, a seconda di quanto tempo impiegano per essere caricati. 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ù :)