Ukuran DOM yang besar memiliki lebih banyak efek pada interaktivitas daripada yang Anda kira. Panduan ini menjelaskan alasannya, dan tindakan yang dapat Anda lakukan.
Tidak ada cara lain: saat Anda mem-build halaman web, halaman tersebut akan memiliki Document Object Model (DOM). DOM mewakili struktur HTML halaman Anda, dan memberi JavaScript dan CSS akses ke struktur dan konten halaman.
Namun, masalahnya adalah ukuran DOM memengaruhi kemampuan browser untuk merender halaman dengan cepat dan efisien. Secara umum, semakin besar DOM, semakin mahal biaya untuk merender halaman tersebut pada awalnya dan memperbarui renderingnya nanti dalam siklus proses halaman.
Hal ini menjadi masalah di halaman dengan DOM yang sangat besar saat interaksi yang mengubah atau memperbarui DOM memicu pekerjaan tata letak yang mahal yang memengaruhi kemampuan halaman untuk merespons dengan cepat. Pekerjaan tata letak yang mahal dapat memengaruhi Interaction to Next Paint (INP) halaman; Jika Anda ingin halaman merespons interaksi pengguna dengan cepat, penting untuk memastikan ukuran DOM Anda hanya sebesar yang diperlukan.
Kapan DOM halaman terlalu besar?
Menurut Lighthouse, ukuran DOM halaman berlebihan jika melebihi 1.400 node. Lighthouse akan mulai menampilkan peringatan saat DOM halaman melebihi 800 node. Misalnya, HTML berikut:
<ul>
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
</ul>
Dalam kode di atas, ada empat elemen DOM: elemen <ul>, dan tiga elemen turunan <li>-nya. Halaman web Anda hampir pasti akan memiliki lebih banyak node daripada ini, jadi penting untuk memahami apa yang dapat Anda lakukan untuk memeriksa ukuran DOM—serta strategi lain untuk mengoptimalkan pekerjaan rendering setelah Anda mendapatkan DOM halaman yang sekecil mungkin.
Bagaimana pengaruh DOM yang besar terhadap performa halaman?
DOM yang besar memengaruhi performa halaman dengan beberapa cara:
- Selama render awal halaman. Saat CSS diterapkan ke halaman, struktur yang mirip dengan DOM yang dikenal sebagai CSS Object Model (CSSOM) akan dibuat. Seiring meningkatnya kekhususan pemilih CSS, CSSOM menjadi lebih kompleks, dan lebih banyak waktu yang diperlukan untuk menjalankan tata letak, gaya visual, komposisi, dan pekerjaan cat yang diperlukan untuk menggambar halaman web ke layar. Pekerjaan tambahan ini meningkatkan latensi interaksi untuk interaksi yang terjadi di awal selama pemuatan halaman.
- Saat interaksi mengubah DOM, baik melalui penyisipan atau penghapusan elemen, atau dengan mengubah konten dan gaya DOM, pekerjaan yang diperlukan untuk merender pembaruan tersebut dapat mengakibatkan pekerjaan tata letak, gaya, komposisi, dan cat yang sangat mahal. Seperti halnya rendering awal halaman, peningkatan kekhususan pemilih CSS dapat menambah pekerjaan rendering saat elemen HTML disisipkan ke DOM sebagai hasil dari interaksi.
- Saat JavaScript membuat kueri DOM, referensi ke elemen DOM disimpan dalam memori. Misalnya, jika Anda memanggil
document.querySelectorAlluntuk memilih semua elemen<div>di halaman, biaya memori dapat menjadi cukup besar jika hasilnya menampilkan banyak elemen DOM.
Semua hal ini dapat memengaruhi interaktivitas, tetapi item kedua dalam daftar di atas sangat penting. Jika interaksi menghasilkan perubahan pada DOM, interaksi tersebut dapat memulai banyak pekerjaan yang dapat berkontribusi pada INP yang buruk di halaman.
Bagaimana cara mengukur ukuran DOM?
Anda dapat mengukur ukuran DOM dengan beberapa cara. Metode pertama menggunakan Lighthouse. Saat Anda menjalankan audit, statistik pada DOM halaman saat ini akan berada di audit "Hindari ukuran DOM yang berlebihan" di bagian "Diagnostik". Di bagian ini, Anda dapat melihat jumlah total elemen DOM, elemen DOM yang berisi elemen turunan terbanyak, serta elemen DOM terdalam.
Metode yang lebih sederhana melibatkan penggunaan konsol JavaScript di alat developer di browser utama. Untuk mendapatkan jumlah total elemen HTML di DOM, Anda dapat menggunakan kode berikut di konsol setelah halaman dimuat:
document.querySelectorAll('*').length;
Jika ingin melihat pembaruan ukuran DOM secara real time, Anda juga dapat menggunakan alat pemantauan performa. Dengan alat ini, Anda dapat mengaitkan operasi tata letak dan gaya visual (serta aspek performa lainnya) bersama dengan ukuran DOM saat ini.
Jika ukuran DOM mendekati nilai minimum peringatan ukuran DOM Lighthouse—atau gagal sama sekali—langkah berikutnya adalah mencari tahu cara mengurangi ukuran DOM untuk meningkatkan kemampuan halaman Anda dalam merespons interaksi pengguna sehingga INP situs Anda dapat meningkat.
Bagaimana cara mengukur jumlah elemen DOM yang terpengaruh oleh interaksi?
Jika Anda membuat profil interaksi lambat di lab yang Anda curigai mungkin terkait dengan ukuran DOM halaman, Anda dapat mengetahui jumlah elemen DOM yang terpengaruh dengan memilih bagian aktivitas apa pun di profiler yang berlabel "Recalculate Style" dan mengamati data kontekstual di panel bawah.
Pada screenshot di atas, perhatikan bahwa penghitungan ulang gaya karya—saat dipilih—menampilkan jumlah elemen yang terpengaruh. Meskipun screenshot di atas menunjukkan kasus ekstrem efek ukuran DOM pada pekerjaan rendering di halaman dengan banyak elemen DOM, info diagnostik ini berguna untuk menentukan apakah ukuran DOM adalah faktor pembatas dalam waktu yang diperlukan frame berikutnya untuk digambar sebagai respons terhadap interaksi.
Bagaimana cara mengurangi ukuran DOM?
Selain mengaudit HTML situs Anda untuk menemukan markup yang tidak perlu, cara utama untuk mengurangi ukuran DOM adalah dengan mengurangi kedalaman DOM. Salah satu sinyal bahwa DOM Anda mungkin tidak perlu terlalu dalam adalah jika Anda melihat markup yang terlihat seperti ini di tab Elements pada alat developer browser:
<div>
<div>
<div>
<div>
<!-- Contents -->
</div>
</div>
</div>
</div>
Saat melihat pola seperti ini, Anda mungkin dapat menyederhanakannya dengan meratakan struktur DOM. Tindakan ini akan mengurangi jumlah elemen DOM, dan kemungkinan memberi Anda kesempatan untuk menyederhanakan gaya halaman.
Kedalaman DOM juga dapat menjadi gejala framework yang Anda gunakan. Secara khusus, framework berbasis komponen—seperti yang mengandalkan JSX—memerlukan Anda untuk menyusun beberapa komponen dalam penampung induk.
Namun, banyak framework yang memungkinkan Anda menghindari komponen bertingkat dengan menggunakan fragmen. Framework berbasis komponen yang menawarkan fragmen sebagai fitur mencakup (tetapi tidak terbatas pada) hal-hal berikut:
Dengan menggunakan fragmen dalam framework pilihan Anda, Anda dapat mengurangi kedalaman DOM. Jika Anda khawatir dengan dampak perataan struktur DOM terhadap gaya visual, Anda mungkin akan mendapatkan manfaat dari penggunaan mode tata letak yang lebih modern (dan lebih cepat) seperti flexbox atau petak.
Strategi lain yang perlu dipertimbangkan
Meskipun Anda berusaha keras untuk meratakan hierarki DOM dan menghapus elemen HTML yang tidak perlu agar DOM tetap sekecil mungkin, DOM masih bisa cukup besar dan memulai banyak pekerjaan rendering saat berubah sebagai respons terhadap interaksi pengguna. Jika Anda berada dalam posisi ini, ada beberapa strategi lain yang dapat Anda pertimbangkan untuk membatasi pekerjaan rendering.
Pertimbangkan pendekatan tambahan
Anda mungkin berada dalam posisi saat sebagian besar halaman tidak terlihat oleh pengguna saat pertama kali dirender. Hal ini dapat menjadi peluang untuk memuat HTML secara lambat dengan menghapus bagian DOM tersebut saat memulai, tetapi menambahkannya saat pengguna berinteraksi dengan bagian halaman yang memerlukan aspek halaman yang awalnya tersembunyi.
Pendekatan ini berguna selama pemuatan awal dan mungkin bahkan setelahnya. Untuk pemuatan halaman awal, Anda melakukan lebih sedikit pekerjaan rendering di awal, yang berarti payload HTML awal Anda akan lebih ringan, dan akan dirender lebih cepat. Hal ini akan memberi interaksi selama periode penting tersebut lebih banyak peluang untuk berjalan dengan lebih sedikit persaingan untuk mendapatkan perhatian thread utama.
Jika Anda memiliki banyak bagian halaman yang awalnya disembunyikan saat dimuat, hal ini juga dapat mempercepat interaksi lain yang memicu pekerjaan rendering ulang. Namun, karena interaksi lain menambahkan lebih banyak ke DOM, pekerjaan rendering akan meningkat seiring dengan bertambahnya DOM selama siklus proses halaman.
Menambahkan ke DOM dari waktu ke waktu bisa jadi rumit, dan memiliki konsekuensinya sendiri. Jika menggunakan metode ini, Anda mungkin akan membuat permintaan jaringan untuk mendapatkan data guna mengisi HTML yang ingin ditambahkan ke halaman sebagai respons terhadap interaksi pengguna. Meskipun permintaan jaringan yang sedang berlangsung tidak dihitung dalam INP, permintaan tersebut dapat meningkatkan latensi yang dirasakan. Jika memungkinkan, tampilkan indikator pemuatan atau indikator lain bahwa data sedang diambil sehingga pengguna memahami bahwa sesuatu sedang terjadi.
Membatasi kompleksitas pemilih CSS
Saat mengurai pemilih di CSS, browser harus menelusuri hierarki DOM untuk memahami cara—dan apakah—pemilih tersebut berlaku untuk tata letak saat ini. Makin kompleks pemilih ini, makin banyak tugas yang harus dilakukan browser untuk melakukan rendering awal halaman, serta peningkatan penghitungan ulang gaya dan pekerjaan tata letak jika halaman berubah sebagai hasil dari interaksi.
Menggunakan properti content-visibility
CSS menawarkan properti content-visibility, yang secara efektif merupakan cara untuk merender elemen DOM di luar layar secara lambat. Saat mendekati area pandang, elemen akan dirender sesuai permintaan. Manfaat content-visibility tidak hanya memotong pekerjaan rendering dalam jumlah yang signifikan pada rendering halaman awal, tetapi juga melewati pekerjaan rendering untuk elemen di luar layar saat DOM halaman diubah sebagai hasil dari interaksi pengguna.
Kesimpulan
Mengurangi ukuran DOM hanya ke yang benar-benar diperlukan adalah cara yang baik untuk mengoptimalkan INP situs Anda. Dengan demikian, Anda dapat mengurangi jumlah waktu yang diperlukan browser untuk melakukan pekerjaan tata letak dan rendering saat DOM diperbarui. Meskipun Anda tidak dapat mengurangi ukuran DOM secara signifikan, ada beberapa teknik yang dapat Anda gunakan untuk mengisolasi pekerjaan rendering ke sub-pohon DOM, seperti pembatasan CSS dan properti CSS content-visibility.
Apa pun cara Anda melakukannya, membuat lingkungan tempat pekerjaan rendering diminimalkan—serta mengurangi jumlah pekerjaan rendering yang dilakukan halaman Anda sebagai respons terhadap interaksi—akan membuat situs Anda terasa lebih responsif bagi pengguna saat mereka berinteraksi dengan situs tersebut. Artinya, Anda akan memiliki INP yang lebih rendah untuk situs Anda, dan hal ini akan menghasilkan pengalaman pengguna yang lebih baik.