Pemuatan lambat tingkat browser untuk CMS

Pembelajaran untuk mengadopsi atribut pemuatan terstandardisasi

Felix Arntz

Tujuan saya dengan postingan ini adalah membujuk developer dan kontributor platform CMS (yaitu orang-orang yang mengembangkan inti CMS) bahwa sekarang saatnya menerapkan dukungan untuk fitur pemuatan lambat gambar tingkat browser. Saya juga akan membagikan rekomendasi tentang cara memastikan pengalaman pengguna berkualitas tinggi dan mengaktifkan penyesuaian oleh developer lain sekaligus 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. Baca 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 HOWWG dan semakin banyak diadopsi oleh berbagai browser. Namun, pencapaian ini hanya mempersiapkan dasar untuk web yang lebih cepat dan lebih hemat resource. Layanan ini kini hadir di ekosistem web terdistribusi untuk menggunakan atribut loading.

Sistem pengelolaan konten mendukung sekitar 60% situs, sehingga platform tersebut berperan penting dalam menghadirkan adopsi fitur browser modern ke web. Dengan beberapa CMS open source populer seperti WordPress, Joomla, dan TYPO3 yang telah mengimplementasikan dukungan untuk atribut loading pada gambar, mari kita lihat pendekatan dan poin-poin penting yang relevan untuk mengadopsi fitur ini di platform CMS lainnya. Media pemuatan lambat adalah fitur performa web utama yang akan dimanfaatkan situs dalam skala besar. Oleh karena itu, sebaiknya gunakan media tersebut pada tingkat inti CMS.

Kasus untuk menerapkan pemuatan lambat sekarang

Standardisasi

Adopsi fitur browser yang tidak standar di CMS memfasilitasi pengujian secara luas dan dapat menampilkan potensi peningkatan. Namun, konsensus umum di seluruh CMS adalah bahwa, selama fitur browser tidak terstandardisasi, sebaiknya fitur tersebut diimplementasikan dalam bentuk ekstensi atau plugin untuk platform masing-masing. Hanya setelah distandardisasi, sebuah fitur dapat dipertimbangkan untuk adopsi di inti platform.

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

Dukungan browser

Dukungan browser untuk fitur ini juga memiliki masalah yang serupa: Sebagian besar pengguna CMS harus dapat memanfaatkan fitur ini. Jika ada persentase yang cukup besar untuk browser yang fiturnya belum didukung, fitur tersebut harus memastikan bahwa fitur tersebut 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 menggunakannya.

Batas jarak dari area pandang

Permasalahan umum dengan penerapan pemuatan lambat adalah penerapan tersebut pada prinsipnya meningkatkan kemungkinan gambar tidak akan dimuat setelah terlihat di area tampilan pengguna karena siklus pemuatan dimulai di tahap berikutnya. Berbeda dengan solusi berbasis JavaScript sebelumnya, browser melakukan pendekatan ini secara konservatif dan selanjutnya dapat menyesuaikan pendekatannya berdasarkan data pengalaman pengguna di dunia nyata, sehingga meminimalkan dampaknya, sehingga pemuatan lambat tingkat browser aman untuk diterapkan oleh platform CMS.

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

Rekomendasi pengalaman pengguna

Mewajibkan atribut dimensi pada elemen

Untuk menghindari pergeseran tata letak, rekomendasi yang sudah lama ada adalah konten yang disematkan 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 dengan lambat atau tidak. Namun, karena kemungkinan 0,1% lebih besar gambar tidak dimuat sepenuhnya sekali di area tampilan, gambaran akan sedikit lebih sesuai dengan pemuatan lambat.

Sebaiknya CMS menyediakan atribut dimensi pada semua gambar dan iframe. Jika tidak memungkinkan untuk setiap elemen seperti itu, sebaiknya lewati gambar pemuatan lambat 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 konsekuensi antara menghemat resource jaringan tambahan dan peluang yang sedikit lebih tinggi untuk pergeseran tata letak guna memutuskan apakah pemuatan lambat bermanfaat.

Menghindari pemuatan lambat elemen paruh atas

Saat ini, CMS direkomendasikan untuk hanya menambahkan atribut loading="lazy" ke gambar dan iframe yang diposisikan di paruh bawah, untuk menghindari penundaan metrik Largest Contentful Paint, yang dalam beberapa kasus dapat signifikan seperti yang ditemukan pada Juli 2021. Namun, harus diakui bahwa menilai posisi elemen yang relatif terhadap area pandang itu sulit dilakukan sebelum proses rendering. 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 dengan lambat.

