Velocità su larga scala: quali sono le novità nelle prestazioni web?

Scopri di più su tre nuovi lanci relativi alle prestazioni web presentati alla conferenza I/O 2019.

Katie Hempenius
Katie Hempenius

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.

Un report LightWallet che mostra quali asset superano il budget per le dimensioni dei file.

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>.

Caricamento lento a livello di browser che evidenzia i contenuti offscreen caricati on demand

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à.

Codice di incorporamento di Google Fonts con font-display incluso nell&#39;URL come parametro di query

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ù :)