Scopri tre nuovi lanci relativi alle prestazioni web di I/O 2019.
Durante l'intervento "Speed at Scale" alla conferenza Google I/O 2019, abbiamo annunciato tre novità 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 dei budget delle prestazioni. I budget delle prestazioni stabiliscono gli standard per le prestazioni del tuo sito. Ancora più importante, ti consentono di identificare e correggere le regressioni delle prestazioni prima della pubblicazione.
LightWallet è disponibile nella versione più recente della CLI di Lighthouse e la configurazione richiede solo un paio di minuti. Queste istruzioni forniscono ulteriori informazioni.
Non sai quali budget impostare? Prova il nostro calcolatore del budget delle prestazioni sperimentale, che può generare una configurazione del budget compatibile con LightWallet.
Il caricamento lento di immagini e iframe a livello di browser arriva sul web
Le pagine web spesso contengono un numero elevato di immagini, che contribuiscono all'utilizzo dei dati, al gonfiamento delle pagine e a caricamenti pagina più lenti. Molte di queste immagini sono fuori schermo e richiedono all'utente di scorrere per visualizzarle.
Finora, per risolvere il problema del caricamento lento delle immagini, era necessario utilizzare una libreria JavaScript, ma la situazione potrebbe cambiare presto. Quest'estate, Chrome lancerà il supporto per l'attributo loading, che porta il caricamento lento standardizzato di <img> e <iframe> sul web.
L'attributo loading consente a un browser di rimandare il caricamento delle immagini e degli iframe fuori schermo finché gli utenti non scorrono vicino a questi elementi. loading supporta tre valori:
lazy: è un buon candidato per il caricamento lento.eager: non è un buon candidato per il caricamento lento. Carica subito.auto: il browser determinerà se eseguire o meno il caricamento lento.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
L'euristica esatta per "quando l'utente scorre vicino" è lasciata al browser. In generale, ci auguriamo che i browser inizino a recuperare i contenuti di immagini e iframe differiti poco prima che entrino nell'area visibile.
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.
È disponibile un articolo con maggiori dettagli 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 eseguire il rendering o il fallback dei web font, a seconda del tempo necessario per il 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 web font di Google Fonts era l'hosting autonomo, ma questa modifica elimina questa necessità.
La documentazione di Google Fonts è stata aggiornata per includere font-display nei codici incorporati predefiniti (come mostrato di seguito). Ci auguriamo che questo incoraggi un maggior numero di sviluppatori a provare questa entusiasmante
aggiunta.
Ecco una demo su Glitch dell'utilizzo di display con più famiglie di caratteri. Fai una prova con l'emulazione di rete di DevTools per vedere l'impatto di font-display: swap.
Guarda per saperne di più
Il nostro intervento ha riguardato anche diversi case study di produzione sull'utilizzo di pattern di prestazioni avanzati per migliorare l'esperienza utente. Questi includevano siti che utilizzavano CDN di immagini, compressione Brotli, pubblicazione intelligente di JavaScript e precaricamento per velocizzare le pagine. Guarda il talk per saperne di più :)