Pemuatan lambat tingkat browser untuk CMS

Pembelajaran untuk mengadopsi atribut pemuatan standar

Felix Arntz

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.

Berhasil: Pemuatan lambat tingkat browser kini menjadi bagian dari Standar HTML WHATWG untuk elemen img dan iframe.

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.

Berhasil: Pemuatan lambat tingkat browser didukung secara luas oleh browser dan atribut loading diabaikan begitu saja oleh browser yang belum mengadopsinya.

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.

Sukses: Eksperimen yang menggunakan Chrome di Android menunjukkan bahwa di jaringan 4G, 97,5% gambar yang dimuat lambat di bawah fold dimuat sepenuhnya dalam waktu 10 md setelah terlihat, dibandingkan dengan 97,6% untuk gambar yang tidak dimuat lambat. Dengan kata lain, hampir tidak ada perbedaan (0,1%) dalam pengalaman pengguna antara gambar yang dimuat dengan cepat dan gambar yang dimuat lambat.

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.

Perhatian: Jika CMS tidak dapat memberikan atribut width dan height pada gambar dan iframe dalam skala besar, Anda harus mempertimbangkan kompromi antara menghemat resource jaringan tambahan dan peluang yang sedikit lebih tinggi untuk pergeseran tata letak guna memutuskan apakah pemuatan lambat layak dilakukan.

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.

Catatan: Bergantung pada kemampuan dan audiens CMS, coba tentukan estimasi yang wajar untuk mengetahui apakah gambar atau iframe kemungkinan akan berada di area pandang awal, misalnya jangan pernah memuat elemen secara lambat di template header atau gambar hero konten utama. Selain itu, tawarkan UI atau API yang memungkinkan perubahan keberadaan atribut loading pada elemen.

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.

Perhatian: Hindari menyediakan penggantian berbasis JavaScript di CMS. Dengan semakin banyaknya penggunaan atribut loading dan tidak adanya efek samping pada versi browser yang belum mendukungnya, sebaiknya jangan berikan fitur tersebut ke browser tersebut dan dorong pengguna untuk mengupdate ke versi browser yang lebih baru.

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.

Perhatian: Jika elemen tidak boleh dimuat lambat, minta atau dorong untuk melewati atribut loading sepenuhnya. Meskipun menggunakan loading="eager" adalah alternatif yang didukung, hal ini akan memberi tahu browser secara eksplisit untuk selalu memuat gambar dengan segera, yang akan mencegah potensi manfaat jika browser menerapkan mekanisme dan heuristik lebih lanjut untuk secara otomatis memutuskan elemen mana yang akan dimuat lambat.

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:

• WordPress Core
• Joomla
• TYPO3

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.