Scopri tre nuovi lanci sulle prestazioni web da I/O 2019.
Durante la conferenza"Speed at Scale" alla conferenza Google I/O 2019, abbiamo annunciato tre aspetti che speriamo possano migliorare le prestazioni 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 di prestazioni. I budget delle prestazioni stabiliscono gli standard per le prestazioni del tuo sito. Ancora più importante, consentono di identificare e correggere facilmente le regressioni delle prestazioni prima di procedere con la distribuzione.
LightWallet è disponibile nella versione più recente dell'interfaccia a riga di comando di Lighthouse e la configurazione richiede solo un paio di minuti. Queste istruzioni forniscono ulteriori informazioni.
Hai dubbi su quali siano i tuoi budget? Prova il nostro Calcolatore prezzi sperimentale, che può generare una configurazione del budget compatibile con LightWallet.
Il caricamento lento di immagini a livello di browser e iframe arriva sul web
Le pagine web contengono spesso un numero elevato di immagini, che contribuiscono all'utilizzo dei dati, al caricamento di page-bloat e alla lentezza delle pagine. Molte di queste immagini sono fuori schermo e l'utente deve scorrere per visualizzarle.
Finora, hai dovuto risolvere il problema relativo al caricamento lento delle immagini utilizzando una libreria JavaScript, ma la situazione potrebbe cambiare a breve. Questa estate, Chrome lancerà il supporto per l'attributo loading, che porta sul web il caricamento lento 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 scorrono nelle vicinanze. loading supporta tre valori:
lazy: è una buona candidata per il caricamento lento.eager: non è un buon candidato per il caricamento lento. Carica subito.auto: il browser determinerà se il caricamento è lento o meno.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
L'euristica esatta per "quando l'utente scorre nelle vicinanze" viene lasciata al browser. In generale, speriamo che i browser inizino a recuperare immagini differite e contenuti iframe un po' prima che entrino nell'area visibile.
L'attributo loading è implementato dietro 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.
È disponibile una scrittura sulla funzionalità di caricamento lento con ulteriori dettagli.
Google Fonts ora supporta font-display come parametro di ricerca
Abbiamo annunciato che il supporto di font-display è ora disponibile in produzione per tutti i caratteri di Google 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 di riserva, a seconda del tempo di caricamento. Supporta diversi 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 incorporamenti di codice predefiniti (come mostrato di seguito). Ci auguriamo che questo stimoli altri sviluppatori a provare questa entusiasmante aggiunta.
Ecco una demo su Glitch relativa all'utilizzo degli annunci display
con più famiglie di caratteri. Provala con l'emulazione di rete
DevTools
per vedere l'impatto di font-display: swap.
Guarda per altro
Abbiamo parlato anche di diversi case study di produzione sull'utilizzo di pattern di prestazioni avanzati per migliorare l'esperienza utente. Questi includevano siti che sfruttavano CDN di immagini, compressione Brotli, pubblicazione intelligente di JavaScript e precaricamento per le pagine. Guarda la conversazione per scoprire di più :)