Pemuatan lambat tingkat browser untuk CMS

Pembelajaran mengadopsi atribut pemuatan standar

Felix Arntz

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.

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

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.

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

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.

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

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.

Perhatian: Jika CMS tidak dapat menyediakan atribut width dan height pada gambar dan iframe dalam skala besar, Anda harus mempertimbangkan untung-rugi antara menghemat resource jaringan tambahan dan peluang yang sedikit lebih besar bagi pergeseran tata letak untuk memutuskan apakah pemuatan lambat bermanfaat atau tidak.

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.

Catatan: Bergantung pada kemampuan dan audiens CMS, coba tentukan perkiraan yang wajar terkait apakah gambar atau iframe kemungkinan akan berada di area tampilan awal, misalnya, jangan pernah menjalankan elemen pemuatan lambat di template header atau banner besar konten utama. Selain itu, tawarkan UI atau API yang memungkinkan modifikasi keberadaan atribut loading pada elemen.

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.

Perhatian: Hindari menyediakan penggantian berbasis JavaScript di CMS. Dengan semakin banyaknya penggunaan atribut loading dan tidak ada efek buruk pada versi browser yang belum mendukungnya, sebaiknya jangan sediakan fitur tersebut untuk browser tersebut dan sebaiknya update ke versi browser yang lebih baru.

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.

Perhatian: Jika sebuah elemen tidak boleh dimuat dengan lambat, wajibkan atau anjurkan mengabaikan atribut loading sepenuhnya. Meskipun penggunaan 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 otomatis memutuskan elemen mana yang akan dimuat lambat.

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:

• WordPress Core
• Joomla
• TYPO3

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.