Pembelajaran untuk mengadopsi atribut pemuatan standar
Tujuan saya dengan postingan ini adalah untuk meyakinkan developer dan kontributor platform CMS (yaitu orang yang mengembangkan core CMS) bahwa sekarang adalah waktunya untuk menerapkan dukungan untuk fitur pemuatan lambat gambar tingkat browser. Kami juga akan membagikan rekomendasi tentang cara memastikan pengalaman pengguna berkualitas tinggi dan memungkinkan penyesuaian oleh developer lain saat menerapkan pemuatan lambat. Panduan ini berasal dari pengalaman kami menambahkan dukungan ke WordPress serta membantu Joomla, Drupal, dan TYPO3 menerapkan fitur ini.
Terlepas dari apakah Anda adalah developer platform CMS atau pengguna CMS (yaitu seseorang yang membuat situs dengan CMS), Anda dapat menggunakan postingan ini untuk mempelajari lebih lanjut manfaat pemuatan lambat tingkat browser di CMS Anda. Lihat bagian Langkah berikutnya untuk mendapatkan saran tentang cara memicu platform CMS Anda untuk menerapkan pemuatan lambat.
Latar belakang
Selama setahun terakhir,
gambar dan iframe pemuatan lambat menggunakan atribut loading
telah
menjadi bagian dari Standar HTML WHATWG
dan
mengalami peningkatan adopsi oleh berbagai browser.
Namun, pencapaian ini hanya meletakkan dasar untuk
web yang lebih cepat dan hemat resource.
Sekarang, atribut loading
digunakan di ekosistem web terdistribusi.
Sistem pengelolaan konten
mendukung sekitar 60% situs,
sehingga platform ini berperan penting dalam mendorong adopsi fitur browser
modern ke web. Dengan beberapa CMS open source populer seperti
WordPress,
Joomla, dan
TYPO3 yang telah
menerapkan dukungan untuk atribut loading pada gambar, mari kita lihat
pendekatan dan poin penting yang relevan untuk mengadopsi fitur tersebut
di platform CMS lainnya. Media pemuatan lambat adalah fitur performa web utama
yang harus dimanfaatkan situs dalam skala besar, itulah sebabnya mengadopsinya
di tingkat inti CMS direkomendasikan.
Alasan untuk menerapkan pemuatan lambat sekarang
Standardisasi
Penggunaan fitur browser yang tidak standar di CMS memfasilitasi pengujian yang luas dan dapat menampilkan potensi area peningkatan. Namun, konsensus umum di seluruh CMS adalah, selama fitur browser tidak distandarisasi, sebaiknya fitur tersebut diterapkan dalam bentuk ekstensi atau plugin untuk platform masing-masing. Hanya setelah distandarisasi, fitur dapat dipertimbangkan untuk diadopsi di inti platform.
Dukungan browser
Dukungan browser untuk fitur ini juga merupakan masalah yang serupa: Sebagian besar pengguna CMS harus dapat memanfaatkan fitur ini. Jika ada persentase browser yang cukup besar yang belum mendukung fitur tersebut, fitur tersebut harus memastikan bahwa setidaknya tidak memiliki efek buruk bagi browser tersebut.
Nilai minimum jarak dari area pandang
Masalah umum terkait penerapan pemuatan lambat adalah pada prinsipnya meningkatkan kemungkinan gambar tidak akan dimuat setelah terlihat di area pandang pengguna karena siklus pemuatan dimulai pada tahap selanjutnya. Berbeda dengan solusi berbasis JavaScript sebelumnya, browser mendekati hal ini secara konservatif dan lebih jauh lagi dapat menyesuaikan pendekatannya berdasarkan data pengalaman pengguna di dunia nyata, sehingga meminimalkan dampaknya, sehingga pemuatan lambat tingkat browser akan aman untuk diadopsi oleh platform CMS.
Rekomendasi pengalaman pengguna
Memerlukan atribut dimensi pada elemen
Untuk menghindari pergeseran tata letak, sudah menjadi rekomendasi lama bahwa
konten tersemat seperti gambar atau iframe harus selalu menyertakan atribut dimensi width dan height,
sehingga browser dapat menyimpulkan rasio aspek elemen tersebut sebelum benar-benar
memuatnya. Rekomendasi ini relevan terlepas dari apakah elemen
dimuat lambat atau tidak. Namun, karena
kemungkinan gambar tidak dimuat sepenuhnya setelah berada di area pandang 0,1% lebih besar,
hal ini menjadi sedikit lebih berlaku dengan pemuatan lambat.
Sebaiknya CMS memberikan atribut dimensi pada semua gambar dan iframe. Jika hal ini tidak memungkinkan untuk setiap elemen tersebut, sebaiknya abaikan gambar pemuatan lambat yang tidak menyediakan kedua atribut ini.
Menghindari pemuatan lambat elemen paruh atas
Saat ini, CMS direkomendasikan untuk hanya menambahkan atribut loading="lazy" ke
gambar dan iframe yang diposisikan di bawah lipatan, untuk menghindari penundaan
dalam metrik Largest Contentful Paint, yang dalam beberapa kasus dapat
signifikan seperti yang ditemukan pada Juli 2021. Namun, perlu
diakui bahwa menilai posisi elemen
secara relatif terhadap area pandang sebelum proses rendering itu rumit. Hal ini berlaku terutama
jika CMS menggunakan pendekatan otomatis untuk menambahkan atribut loading, tetapi meskipun
berdasarkan intervensi manual, beberapa faktor seperti ukuran dan rasio aspek
tampilan perlu dipertimbangkan. Namun, sebaiknya hapus gambar hero dan gambar atau iframe lain yang cenderung muncul di atas lipatan agar tidak dimuat lambat.
Menghindari penggantian JavaScript
Meskipun JavaScript dapat digunakan untuk
memberikan pemuatan lambat ke browser yang (belum) mendukung atribut loading,
mekanisme tersebut selalu mengandalkan penghapusan atribut src dari
gambar atau iframe, yang menyebabkan penundaan untuk browser yang benar-benar mendukung
atribut tersebut. Selain itu, meluncurkan solusi berbasis JavaScript tersebut di
frontend CMS skala besar akan meningkatkan area permukaan untuk potensi masalah,
yang merupakan bagian dari alasan tidak ada CMS utama yang mengadopsi pemuatan lambat di intinya sebelum
fitur browser standar.
Rekomendasi teknis
Mengaktifkan pemuatan lambat secara default
Rekomendasi keseluruhan untuk CMS yang menerapkan pemuatan lambat tingkat browser adalah
mengaktifkannya secara default, yaitu loading="lazy" harus ditambahkan ke gambar dan
iframe, sebaiknya
hanya untuk elemen yang menyertakan atribut dimensi.
Mengaktifkan fitur ini secara default akan menghasilkan penghematan resource jaringan
yang lebih besar daripada jika harus diaktifkan secara manual, misalnya per gambar.
Sebisa mungkin, loading="lazy" harus
hanya ditambahkan ke elemen yang kemungkinan muncul di bawah fold.
Meskipun persyaratan ini dapat sulit diterapkan untuk CMS karena kurangnya kesadaran sisi klien dan berbagai ukuran area pandang, sebaiknya setidaknya gunakan heuristik perkiraan untuk menghapus elemen seperti gambar hero yang kemungkinan akan muncul di atas lipatan agar tidak dimuat lambat.
Mengizinkan modifikasi per elemen
Meskipun loading="lazy" harus ditambahkan ke gambar dan iframe secara default, Anda harus
mengizinkan penghapusan atribut pada gambar tertentu, misalnya untuk
mengoptimalkan LCP. Jika audiens CMS secara
rata-rata dianggap lebih paham teknologi, ini bisa berupa kontrol UI yang ditampilkan untuk setiap
gambar dan iframe yang memungkinkan untuk memilih tidak menggunakan pemuatan lambat untuk elemen tersebut.
Atau, sebagai tambahan, API dapat diekspos ke developer pihak ketiga
sehingga mereka dapat melakukan perubahan serupa melalui kode.
WordPress, misalnya, memungkinkan untuk melewati atribut loading baik untuk
seluruh tag atau konteks HTML
maupun untuk
elemen HTML tertentu dalam konten.
Melakukan retrofit pada konten yang ada
Pada tingkat tinggi, ada dua pendekatan untuk menambahkan atribut loading ke elemen HTML di CMS:
- Tambahkan atribut dari dalam editor konten di backend, yang menyimpannya secara terus-menerus di database.
- Tambahkan atribut secara langsung saat merender konten dari database di frontend.
Sebaiknya CMS memilih untuk menambahkan atribut secara langsung saat merender, untuk memberikan manfaat pemuatan lambat juga ke konten yang ada. Jika atribut hanya dapat ditambahkan melalui editor, hanya konten baru atau yang baru-baru ini diubah yang akan menerima manfaatnya, sehingga CMS akan mengurangi dampak penghematan resource jaringan secara drastis. Selain itu, menambahkan atribut dengan cepat akan memungkinkan modifikasi di masa mendatang dengan mudah, jika kemampuan pemuatan lambat tingkat browser diperluas lebih lanjut.
Menambahkan atribut secara langsung harus memenuhi atribut loading yang mungkin ada
di elemen dan membiarkan atribut tersebut lebih
diprioritaskan. Dengan cara ini, CMS atau ekstensi untuk CMS juga dapat menerapkan
pendekatan yang didorong editor tanpa menyebabkan konflik dengan atribut duplikat.
Mengoptimalkan performa sisi server
Saat menambahkan atribut loading ke konten dengan cepat menggunakan (misalnya)
middleware sisi server, kecepatan adalah pertimbangan. Bergantung pada CMS, atribut dapat ditambahkan melalui traversal DOM atau ekspresi reguler, dengan ekspresi reguler direkomendasikan untuk performa.
Penggunaan ekspresi reguler harus diminimalkan, misalnya satu ekspresi reguler
yang mengumpulkan semua tag img dan iframe dalam konten, termasuk
atributnya, lalu menambahkan atribut loading ke setiap string tag sesuai
yang berlaku. WordPress, misalnya, sampai
memiliki satu ekspresi reguler umum untuk melakukan berbagai operasi langsung ke elemen tertentu,
yang menambahkan loading="lazy" hanyalah salah satunya, menggunakan satu ekspresi reguler
untuk memfasilitasi beberapa fitur. Selain itu, bentuk pengoptimalan ini
adalah alasan lain mengapa mengadopsi pemuatan lambat di core CMS direkomendasikan daripada
ekstensi - hal ini memungkinkan pengoptimalan performa sisi server yang lebih baik.
Langkah berikutnya
Lihat apakah ada tiket permintaan fitur yang ada untuk menambahkan dukungan untuk fitur di CMS Anda, atau buka tiket baru jika belum ada. Gunakan referensi ke postingan ini sesuai kebutuhan untuk mendukung proposal Anda.
Kirim tweet kepada saya (felixarntz@) untuk mengajukan pertanyaan atau komentar, atau agar CMS Anda tercantum di halaman ini jika dukungan untuk pemuatan lambat tingkat browser telah ditambahkan. Jika Anda mengalami tantangan lain, kami juga ingin mempelajarinya lebih lanjut agar dapat menemukan solusinya.
Jika Anda adalah developer platform CMS, pelajari cara CMS lain menerapkan pemuatan lambat:
Anda dapat menggunakan pembelajaran dari riset dan rekomendasi teknis dari postingan ini untuk mulai berkontribusi pada kode CMS, misalnya dalam bentuk patch atau permintaan pull.
Foto hero oleh Colin Watts di Unsplash.