Catatan: Bergantung pada kemampuan dan audiens CMS, coba tentukan perkiraan yang wajar terkait apakah gambar atau iframe cenderung berada di area pandang awal, misalnya, jangan pernah menjalankan lazy pemuatan elemen 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 tidak (belum) mendukung atribut loading, mekanisme tersebut selalu mengandalkan penghapusan atribut src dari gambar atau iframe di awal, yang menyebabkan penundaan bagi browser yang memang mendukung atribut tersebut. Selain itu, meluncurkan solusi berbasis JavaScript tersebut di frontend CMS berskala besar meningkatkan area permukaan untuk potensi masalah, yang merupakan bagian dari alasan mengapa tidak ada CMS besar yang menerapkan pemuatan lambat di intinya sebelum fitur browser standar.

Perhatian: Hindari menyediakan penggantian berbasis JavaScript di CMS. Dengan makin banyaknya penggunaan atribut loading dan belum ada efek buruk pada versi browser yang belum mendukungnya, lebih aman jika Anda tidak menyediakan fitur ini ke browser tersebut dan sebaiknya update ke versi browser yang lebih baru.

Rekomendasi teknis

Aktifkan pemuatan lambat secara default

Keseluruhan rekomendasi 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 secara default akan mengakibatkan penyimpanan resource jaringan yang lebih besar dibandingkan jika harus diaktifkan secara manual, misalnya per gambar.

Sebisa mungkin, loading="lazy" hanya boleh ditambahkan ke elemen yang mungkin muncul di paruh bawah. Meskipun persyaratan ini dapat menjadi rumit untuk diterapkan pada CMS karena kurangnya awareness dari sisi klien dan berbagai ukuran area pandang, sebaiknya minimal gunakan perkiraan heuristik untuk menghilangkan elemen seperti banner besar yang kemungkinan akan muncul di paruh atas agar tidak dimuat dengan lambat.

Izinkan modifikasi per elemen

Meskipun loading="lazy" harus ditambahkan ke gambar dan iframe secara default, sangat penting untuk mengizinkan penghapusan atribut pada gambar tertentu, misalnya untuk mengoptimalkan LCP. Jika audiens CMS rata-rata dianggap lebih memahami teknologi, hal ini dapat berupa kontrol UI yang diekspos untuk setiap gambar dan iframe yang memungkinkan pemuatan lambat untuk elemen tersebut. Sebagai alternatif atau tambahan, API dapat diekspos kepada developer pihak ketiga sehingga mereka dapat membuat perubahan serupa melalui kode.

Misalnya WordPress memungkinkan pelewatan atribut loading untuk seluruh tag HTML atau konteks atau untuk elemen HTML tertentu dalam konten.

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

Konten Retrofit yang ada

Pada tingkat tinggi, ada dua pendekatan untuk menambahkan atribut loading ke elemen HTML dalam CMS:

• Tambahkan atribut dari dalam editor konten di backend, dengan terus menyimpannya dalam database.
• Tambahkan atribut dengan cepat saat merender konten dari database di frontend.

Sebaiknya CMS memilih menambahkan atribut dengan cepat saat rendering, untuk memberikan manfaat pemuatan lambat ke konten yang ada juga. Jika atribut hanya dapat ditambahkan melalui editor, hanya konten baru atau konten yang baru diubah yang akan menerima manfaat, sehingga 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.

Menambahkan atribut dengan cepat harus mengakomodasi atribut loading yang mungkin ada pada elemen dan membiarkan atribut tersebut diutamakan. Dengan cara ini, CMS atau ekstensi untuknya juga dapat menerapkan pendekatan berbasis 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 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 berlaku. Misalnya, WordPress sejauh ini memiliki satu ekspresi reguler umum untuk melakukan berbagai operasi sambil jalan ke elemen tertentu, dengan menambahkan loading="lazy" hanya satu, 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. Hal ini memungkinkan pengoptimalan performa sisi server yang lebih baik.

Langkah berikutnya

Lihat apakah sudah ada tiket permintaan fitur untuk menambahkan dukungan bagi fitur tersebut 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@) jika ada pertanyaan atau komentar, atau agar CMS Anda dicantumkan di halaman ini jika dukungan untuk pemuatan lambat tingkat browser telah ditambahkan. Jika Anda menemui tantangan lain, saya juga ingin mempelajarinya lebih lanjut untuk menemukan solusi.

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 menyumbangkan kode ke CMS, misalnya dalam bentuk patch atau permintaan pull.

Banner besar oleh Colin Watts di Unsplash.