Mulai Chrome 73, link rel="pramuat" dan gambar responsif dapat digabungkan untuk memuat gambar lebih cepat.
Dukungan Browser
- 73
- 79
- 78
- 17,2
Artikel ini memberi saya kesempatan untuk membahas dua hal favorit saya: gambar responsif dan pramuat. Sebagai seseorang yang sangat terlibat dalam pengembangan kedua fitur tersebut, saya senang melihat mereka bekerja sama.
Ringkasan gambar responsif
Misalkan Anda menjelajahi web pada layar yang lebarnya 300 piksel dan halaman tersebut baru saja meminta gambar dengan lebar 1.500 piksel. Halaman tersebut hanya membuang banyak data seluler karena layar tidak dapat melakukan apa pun dengan resolusi ekstra tersebut. Idealnya, browser harus mengambil versi gambar yang sedikit lebih lebar dari ukuran layar Anda, misalnya 325 piksel. Hal ini memastikan gambar resolusi tinggi tanpa membuang data. Dan yang lebih bagus lagi, gambar akan dimuat lebih cepat. Gambar responsif memungkinkan browser mengambil resource gambar yang berbeda ke perangkat yang berbeda. Jika tidak menggunakan CDN gambar, Anda perlu menyimpan beberapa dimensi untuk setiap gambar dan menentukannya di atribut srcset. Nilai w memberi tahu browser tentang lebar setiap versi. Bergantung pada perangkatnya, browser dapat memilih yang sesuai:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
Ringkasan pramuat
Pramuat memungkinkan Anda memberi tahu browser tentang resource penting yang ingin dimuat sesegera mungkin, sebelum ditemukan dalam HTML. Hal ini sangat berguna untuk sumber daya yang tidak mudah ditemukan, seperti font yang disertakan dalam stylesheet, gambar latar, atau sumber daya yang dimuat dari skrip.
<link rel="preload" as="image" href="important.png">
Gambar responsif + pramuat = pemuatan gambar lebih cepat
Gambar responsif dan pramuat telah tersedia selama beberapa tahun terakhir, tetapi pada saat yang sama ada sesuatu yang hilang: tidak ada cara untuk melakukan pramuat gambar responsif. Mulai Chrome 73, browser dapat melakukan pramuat varian yang tepat dari gambar responsif yang ditentukan dalam srcset sebelum menemukan tag img.
Bergantung pada struktur situs Anda, hal itu dapat berarti tampilan gambar menjadi jauh lebih cepat! Kami menjalankan pengujian di situs yang menggunakan JavaScript untuk memuat gambar responsif dengan lambat. Pramuat membuat gambar dimuat lebih cepat 1,2 detik.
imagesrcset dan imagesizes
Untuk melakukan pramuat gambar responsif, atribut baru baru-baru ini ditambahkan ke elemen <link>: imagesrcset dan imagesizes. Keduanya digunakan dengan <link rel="preload"> dan cocok dengan sintaksis srcset dan sizes yang digunakan dalam elemen <img>.
Misalnya, jika Anda ingin melakukan pramuat gambar responsif yang ditentukan dengan:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
Anda dapat melakukannya dengan menambahkan kode berikut ke <head> HTML:
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Tindakan ini memulai permintaan menggunakan logika pemilihan resource yang sama dengan yang akan diterapkan srcset dan sizes.
Kasus penggunaan
Melakukan pramuat gambar responsif yang dimasukkan secara dinamis
Katakanlah Anda memuat gambar utama secara dinamis sebagai bagian dari tayangan {i>slide<i} dan mengetahui gambar mana yang akan ditampilkan terlebih dahulu. Dalam hal ini, sebaiknya jangan menunggu skrip sebelum memuat gambar yang dimaksud, karena hal ini akan memperlambat ketika pengguna dapat melihatnya.
Anda dapat memeriksa masalah ini di situs dengan galeri gambar yang dimuat secara dinamis:
Buka situs contoh ini di tab baru.
Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Network
Di menu drop-down Throttling, pilih Fast 3G.
Nonaktifkan kotak centang Disable cache.
Muat ulang halaman.
Menggunakan preload akan membantu di sini karena gambar mulai dimuat lebih awal dan kemungkinan sudah ada di sana saat browser perlu menampilkannya.
Untuk melihat perbedaan yang dihasilkan pramuat, Anda dapat memeriksa galeri gambar yang dimuat secara dinamis dan dengan gambar pertama yang dipramuat dengan mengikuti langkah-langkah dari contoh pertama.
Melakukan pramuat gambar latar menggunakan image-set
Jika memiliki gambar latar yang berbeda untuk kepadatan layar yang berbeda, Anda dapat menentukannya di CSS dengan sintaksis image-set. Kemudian, browser dapat memilih mana yang akan ditampilkan berdasarkan DPR layar.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Masalah pada gambar latar CSS adalah gambar tersebut ditemukan oleh browser hanya setelah mendownload dan memproses semua CSS di <head> halaman, yang bisa jadi merupakan jenis CSS...
Anda dapat memeriksa masalah ini di situs contoh dengan gambar latar responsif.
Pramuat gambar responsif memberikan cara sederhana dan bebas trik untuk memuat gambar tersebut dengan lebih cepat.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Perhatikan bahwa dengan mengecualikan atribut href, Anda dapat memastikan bahwa browser yang tidak mendukung imagesrcset pada elemen <link>, tetapi mendukung image-set di CSS, tidak akan mendownload sumber yang salah. Namun, mereka juga tidak akan mendapatkan manfaat dari pramuat dalam kasus ini.
Anda dapat memeriksa perilaku contoh sebelumnya dengan gambar latar responsif yang dimuat sebelumnya.
Melakukan pramuat gambar responsif
Melakukan pramuat gambar responsif dapat mempercepatnya secara teori, tetapi apa fungsinya dalam praktiknya?
Untuk menjawabnya, saya membuat dua salinan toko PWA demo: toko yang tidak melakukan pramuat gambar, dan yang melakukan pramuat beberapa gambar. Karena situs lambat memuat gambar menggunakan JavaScript, akan lebih baik jika situs melakukan pramuat gambar yang akan berada di area pandang awal.
Langkah tersebut memberi saya hasil berikut untuk tanpa pramuat dan untuk pramuat gambar. Melihat angka mentah, Start Render tetap sama, Speed Index sedikit meningkat (273 md, karena gambar tiba lebih cepat, tetapi tidak memakan sebagian besar area piksel), tetapi metrik sebenarnya yang mendapatkan perbedaannya adalah metrik Last Painted Hero, yang ditingkatkan 1,2 detik. 🎉🎉
Tentu saja, tidak ada yang dapat menangkap perbedaan visual seperti perbandingan setrip film:
Pramuat dan <picture>?
Jika Anda sudah terbiasa dengan gambar responsif, Anda mungkin ingin tahu "Bagaimana dengan <picture>?".
Web Performance Working Group membahas cara menambahkan pramuat yang setara untuk srcset dan sizes, tetapi bukan elemen <picture>, yang menangani kasus penggunaan "arah seni".
Mengapa kasus penggunaan ini "diabaikan"?
Meskipun ada minat untuk menyelesaikan kasus penggunaan tersebut, masih ada sejumlah masalah teknis yang harus disortir yang berarti bahwa solusi di sini akan memiliki kompleksitas yang signifikan. Selain itu, tampaknya sebagian besar kasus penggunaan tersebut dapat ditangani saat ini, meskipun dengan cara yang licik (lihat di bawah).
Oleh karena itu, Web Performance WG memutuskan untuk mengirimkan srcset terlebih dahulu dan melihat apakah muncul permintaan untuk dukungan picture yang setara.
Jika Anda berada dalam posisi untuk melakukan pramuat <picture>, Anda mungkin dapat menggunakan teknik berikut sebagai solusinya.
Dengan skenario berikut:
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
Logika elemen <picture> (atau logika pemilihan sumber gambar, lebih tepatnya), adalah memeriksa atribut media dari elemen <source> secara berurutan, menemukan elemen pertama yang cocok, dan menggunakan resource yang terlampir.
Karena pramuat responsif tidak memiliki konsep "order" atau "first match", titik henti sementara perlu diterjemahkan menjadi sesuatu seperti:
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
Pramuat dan type
Elemen <picture> juga mendukung pencocokan pada type pertama, untuk memungkinkan format gambar yang berbeda diberikan dan browser untuk memilih format gambar pertama yang didukungnya. Kasus penggunaan ini saat ini tidak didukung dengan pramuat.
Untuk situs yang menggunakan fitur ini, menghindari pramuat adalah opsi terbaik, dan sebagai gantinya meminta pemindai pramuat untuk mengambilnya dari elemen <picture> dan <source>. Lagi pula, ini adalah praktik terbaik, terutama dengan dukungan Petunjuk Prioritas yang memungkinkan gambar yang sesuai diprioritaskan dengan cara yang lebih baik daripada hanya melalui pramuat.
Efek pada Largest Contentful Paint (LCP)
Karena gambar dapat menjadi kandidat untuk Largest Contentful Paint (LCP), melakukan pramuat gambar tersebut dapat meningkatkan LCP situs Anda. Dengan menggunakan teknik di atas, Anda juga dapat memastikan bahwa gambar responsif akan dimuat lebih cepat.
Terlepas dari apakah gambar yang Anda pramuat responsif, perhatikan bahwa pramuat berfungsi sangat baik saat resource gambar tidak dapat ditemukan dalam payload markup awal. Untuk situs web yang mengirim markup lengkap dari server, Anda mungkin tidak menyadari manfaat yang besar. Namun, jika situs Anda merender markup pada klien—yang menggantikan pemindai pramuat browser—ada peluang pada tabel untuk melakukan pramuat gambar LCP yang potensial guna meningkatkan performa.
Ringkasan
Pramuat gambar responsif memberi kita kemungkinan baru dan menarik untuk melakukan pramuat gambar responsif dengan cara yang sebelumnya hanya mungkin dilakukan melalui peretasan. Ini adalah tambahan baru yang penting pada toolbox developer yang sadar kecepatan dan memungkinkan kita untuk memastikan gambar penting yang ingin kita tampilkan kepada pengguna sesegera mungkin akan ada saat kita membutuhkannya.