Saran berbasis data untuk pemuatan lambat gambar dengan mempertimbangkan Core Web Vitals.
Pemuatan lambat adalah teknik yang menunda download resource hingga diperlukan, untuk menghemat data dan mengurangi pertentangan jaringan untuk aset penting. Fitur ini menjadi standar web pada tahun 2019 dan saat ini loading="lazy" untuk gambar didukung oleh sebagian besar browser utama.
Panduan ini merangkum cara data transparansi web yang tersedia secara publik dan pengujian A/B ad hoc dianalisis untuk memahami karakteristik adopsi dan performa pemuatan lambat gambar tingkat browser. Temuan tersebut mencakup bahwa pemuatan lambat dapat menjadi alat yang sangat efektif untuk mengurangi byte gambar yang tidak diperlukan, tetapi penggunaan yang berlebihan dapat berdampak negatif pada performa. Secara konkret, analisis ini menunjukkan bahwa pemuatan gambar yang lebih cepat dalam area pandang awal—sementara pemuatan lambat yang lebih bebas untuk sisanya—dapat memberikan yang terbaik dari kedua hal tersebut: byte yang dimuat lebih sedikit dan Core Web Vitals yang lebih baik.
Adopsi
Menurut data terbaru di HTTP Archive, pemuatan lambat gambar bawaan digunakan oleh 29% situs dan adopsinya berkembang pesat.
Membuat kueri data mentah dalam project HTTP Archive memberi kita pemahaman yang lebih jelas tentang jenis situs yang mendorong adopsi: 84% situs yang menggunakan pemuatan lambat gambar tingkat browser menggunakan WordPress, 2% menggunakan CMS lain, dan 14% sisanya tidak menggunakan CMS yang dikenal. Hasil ini memperjelas bagaimana WordPress memimpin dalam adopsi.
Tingkat adopsi juga perlu diperhatikan. Satu tahun yang lalu pada Juli 2020, situs WordPress yang menggunakan pemuatan lambat mencakup puluhan ribu situs dalam korpus yang berjumlah sekitar 6 juta (1% dari total). Adopsi pemuatan lambat di WordPress saja telah berkembang ke lebih dari 1 juta situs (14% dari total).
Performa korelasional
Dengan mempelajari lebih dalam HTTP Archive, kita dapat membandingkan performa halaman dengan dan tanpa pemuatan lambat gambar tingkat browser menggunakan metrik Largest Contentful Paint (LCP). Data LCP berasal dari pengalaman pengguna sebenarnya dari Chrome User Experience Report (CrUX), bukan dari pengujian sintetis di lab. Diagram berikut menggunakan plot kotak dan garis untuk memvisualisasikan distribusi LCP persentil ke-75 setiap halaman: garis mewakili persentil ke-10 dan ke-90, sedangkan kotak mewakili persentil ke-25 dan ke-75.
Halaman median tanpa pemuatan lambat memiliki LCP persentil ke-75 sebesar 2.922 milidetik, dibandingkan dengan 3.546 milidetik untuk halaman median dengan pemuatan lambat. Secara keseluruhan, situs yang menggunakan pemuatan lambat cenderung memiliki performa LCP yang lebih buruk.
Perlu diperhatikan bahwa hasil ini bersifat korelasional dan tidak selalu menunjukkan pemuatan lambat sebagai penyebab performa yang lebih lambat. Secara hipotesis, jika situs WordPress cenderung sedikit lebih lambat, dan mengingat seberapa besar kontribusinya terhadap kohor pemuatan lambat, hal ini dapat menjelaskan perbedaannya. Untuk menghilangkan variabilitas tersebut, fokus dapat dipersempit secara khusus ke situs WordPress.
Sayangnya, pola yang sama muncul saat melihat halaman WordPress secara mendetail; halaman yang menggunakan pemuatan lambat cenderung memiliki performa LCP yang lebih lambat. Halaman WordPress median tanpa pemuatan lambat memiliki LCP persentil ke-75 sebesar 3.495 milidetik, dibandingkan dengan 3.768 milidetik untuk halaman median dengan pemuatan lambat.
Hal ini masih belum membuktikan bahwa pemuatan lambat menyebabkan halaman menjadi lebih lambat, tetapi penggunaannya bertepatan dengan performa yang lebih lambat. Untuk mencoba menjawab pertanyaan kausalitas, pengujian A/B berbasis lab disiapkan.
Performa kausal
Sasaran pengujian A/B adalah untuk membuktikan atau menyangkal hipotesis bahwa pemuatan lambat gambar bawaan, seperti yang diterapkan di inti WordPress, menghasilkan performa LCP yang lebih lambat dan byte gambar yang lebih sedikit. Metodologi yang digunakan adalah menguji situs WordPress demo dengan tema twentytwentyone. Jenis arsip dan halaman tunggal diuji, yang mirip dengan halaman beranda dan artikel, di desktop dan perangkat seluler yang diemulasikan menggunakan WebPageTest. Setiap kombinasi halaman dengan dan tanpa pemuatan lambat diuji, dan setiap pengujian dijalankan sembilan kali untuk mendapatkan nilai LCP median dan jumlah byte gambar.
| Seri | default | nonaktif | Perbedaan dari default |
|---|---|---|---|
| twentytwentyone-archive-desktop | 2.029 | 1.759 | -13% |
| twentytwentyone-archive-mobile | 1.657 | 1.403 | -15% |
| twentytwentyone-single-desktop | 1.655 | 1.726 | 4% |
| twentytwentyone-single-mobile | 1.352 | 1.384 | 2% |
Hasil ini membandingkan median LCP dalam milidetik untuk pengujian di halaman arsip dan halaman tunggal untuk desktop dan seluler. Saat pemuatan lambat dinonaktifkan di halaman arsip, LCP meningkat secara signifikan. Namun, pada halaman tunggal, perbedaannya tidak terlalu signifikan.
Menonaktifkan pemuatan lambat tampaknya membuat halaman tunggal sedikit lebih cepat. Namun, perbedaan LCP kurang dari satu deviasi standar untuk pengujian desktop dan seluler, sehingga hal ini dapat dikaitkan dengan varians dan menganggap perubahan tersebut secara keseluruhan netral. Sebagai perbandingan, perbedaan untuk halaman arsip mendekati dua hingga tiga simpangan baku.
| Seri | default | nonaktif | Perbedaan dari default |
|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 103% |
| twentytwentyone-archive-mobile | 172 | 378 | 120% |
| twentytwentyone-single-desktop | 301 | 850 | 183% |
| twentytwentyone-single-mobile | 114 | 378 | 233% |
Hasil ini membandingkan jumlah median byte gambar (dalam KB) untuk setiap pengujian. Seperti yang diharapkan, pemuatan lambat memiliki efek positif yang sangat jelas dalam mengurangi jumlah byte gambar. Jika pengguna sungguhan men-scroll seluruh halaman, semua gambar akan dimuat saat masuk ke area pandang, tetapi hasil ini menunjukkan peningkatan performa pemuatan halaman awal.
Untuk meringkas hasil pengujian A/B, teknik pemuatan lambat yang digunakan oleh WordPress sangat jelas membantu mengurangi byte gambar dengan mengorbankan LCP yang tertunda.
Menguji perbaikan
Aspek terpenting dari penerapan pemuatan lambat WordPress saat ini untuk eksperimen ini adalah pemuatan lambat gambar dalam area pandang (paruh atas). Postingan blog CMS mengakui hal ini sebagai pola yang harus dihindari, tetapi data eksperimental pada saat itu menunjukkan bahwa efeknya pada LCP minimal dan layak untuk menyederhanakan implementasi di inti WordPress.
Dengan data baru ini, perbaikan eksperimental dibuat untuk menghindari pemuatan lambat gambar yang berada di paruh atas, dan perbaikan tersebut diuji dalam kondisi yang sama seperti pengujian A/B pertama.
| Seri | default | nonaktif | perbaiki | Perbedaan dari default | Perbedaan dari dinonaktifkan |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 2.029 | 1.759 | 1.749 | -14% | -1% |
| twentytwentyone-archive-mobile | 1.657 | 1.403 | 1.352 | -18% | -4% |
| twentytwentyone-single-desktop | 1.655 | 1.726 | 1.676 | 1% | -3% |
| twentytwentyone-single-mobile | 1.352 | 1.384 | 1.342 | -1% | -3% |
Hasil ini jauh lebih menjanjikan. Pemuatan lambat hanya pada gambar di paruh bawah akan sepenuhnya membalikkan regresi LCP dan bahkan mungkin sedikit meningkatkan performa dibandingkan dengan menonaktifkan pemuatan lambat sepenuhnya. Bagaimana bisa lebih cepat daripada tidak menggunakan pemuatan lambat sama sekali? Salah satu penjelasannya adalah dengan tidak memuat gambar di paruh bawah, pertentangan jaringan dengan gambar LCP akan berkurang, sehingga gambar dapat dimuat lebih cepat.
| Seri | default | nonaktif | perbaiki | Perbedaan dari default | Perbedaan dari dinonaktifkan |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 577 | 0% | -51% |
| twentytwentyone-archive-mobile | 172 | 378 | 172 | 0% | -54% |
| twentytwentyone-single-desktop | 301 | 850 | 301 | 0% | -65% |
| twentytwentyone-single-mobile | 114 | 378 | 114 | 0% | -70% |
Dalam hal byte gambar, perbaikan ini sama sekali tidak mengubah perilaku default. Hal ini bagus karena merupakan salah satu kelebihan pendekatan saat ini.
Perbaikan ini memiliki beberapa peringatan. WordPress menentukan gambar mana yang akan dimuat lambat di sisi server, yang berarti WordPress tidak mengetahui apa pun tentang ukuran area tampilan pengguna atau apakah gambar awalnya dimuat di dalamnya. Jadi, perbaikan ini menggunakan heuristik tentang lokasi relatif gambar dalam markup untuk menebak apakah gambar dimuat di area pandang. Secara khusus, jika gambar adalah gambar unggulan pertama di halaman atau gambar pertama di konten utama, gambar tersebut diasumsikan berada di paruh atas, atau dekat dengannya, dan tidak akan dimuat lambat.
Kondisi tingkat halaman seperti jumlah kata dalam judul atau jumlah teks paragraf di awal konten utama dapat memengaruhi apakah gambar berada dalam area pandang. Ada juga kondisi tingkat pengguna yang mungkin memengaruhi akurasi heuristik, terutama ukuran area pandang dan penggunaan link anchor yang mengubah posisi scroll halaman.
Oleh karena itu, penting untuk diketahui bahwa perbaikan ini hanya dikalibrasi untuk memberikan performa yang baik dalam kasus umum, dan penyesuaian mungkin diperlukan agar hasil ini dapat diterapkan ke semua skenario dunia nyata.
Penerapan
Setelah menemukan cara yang lebih baik untuk melakukan pemuatan lambat pada gambar, menghemat penggunaan gambar, dan mempercepat performa LCP, bagaimana situs dapat mulai menggunakannya? Perubahan prioritas tertinggi adalah mengirimkan patch ke inti WordPress untuk menerapkan perbaikan eksperimental. Panduan dalam postingan blog Pemuatan lambat tingkat browser untuk CMS juga akan diperbarui untuk mengklarifikasi efek negatif pemuatan lambat paruh atas dan cara CMS dapat menggunakan heuristik untuk menghindarinya.
Karena praktik terbaik ini berlaku untuk semua developer web, sebaiknya tandai juga antipola pemuatan lambat di alat seperti Lighthouse. Lihat permintaan fitur di GitHub jika Anda tertarik untuk mengikuti progres audit tersebut. Sebelum itu, satu hal yang dapat dilakukan developer untuk menemukan instance elemen LCP yang dimuat lambat adalah dengan menambahkan logging yang lebih mendetail ke data lapangan mereka.
new PerformanceObserver((list) => {
const latestEntry = list.getEntries().at(-1);
if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
console.warn('Warning: LCP element was lazy loaded', latestEntry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
Cuplikan JavaScript sebelumnya akan mengevaluasi elemen LCP terbaru dan mencatat peringatan jika elemen tersebut dimuat lambat.
Hal ini juga menyoroti kelemahan teknik pemuatan lambat dan potensi peningkatan API di tingkat platform. Misalnya, ada masalah terbuka di Chromium untuk bereksperimen dengan memuat beberapa gambar pertama secara eager secara native, mirip dengan perbaikan, meskipun ada atribut loading.
Kesimpulan
Jika situs Anda menggunakan pemuatan lambat gambar tingkat browser, periksa cara penerapannya dan jalankan pengujian A/B untuk lebih memahami biaya performanya. Halaman ini mungkin akan lebih cepat memuat gambar di paruh atas. Jika Anda memiliki situs WordPress, semoga patch akan segera tersedia di WordPress core. Jika Anda menggunakan CMS lain, pastikan mereka mengetahui potensi masalah performa yang dijelaskan di sini.
Mencoba API platform web yang relatif baru dapat menimbulkan risiko dan manfaat—fitur ini disebut fitur mutakhir karena suatu alasan. Meskipun kita mulai memahami kerumitan pemuatan lambat gambar tingkat browser, kita juga melihat keuntungan dari cara menggunakannya untuk mencapai performa yang lebih baik.