Molti siti richiedono risorse pesanti, come immagini, non ottimizzate per determinate schermate, e inviano file CSS di grandi dimensioni contenenti stili che alcuni dispositivi non utilizzeranno mai. L'utilizzo di query supporti è una tecnica molto diffusa per pubblicare fogli di stile e asset personalizzati su schermate diverse, in modo da ridurre la quantità di dati trasferiti agli utenti e migliorare le prestazioni di caricamento delle pagine. Questa guida illustra come utilizzare le query supporti per inviare immagini delle dimensioni massime di quelle necessarie, una tecnica comunemente nota come immagini adattabili.
Prerequisiti
Questa guida presuppone che tu abbia familiarità con Chrome DevTools. Se preferisci, puoi utilizzare DevTools di un altro browser. Dovrai solo mappare gli screenshot di Chrome DevTools in questa guida alle funzionalità pertinenti del tuo browser preferito.
Informazioni sulle immagini di sfondo adattabili
Innanzitutto, analizza il traffico di rete della demo non ottimizzata:
- Apri la demo non ottimizzata in una nuova scheda di Chrome.
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Ricarica la pagina.
Vedrai che l'unica immagine richiesta è background-desktop.jpg, che ha una dimensione di 1006 kB:
Ridimensiona la finestra del browser e nota che il log di rete non mostra le nuove richieste effettuate dalla pagina. Ciò significa che viene utilizzato lo stesso sfondo dell'immagine per schermi di tutte le dimensioni.
Puoi visualizzare gli stili che controllano l'immagine di sfondo in style.css:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
Di seguito il significato di ciascuna delle proprietà utilizzate:
background-position: center center: centra l'immagine verticalmente e orizzontalmente.background-repeat: no-repeat: mostra l'immagine una sola volta.background-attachment: fixed: evita di far scorrere l'immagine di sfondo.background-size: cover: ridimensiona l'immagine in modo da coprire l'intero contenitore.background-image: url(images/background-desktop.jpg): l'URL dell'immagine.
Se combinati, questi stili indicano al browser di adattare l'immagine di sfondo a diverse altezze e larghezze dello schermo. Questo è il primo passo per ottenere uno sfondo reattivo.
L'utilizzo di un'unica immagine di sfondo per schermi di tutte le dimensioni presenta alcune limitazioni:
- La stessa quantità di byte viene inviata, a prescindere dalle dimensioni dello schermo, anche quando per alcuni dispositivi, ad esempio gli smartphone, uno sfondo dell'immagine più piccolo e leggero sarebbe altrettanto bello. In generale, per migliorare le prestazioni e salvare i dati dell'utente, ti consigliamo di inviare l'immagine più piccola possibile che viene comunque visualizzata correttamente sullo schermo dell'utente.
- Nei dispositivi più piccoli, l'immagine verrà allungata o tagliata per coprire l'intero schermo, nascondendo potenzialmente parti pertinenti dello sfondo agli utenti.
Nella sezione successiva imparerai ad applicare un'ottimizzazione per caricare diverse immagini di sfondo in base al dispositivo dell'utente.
Utilizzare query supporti
L'utilizzo di query supporti è una tecnica comune per dichiarare i fogli di stile che si applicano solo a determinati tipi di contenuti multimediali o dispositivi. Per l'implementazione vengono utilizzate le @regole multimediali, che consentono di definire un insieme di punti di interruzione in cui vengono definiti stili specifici.
Quando vengono soddisfatte le condizioni definite dalla regola @media (ad esempio, una determinata larghezza dello schermo), verrà applicato il gruppo di stili definiti all'interno del punto di interruzione.
I passaggi riportati di seguito possono essere utilizzati per applicare query supporti al sito in modo da utilizzare immagini diverse, a seconda della larghezza massima del dispositivo che richiede la pagina.
- In
style.cssrimuovi la riga che contiene l'URL dell'immagine di sfondo:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
- Poi, crea un punto di interruzione per ogni larghezza dello schermo, in base alle dimensioni comuni in pixel di solito sullo schermo di dispositivi mobili, tablet e computer:
Per i dispositivi mobili:
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
Per i tablet:
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
Per i computer:
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
Apri la versione ottimizzata di style.css nel browser per visualizzare le modifiche apportate.
Misura per i diversi dispositivi
Quindi, visualizza il sito risultante in schermi di dimensioni diverse e in dispositivi mobili simulati:
- Apri il sito ottimizzato in una nuova scheda di Chrome.
- Restringi l'area visibile (meno di
480px). - Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Ricarica la pagina.
Osserva come è stata richiesta l'immagine
background-mobile.jpg. - Ingrandisci l'area visibile. Quando la larghezza è superiore a
480px, nota come viene richiestobackground-tablet.jpg. Quando la larghezza è superiore a1025px, nota come viene richiestobackground-desktop.jpg.
Quando viene modificata la larghezza della schermata del browser, vengono richieste nuove immagini.
In particolare, quando la larghezza è inferiore al valore definito nel punto di interruzione del dispositivo mobile (480 px), viene visualizzato il seguente log di rete:
Le dimensioni del nuovo sfondo per dispositivi mobili sono più piccole del 67% rispetto a quello per desktop.
Effetti su Largest Contentful Paint (LCP)
Gli elementi con immagini di sfondo CSS sono considerati candidati per la metrica Largest Contentful Paint (LCP). Tuttavia, le immagini di sfondo CSS non sono rilevabili dallo scanner di precaricamento del browser, il che significa che potresti ritardare l'LCP del tuo sito se non fai attenzione.
La prima opzione da considerare è se l'immagine candidata LCP può funzionare in un elemento <img> con gli attributi srcset e sizes per la reattività. Lo scanner di precaricamento del browser rileverà gli elementi <img> e invierà le relative richieste mentre il parser è bloccato al rendering.
Se non puoi (o non vuoi) evitare di utilizzare un'immagine di sfondo CSS, la seconda opzione consiste nel precaricare le immagini adattabili per assicurarti di precaricare l'immagine giusta per le dimensioni dell'area visibile corrette. Gli attributi <link> media, imagesrcset e imagesizes indicano al browser che un determinato suggerimento sulla risorsa si applica solo in determinate condizioni dell'area visibile, evitando molteplici precaricamenti inutili quando vuoi caricare solo l'unica risorsa adatta all'area visibile corrente.
Riepilogo
Con questa guida hai imparato ad applicare query supporti per richiedere immagini di sfondo su misura per dimensioni dello schermo specifiche e a risparmiare byte quando accedi al sito su dispositivi più piccoli, come i cellulari.
Hai utilizzato la regola @media per implementare uno sfondo adattabile. Questa tecnica è ampiamente supportata da tutti i browser.
Una nuova funzionalità CSS: image-set(), può essere utilizzata per lo stesso scopo con meno righe di codice. Al momento della stesura di questo articolo, questa funzione non è supportata in tutti i browser, ma ti consigliamo di tenere d'occhio l'evoluzione dell'adozione, in quanto può rappresentare un'alternativa interessante a questa tecnica.