Pemuatan lambat tingkat browser untuk CMS

Pembelajaran untuk mengadopsi atribut pemuatan standar

Felix Arntz

Tujuan saya menulis postingan ini adalah untuk meyakinkan developer dan kontributor platform CMS (yaitu orang-orang yang mengembangkan inti CMS) bahwa sekarang adalah saatnya 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 dalam 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, orang 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 mendorong platform CMS Anda 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 semakin banyak diadopsi oleh berbagai browser. Namun, pencapaian ini hanya menjadi dasar untuk web yang lebih cepat dan lebih hemat resource. Sekarang, ekosistem web terdistribusi dapat menggunakan atribut loading.

Sistem pengelolaan konten mendukung sekitar 60% situs, sehingga platform ini memainkan peran penting dalam menghadirkan 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 kesimpulan yang relevan untuk mengadopsi fitur ini di platform CMS lainnya juga. Pemuatan lambat media adalah fitur performa web utama yang harus dimanfaatkan situs dalam skala besar, itulah sebabnya sebaiknya adopsi fitur ini di tingkat inti CMS.

Alasan untuk menerapkan pemuatan lambat sekarang

Standardisasi

Adopsi fitur browser yang tidak standar di CMS memfasilitasi pengujian yang meluas dan dapat memunculkan potensi area peningkatan. Namun, konsensus umum di berbagai CMS adalah, selama fitur browser tidak distandardisasi, fitur tersebut sebaiknya diimplementasikan dalam bentuk ekstensi atau plugin untuk platform masing-masing. Hanya setelah distandardisasi, fitur dapat dipertimbangkan untuk diadopsi dalam 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 menjadi perhatian: Mayoritas 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 fitur tersebut 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 bahwa pada prinsipnya, penerapan ini meningkatkan kemungkinan gambar tidak akan dimuat setelah terlihat di area pandang pengguna karena siklus pemuatan dimulai pada 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 dampak, sehingga pemuatan lambat tingkat browser seharusnya aman untuk diadopsi oleh platform CMS.

Keberhasilan: 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 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 secara eager dan gambar yang dimuat secara lambat.

Rekomendasi pengalaman pengguna

Memerlukan atribut dimensi pada elemen

Untuk menghindari perubahan tata letak, rekomendasi yang sudah lama ada adalah konten sematan 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 0,1% lebih besar bahwa gambar tidak dimuat sepenuhnya setelah berada di area pandang, gambar tersebut menjadi sedikit lebih dapat diterapkan dengan pemuatan lambat.

CMS sebaiknya memberikan atribut dimensi pada semua gambar dan iframe. Jika hal ini 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 konsekuensi antara menghemat resource jaringan tambahan dan kemungkinan pergeseran tata letak yang sedikit lebih tinggi untuk memutuskan apakah pemuatan lambat layak dilakukan.

Hindari 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 dalam metrik Largest Contentful Paint, yang dalam beberapa kasus dapat signifikan seperti yang ditemukan pada Juli 2021. Namun, harus diakui bahwa sulit untuk menilai posisi elemen relatif terhadap area tampilan 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, sebaiknya jangan gunakan pemuatan lambat untuk banner besar dan gambar atau iframe lain yang kemungkinan akan muncul di paruh atas.

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

Perhatian: Hindari menyediakan penggantian berbasis JavaScript di CMS. Dengan meningkatnya penggunaan atribut loading dan tidak adanya efek buruk pada versi browser yang belum mendukungnya, lebih aman untuk tidak menyediakan fitur ini ke browser tersebut dan mendorong 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" sebaiknya hanya ditambahkan ke elemen yang kemungkinan muncul di paruh bawah. Meskipun persyaratan ini dapat menjadi rumit untuk diterapkan pada CMS karena kurangnya pemahaman sisi klien dan berbagai ukuran area pandang, sebaiknya setidaknya gunakan perkiraan heuristik untuk menghilangkan elemen seperti banner besar yang kemungkinan akan muncul di paruh atas agar tidak dimuat lambat.

Mengizinkan modifikasi per elemen

Meskipun loading="lazy" harus ditambahkan ke gambar dan iframe secara default, Anda harus mengizinkan penghilangan atribut pada gambar tertentu, misalnya untuk mengoptimalkan LCP. Jika audiens CMS rata-rata dianggap lebih paham teknologi, hal ini dapat menjadi kontrol UI yang ditampilkan untuk setiap gambar dan iframe yang memungkinkan untuk memilih tidak menggunakan pemuatan lambat untuk elemen tersebut. Atau, API dapat diekspos ke developer pihak ketiga sehingga mereka dapat membuat perubahan serupa melalui kode.

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

Perhatian: Jika elemen tidak boleh dimuat lambat, wajibkan 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 secara langsung, yang akan mencegah potensi manfaat jika browser menerapkan mekanisme dan heuristik lebih lanjut untuk otomatis memutuskan elemen mana yang akan dimuat lambat.

Memperbaiki konten yang ada

Secara umum, ada dua pendekatan untuk menambahkan atribut loading ke elemen HTML di CMS:

• Tambahkan atribut dari dalam editor konten di backend, dan simpan secara persisten di database.
• Tambahkan atribut dengan cepat saat merender konten dari database di frontend.

Sebaiknya CMS memilih untuk menambahkan atribut secara langsung saat rendering, agar manfaat pemuatan lambat juga dapat diterapkan ke konten yang ada. Jika atribut hanya dapat ditambahkan melalui editor, hanya konten baru atau yang baru saja diubah yang akan menerima manfaatnya, sehingga secara drastis mengurangi dampak CMS dalam menghemat 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 akan mengakomodasi atribut loading yang mungkin sudah ada pada elemen, dan mengizinkan atribut tersebut diprioritaskan. Dengan cara ini, CMS atau ekstensinya juga dapat menerapkan pendekatan berbasis editor tanpa menyebabkan konflik dengan atribut duplikat.

Mengoptimalkan performa sisi server

Saat menambahkan atribut loading ke konten secara langsung 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 dijaga seminimal mungkin, 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 bahkan memiliki satu ekspresi reguler umum untuk melakukan berbagai operasi langsung ke elemen tertentu, yang salah satunya adalah menambahkan loading="lazy", menggunakan satu ekspresi reguler untuk memfasilitasi beberapa fitur. Bentuk pengoptimalan ini juga merupakan alasan lain mengapa mengadopsi pemuatan lambat di inti CMS lebih direkomendasikan daripada ekstensi - hal ini memungkinkan pengoptimalan performa sisi server yang lebih baik.

Langkah berikutnya

Lihat apakah ada tiket permintaan fitur yang sudah ada 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@) untuk pertanyaan atau komentar, atau untuk mencantumkan CMS Anda di halaman ini jika dukungan untuk pemuatan lambat tingkat browser telah ditambahkan. Jika Anda mengalami 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 berkontribusi kode ke CMS, misalnya dalam bentuk patch atau permintaan pull.