Seperti saat ini, gambar adalah aset terbesar web dalam hal total ukuran transfer dan jumlah permintaan per halaman. Per Juni 2022, total ukuran transfer halaman web median sekitar 2 MB, per Juni 2022, hampir separuhnya hanya mencakup gambar. Tidak berlebihan untuk mengatakan bahwa mengoptimalkan permintaan gambar mungkin merupakan satu-satunya pengoptimalan performa terbesar yang dapat Anda lakukan.
Nanti, Anda akan mempelajari bagaimana gambar responsif telah berevolusi untuk membantu mengatasi masalah yang dibuat dengan mencoba menampilkan satu gambar untuk semua kemungkinan. Di bagian ini, temukan metrik performa utama yang terkait dengan gambar, dan cara meningkatkannya.
Menunda permintaan gambar
Meskipun Anda akan mempelajari sejumlah cara untuk memastikan permintaan gambar Anda sekecil dan seefisien mungkin, permintaan gambar tercepat
akan selalu menjadi permintaan yang tidak pernah dibuat. Jadi, tepat di awal, saya ingin menyampaikan perubahan paling berdampak yang dapat Anda lakukan terhadap
cara Anda menayangkan aset gambar kepada pengguna: atribut loading="lazy".
<img src="image.jpg" loading="lazy" alt="…">
Atribut ini memastikan bahwa permintaan gambar tidak dibuat sampai gambar berada di dekat area pandang pengguna, sehingga menunda pemuatan halaman awal—waktu saat browser dalam kondisi tersibuk—dan menghapus permintaan tersebut dari jalur rendering penting.
Sesederhana mungkin dalam praktiknya, menggunakan atribut ini dapat memberikan dampak positif yang besar pada performa: gambar yang tidak pernah berada dalam area pandang pengguna tidak akan diminta, dan tidak ada bandwidth yang akan terbuang untuk gambar yang tidak akan pernah dilihat pengguna.
Namun, ada masalahnya: menunda permintaan tersebut berarti tidak memanfaatkan proses browser yang sangat dioptimalkan untuk meminta
gambar sedini mungkin. Jika loading="lazy" digunakan pada elemen img di bagian atas tata letak, sehingga lebih mungkin
berada di area pandang pengguna saat halaman pertama kali dimuat, gambar ini dapat terasa jauh lebih lambat bagi pengguna akhir.
Prioritas Pengambilan
Atribut loading adalah contoh upaya standar web yang lebih besar untuk memberi developer lebih banyak kendali atas cara browser web
memprioritaskan permintaan.
Anda mungkin mengetahui pendekatan dasar browser untuk mengambil prioritas:
misalnya, permintaan untuk file CSS eksternal di <head> dokumen dianggap cukup penting untuk memblokir render, sementara permintaan untuk
file JavaScript eksternal tepat di atas </body> akan ditunda hingga rendering selesai. Jika nilai atribut loading pada <img> adalah 'lambat',
permintaan gambar terkait akan ditangguhkan hingga browser menentukan bahwa gambar tersebut akan ditampilkan kepada pengguna. Jika tidak, gambar tersebut akan memiliki prioritas
yang sama dengan gambar lain di halaman tersebut.
Atribut fetchpriority ditujukan untuk memberi
developer kontrol yang lebih terperinci atas prioritas aset, sehingga Anda dapat menandai resource
sebagai prioritas 'tinggi' dan 'rendah' relatif terhadap resource dari jenis yang sama. Kasus penggunaan untuk fetchpriority mirip dengan atribut
loading, meskipun jauh lebih luas. Misalnya, Anda dapat menggunakan fetchpriority="low" pada gambar yang hanya ditampilkan setelah interaksi pengguna
(baik gambar tersebut berada dalam area pandang pengguna atau tidak) untuk memprioritaskan gambar yang terlihat di tempat lain pada halaman, atau fetchpriority="high"
untuk memprioritaskan gambar yang Anda tahu akan langsung terlihat di area pandang segera setelah halaman dirender.
Perlu diketahui bahwa fetchpriority berbeda dengan loading karena tidak mengubah perilaku browser secara mendasar. Tidak menginstruksikan browser
untuk memuat aset tertentu sebelum aset lainnya, melainkan memberikan konteks penting untuk keputusan yang dibuat terkait permintaan aset.
Mengukur dampak gambar
Saat mengoptimalkan aset gambar, performa yang dirasakan sering kali lebih penting, dan lebih sulit diukur, daripada ukuran transfer total saja.
Data Web memberikan metrik dan panduan yang dapat diukur dan ditindaklanjuti untuk meningkatkan kualitas pengalaman pengguna di web, yang menyoroti masalah seperti waktu respons yang lambat dari server web, masalah rendering, dan penundaan interaktivitas. Data Web Inti adalah subkumpulan dari sasaran ini yang berfokus pada pengalaman langsung pengguna di setiap halaman—sekumpulan pengukuran teknis yang, bersama-sama, menentukan seberapa cepat pengalaman yang terasa bagi pengguna.
Pergeseran Tata Letak Kumulatif (CLS)
Pergeseran Tata Letak Kumulatif (CLS) adalah ukuran stabilitas visual. Metrik ini adalah metrik untuk mengetahui seberapa jauh tata letak konten di suatu halaman bergeser saat aset dimuat dan halaman dirender. Siapa pun yang telah menghabiskan banyak waktu menggunakan web akan kehilangan posisi teksnya dalam jangka panjang karena halaman yang "melompat" karena font web atau sumber gambar yang tertunda tiba-tiba dirender—atau elemen interaktifnya tiba-tiba dipindahkan dari pointer Anda. CLS yang tinggi sangat mengganggu, dan paling buruk menyebabkan error pengguna—tombol "batal" bergeser ke ruang yang sebelumnya ditempati oleh tombol "konfirmasi" tepat saat pengguna mengklik, misalnya.
Dengan waktu pemuatan yang tinggi dan jumlah ruang yang dapat ditempati dalam tata letak, gambar adalah penyebab umum skor CLS yang tinggi.
Berkat perubahan yang relatif baru di browser modern, menghindari skor CLS yang tinggi karena gambar menjadi lebih mudah daripada yang Anda bayangkan.
Jika Anda telah mengerjakan frontend selama beberapa tahun, Anda akan terbiasa dengan atribut width dan height di <img>:
sebelum penggunaan CSS secara luas, ini adalah satu-satunya cara untuk mengontrol ukuran gambar.
<img src="image.jpg" height="200" width="400" alt="…">
Atribut ini tidak lagi digunakan agar masalah gaya visual kami tetap terpisah dari markup, terutama karena desain web responsif membuatnya perlu untuk menentukan ukuran berbasis persentase melalui CSS. Pada masa awal desain web yang responsif, "hapus
atribut width dan height yang tidak digunakan" merupakan saran yang umum, karena nilai yang kita tentukan dalam CSS—max-width: 100% dan
height: auto—akan menggantikannya.
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
Setelah menghapus atribut height dan width seperti pada contoh sebelumnya, satu-satunya metode yang dimiliki browser untuk menentukan
tinggi gambar dalam situasi ini adalah meminta sumber, mengurainya, dan merendernya pada rasio aspek intrinsiknya, berdasarkan
lebar ruang yang ditempatinya di tata letak setelah stylesheet diterapkan. Sebagian besar proses ini terjadi setelah halaman
dirender, dengan tinggi yang baru dihitung akan menyebabkan pergeseran tata letak tambahan.
Mulai 2019, perilaku browser diperbarui untuk menangani atribut width dan height secara berbeda. Daripada menggunakan nilai
atribut tersebut untuk menentukan ukuran tetap berbasis piksel dari elemen img dalam tata letak, atribut ini dapat dianggap mewakili
rasio aspek gambar, meskipun sintaksisnya sama. Browser modern akan membagi nilai-nilai ini satu sama lain untuk
menentukan rasio aspek intrinsik elemen img sebelum halaman dirender, sehingga memungkinkannya mencadangkan ruang yang akan ditempati gambar saat tata letak dirender.
Biasanya, Anda harus selalu menggunakan atribut height dan width pada <img>, dengan nilai yang cocok dengan ukuran intrinsik sumber gambar—asalkan
Anda telah menentukan height: auto bersama max-width: 100% untuk mengganti tinggi dari atribut HTML.
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
Dengan menggunakan atribut width dan height pada elemen <img>, Anda akan menghindari skor CLS yang tinggi karena gambar.
Penting untuk diperhatikan bahwa tidak ada kelemahan dari pendekatan ini, karena pendekatan ini mengandalkan perilaku browser yang sudah lama ada—browser apa pun
dengan dukungan untuk CSS dasar akan bekerja seperti biasa, dengan atribut height dan width di markup Anda diganti oleh gaya Anda.
Meskipun atribut width dan height dengan cerdik menghindari masalah CLS dengan memesan ruang tata letak yang diperlukan untuk gambar Anda, menampilkan
kepada pengguna dengan celah kosong atau placeholder berkualitas rendah saat
mereka menunggu gambar untuk ditransfer dan dirender juga tidak ideal. Meskipun ada beberapa hal yang dapat Anda lakukan untuk mengurangi dampak lambat pemuatan gambar yang dapat diukur dan dirasa, satu-satunya cara untuk menyajikan gambar yang dirender sepenuhnya kepada pengguna secara lebih cepat adalah dengan mengurangi ukuran transfernya.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) mengukur waktu yang diperlukan untuk merender elemen “contentful” terbesar yang terlihat di area pandang pengguna, yaitu elemen konten yang menempati persentase terbesar halaman yang terlihat. Hal ini mungkin tampak seperti metrik yang terlalu spesifik di platform, tetapi elemen tersebut berfungsi sebagai proxy praktis untuk titik tempat sebagian besar halaman telah dirender, dari perspektif pengguna. LCP adalah ukuran penting dari performa (yang dirasakan).
Metrik seperti DOMContentLoaded atau peristiwa window.onload dapat berguna untuk menentukan kapan proses pemuatan halaman saat ini telah selesai secara teknis, tetapi metrik tersebut tidak selalu sesuai dengan pengalaman pengguna pada halaman tersebut. Sedikit penundaan dalam rendering elemen
di luar area pandang pengguna akan diperhitungkan dalam salah satu metrik ini, tetapi kemungkinan tidak akan terdeteksi sama sekali oleh pengguna di dunia nyata.
LCP yang panjang berarti kesan pertama pengguna terhadap suatu halaman—konten terpenting di dalam area pandang saat ini—adalah halaman tersebut lambat,
atau rusak langsung.
Persepsi pengguna yang tertangkap oleh LCP memiliki dampak langsung pada pengalaman pengguna. Eksperimen yang dilakukan oleh Vodafone baru-baru ini menemukan bahwa peningkatan LCP sebesar 31% tidak hanya meningkatkan penjualan sebesar 8%—hasil yang memuaskan—tetapi dari total jumlah pengguna mereka, terdapat peningkatan sebesar 15% pada jumlah pengunjung yang menjadi calon pelanggan ("rasio pengunjung ke prospek") dan peningkatan sebesar 11% pada jumlah pengguna yang mengunjungi keranjang ("keranjang").
Di lebih dari 70% halaman web, elemen terbesar di area pandang
awal melibatkan gambar, baik sebagai elemen <img> yang berdiri sendiri atau elemen dengan gambar latar. Dengan kata lain,
70% skor LCP halaman didasarkan pada performa gambar. Tidak perlu banyak imajinasi untuk memahami alasannya: gambar dan logo
yang besar dan menarik perhatian sangat mungkin ditemukan "di paruh atas".
Ada beberapa langkah yang dapat Anda ambil untuk menghindari penundaan LCP: pertama, jangan pernah menentukan loading="lazy" pada gambar "paruh atas",
karena menunda permintaan hingga halaman selesai dirender kemungkinan akan berdampak negatif besar pada skor LCP Anda.
Kedua, menggunakan fetchpriority="high" dapat memberi tahu browser bahwa transfer gambar ini harus diprioritaskan di atas gambar di tempat lain di halaman.
Dengan mempertimbangkan aturan tersebut, hal terpenting yang dapat Anda lakukan untuk meningkatkan skor LCP halaman adalah mengurangi jumlah waktu yang diperlukan untuk mentransfer dan merender gambar tersebut. Untuk melakukannya, Anda harus menjaga sumber gambar sekecil dan seefisien mungkin (tanpa mengorbankan kualitasnya) dan memastikan bahwa pengguna hanya mendapatkan aset gambar yang paling masuk akal untuk konteks penjelajahan mereka.
Kesimpulan
Aset gambar adalah yang paling menguras bandwidth pengguna Anda—bandwidth yang hilang dari transfer setiap aset lain yang diperlukan untuk merender halaman. Gambar menimbulkan masalah yang signifikan dalam hal performa yang dirasakan, baik selama maupun setelah tata letak halaman di sekitarnya dirender. Singkatnya: aset gambar memiliki kerusakan.
Meskipun demikian, walaupun "web akan lebih baik dengan lebih sedikit gambar" tentu saja benar dalam hal performa saja, hal itu juga akan merugikan penggunanya yang luar biasa. Gambar adalah bagian penting dari web, dan Anda tidak boleh mengorbankan kualitas konten yang bermakna hanya untuk performa.
Di bagian selanjutnya dalam kursus ini, Anda akan mempelajari teknologi yang mendukung aset gambar dan teknik kami untuk mengurangi dampak performanya, tanpa mengorbankan kualitas.