Pembelajaran mengadopsi atribut pemuatan standar
Tujuan saya dengan postingan ini adalah untuk meyakinkan developer dan kontributor platform CMS (yaitu orang-orang yang mengembangkan inti CMS) bahwa sekarang adalah waktu yang tepat untuk menerapkan dukungan bagi fitur pemuatan lambat gambar tingkat browser. Saya juga akan membagikan rekomendasi tentang cara memastikan pengalaman pengguna berkualitas tinggi dan mengaktifkan penyesuaian oleh developer lain saat menerapkan pemuatan lambat. Panduan ini berasal dari pengalaman kami dalam menambahkan dukungan ke WordPress serta membantu Joomla, Drupal, dan TYPO3 menerapkan fitur tersebut.
Terlepas dari apakah Anda seorang developer platform CMS atau pengguna CMS (yaitu orang yang membuat situs dengan CMS), Anda dapat menggunakan postingan ini untuk mempelajari lebih lanjut manfaat pemuatan lambat tingkat browser di CMS. Lihat bagian Langkah berikutnya untuk mendapatkan saran tentang cara mendorong platform CMS untuk menerapkan pemuatan lambat.
Latar belakang
Selama setahun terakhir,
pemuatan lambat gambar dan iframe menggunakan atribut loading
telah
menjadi bagian dari Standar HTML WhatWG
dan
terlihat terus meningkat oleh berbagai browser.
Namun, milestone ini hanya menjadi dasar untuk
web yang lebih cepat dan hemat resource.
Sekarang atribut tersebut kini ada di ekosistem web terdistribusi untuk memanfaatkan atribut loading.
Sistem pengelolaan konten
mendukung sekitar 60% situs,
sehingga platform tersebut memainkan peran penting dalam menghadirkan pengadopsian 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-poin penting yang relevan untuk mengadopsi fitur
di platform CMS lainnya. Media pemuatan lambat adalah fitur performa web utama
yang dapat dimanfaatkan situs dalam skala besar. Oleh karena itu, sebaiknya gunakan
media ini di tingkat inti CMS.
Kasus untuk menerapkan pemuatan lambat sekarang
Standardisasi
Penerapan fitur browser nonstandar di CMS memfasilitasi pengujian secara luas dan dapat menampilkan potensi area untuk ditingkatkan. Namun, konsensus umum di seluruh CMS adalah bahwa, selama fitur browser tidak terstandardisasi, sebaiknya sebaiknya diterapkan dalam bentuk ekstensi atau plugin untuk masing-masing platform. Hanya setelah distandarisasi, fitur dapat dipertimbangkan untuk diadopsi di inti platform.
Dukungan browser
Dukungan browser untuk fitur ini juga menjadi perhatian yang sama: Sebagian besar pengguna CMS dapat memperoleh manfaat dari fitur ini. Jika ada cukup banyak browser yang belum mendukung fitur tersebut, fitur tersebut harus memastikan bahwa setidaknya tidak ada efek buruk bagi fitur tersebut.
Nilai minimum jarak dari area pandang
Masalah umum pada implementasi pemuatan lambat adalah bahwa pada prinsipnya akan meningkatkan kemungkinan gambar tidak akan dimuat setelah terlihat di area tampilan pengguna karena siklus pemuatan dimulai pada tahap selanjutnya. Berbeda dengan solusi berbasis JavaScript sebelumnya, browser melakukan pendekatan ini secara konservatif dan selanjutnya dapat menyesuaikan pendekatan tersebut berdasarkan data pengalaman pengguna di dunia nyata, yang meminimalkan dampaknya, sehingga pemuatan lambat tingkat browser aman untuk digunakan oleh platform CMS.
Rekomendasi pengalaman pengguna
Mewajibkan atribut dimensi pada elemen
Untuk menghindari pergeseran tata letak, sebaiknya
konten yang disematkan seperti gambar atau iframe 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 suatu elemen
dimuat lambat atau tidak. Namun, karena
kemungkinan gambar tidak dimuat sepenuhnya 0,1% lebih besar setelah berada di area pandang,
maka gambar menjadi sedikit lebih dapat diterapkan dengan pemuatan lambat.
Sebaiknya CMS menyediakan atribut dimensi pada semua gambar dan iframe. Jika tidak memungkinkan untuk setiap elemen tersebut, sebaiknya lewati pemuatan lambat gambar yang tidak menyediakan kedua atribut ini.
Menghindari pemuatan lambat elemen paruh atas
Untuk saat ini, CMS direkomendasikan untuk hanya menambahkan atribut loading="lazy" ke
gambar dan iframe yang diposisikan di paruh bawah, untuk menghindari penundaan
dalam metrik Largest Contentful Paint, yang dalam beberapa kasus dapat sangat
signifikan seperti yang ditemukan pada Juli 2021. Namun, harus
dinyatakan bahwa posisi elemen
sesuai dengan area pandang sebelum proses rendering harus dikonfirmasi. Hal ini berlaku terutama
jika CMS menggunakan pendekatan otomatis untuk menambahkan atribut loading, tetapi bahkan
berdasarkan intervensi manual, beberapa faktor seperti ukuran area pandang
dan rasio aspek yang berbeda harus dipertimbangkan. Namun, sangat disarankan untuk menghilangkan banner besar dan gambar atau iframe lain yang mungkin muncul di paruh atas agar tidak dimuat lambat.
Menghindari penggantian JavaScript
Meskipun JavaScript dapat digunakan untuk
menyediakan pemuatan lambat ke browser yang (belum) mendukung atribut loading,
mekanisme tersebut selalu mengandalkan penghapusan atribut src dari
gambar atau iframe pada awal, yang menyebabkan penundaan bagi browser yang memang mendukung
atribut tersebut. Selain itu, peluncuran solusi berbasis JavaScript tersebut di
frontend CMS berskala besar akan meningkatkan area platform untuk potensi masalah,
yang merupakan bagian dari alasan tidak ada CMS besar yang menerapkan pemuatan lambat di intinya sebelum
fitur browser standar diterapkan.
Rekomendasi teknis
Aktifkan 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 fitur ini harus diaktifkan secara manual, misalnya dengan dasar per gambar.
Sebisa mungkin, loading="lazy" hanya boleh
ditambahkan ke elemen yang mungkin muncul di paruh bawah.
Meskipun persyaratan ini mungkin rumit untuk diterapkan pada CMS karena kurangnya awareness sisi klien dan ukuran area pandang yang bervariasi, sebaiknya setidaknya gunakan heuristik perkiraan untuk menghilangkan elemen seperti banner besar yang kemungkinan akan muncul di paruh atas agar tidak dimuat dengan lambat.
Mengizinkan modifikasi per elemen
Meskipun loading="lazy" harus ditambahkan ke gambar dan iframe secara default, penting untuk mengizinkan penghapusan atribut pada gambar tertentu, misalnya untuk
mengoptimalkan LCP. Jika audiens CMS rata-rata
dianggap lebih paham teknologi, ini dapat berupa kontrol UI yang diekspos untuk setiap
gambar dan iframe yang memungkinkan Anda memilih tidak ikut pemuatan lambat untuk elemen tersebut.
Atau, sebagai tambahan, API dapat diekspos ke developer pihak ketiga
sehingga mereka dapat melakukan perubahan serupa melalui kode.
Misalnya, WordPress mengizinkan untuk melewati atribut loading baik untuk
seluruh tag HTML atau konteks
atau untuk
elemen HTML tertentu dalam konten.
Retrofit 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, lalu simpan secara persisten di database.
- Tambahkan atribut dengan cepat saat merender konten dari database di frontend.
Sebaiknya CMS memilih untuk menambahkan atribut dengan cepat saat melakukan rendering, agar dapat juga memberikan manfaat pemuatan lambat ke konten yang sudah ada. Jika atribut hanya dapat ditambahkan melalui editor, hanya konten baru atau konten yang baru saja dimodifikasi yang akan menerima manfaat. Hal ini akan secara drastis mengurangi dampak CMS terhadap penghematan resource jaringan. Selain itu, menambahkan atribut dengan cepat akan memudahkan modifikasi di masa mendatang, jika kemampuan pemuatan lambat tingkat browser diperluas lebih lanjut.
Namun, menambahkan atribut dengan cepat harus mengakomodasi atribut
loading yang mungkin sudah ada pada elemen dan memungkinkan atribut tersebut
diutamakan. Dengan cara ini, CMS atau ekstensi untuknya juga dapat menerapkan
pendekatan yang didorong oleh 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 menjadi pertimbangan Anda. Bergantung pada CMS, atribut dapat ditambahkan baik melalui traversal DOM atau ekspresi reguler, dengan yang terakhir 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 sebagaimana
yang berlaku. Misalnya, WordPress sejauh
memiliki satu ekspresi reguler umum untuk melakukan berbagai operasi dengan cepat ke elemen tertentu,
yang menambahkan loading="lazy" hanyalah salah satunya, menggunakan satu ekspresi reguler
untuk memfasilitasi beberapa fitur. Selain itu, bentuk pengoptimalan ini merupakan alasan lain mengapa penggunaan pemuatan lambat di inti CMS lebih direkomendasikan daripada ekstensi. Cara ini memungkinkan pengoptimalan performa sisi server yang lebih baik.
Langkah berikutnya
Periksa apakah sudah ada tiket permintaan fitur guna menambahkan dukungan untuk fitur tersebut di CMS Anda, atau buka tiket baru jika belum ada. Gunakan referensi ke postingan ini jika diperlukan untuk mendukung proposal Anda.
Tweet saya (felixarntz@) jika ada pertanyaan atau komentar, atau agar CMS Anda tercantum di halaman ini jika dukungan untuk pemuatan lambat tingkat browser telah ditambahkan. Jika Anda menghadapi tantangan lain, saya juga ingin mempelajarinya lebih lanjut untuk mendapatkan solusi.
Jika Anda adalah developer platform CMS, pelajari cara penerapan pemuatan lambat oleh CMS lain:
Anda dapat menggunakan pembelajaran dari riset Anda dan rekomendasi teknis dari postingan ini untuk mulai menyumbangkan kode ke CMS Anda, misalnya dalam bentuk patch atau permintaan pull.
Foto utama oleh Colin Watts di Unsplash.