Ukuran DOM yang besar memiliki pengaruh yang lebih besar pada interaktivitas daripada yang Anda kira. Panduan ini menjelaskan mengapa dan apa yang dapat Anda lakukan.
Tidak ada cara untuk mengatasinya: saat Anda membuat 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 untuk mulai merender halaman tersebut dan memperbarui renderingnya nanti dalam siklus proses halaman.
Hal ini menjadi bermasalah di halaman dengan DOM yang sangat besar saat interaksi yang memodifikasi 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, pastikan 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. Ambil contoh 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>. Hampir bisa dipastikan bahwa laman web Anda akan memiliki lebih banyak simpul daripada jumlah ini, jadi penting untuk memahami apa yang bisa Anda lakukan untuk menjaga ukuran DOM tetap terpantau—serta strategi lain untuk mengoptimalkan pekerjaan rendering setelah Anda mendapatkan DOM laman sekecil mungkin.
Bagaimana DOM besar memengaruhi performa halaman?
DOM 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 CSS, WebView menjadi lebih kompleks, dan semakin banyak waktu yang diperlukan untuk menjalankan tata letak, penataan gaya, pengomposisian, dan pekerjaan menggambar yang diperlukan untuk menggambar halaman web ke layar. Pekerjaan tambahan ini meningkatkan latensi interaksi untuk interaksi yang terjadi lebih awal selama pemuatan halaman.
- Saat interaksi memodifikasi DOM, baik melalui penyisipan atau penghapusan elemen, maupun dengan memodifikasi konten dan gaya DOM, pekerjaan yang diperlukan untuk merender pembaruan tersebut dapat menghasilkan tata letak, penataan gaya, pengomposisian, dan pekerjaan menggambar yang sangat mahal. Seperti halnya pada render awal halaman, peningkatan kekhususan pemilih CSS dapat ditambahkan ke pekerjaan rendering saat elemen HTML disisipkan ke dalam DOM sebagai hasil dari interaksi.
- Ketika JavaScript mengkueri DOM, referensi ke elemen DOM akan disimpan di memori. Misalnya, jika Anda memanggil
document.querySelectorAlluntuk memilih semua elemen<div>di halaman, biaya memori bisa cukup besar jika hasilnya menampilkan sejumlah besar elemen DOM.
Semua itu dapat memengaruhi interaktivitas, tetapi item kedua dalam daftar di atas sangatlah penting. Jika interaksi mengakibatkan 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. Ketika Anda menjalankan audit, statistik tentang DOM halaman saat ini akan berada di audit "Hindari ukuran DOM yang berlebihan" pada judul "Diagnostik". Di bagian ini, Anda dapat melihat jumlah total elemen DOM, elemen DOM yang berisi sebagian besar elemen turunan, serta elemen DOM terdalam.
Metode yang lebih sederhana melibatkan penggunaan konsol JavaScript pada 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 bisa menghubungkan operasi tata letak dan penataan gaya (serta aspek kinerja lainnya) bersama dengan ukuran DOM saat ini.
Jika ukuran DOM mendekati batas peringatan ukuran DOM Lighthouse—atau gagal sama sekali—langkah berikutnya adalah mencari tahu cara mengurangi ukuran DOM untuk meningkatkan kemampuan halaman dalam merespons interaksi pengguna sehingga INP situs web Anda dapat meningkat.
Bagaimana cara mengukur jumlah elemen DOM yang terpengaruh oleh interaksi?
Jika Anda memprofilkan interaksi lambat di lab yang Anda duga berkaitan dengan ukuran DOM halaman, Anda dapat mengetahui jumlah elemen DOM yang terpengaruh dengan memilih setiap bagian aktivitas di profiler yang berlabel "Recalculate Style" dan mengamati data kontekstual di panel bawah.
Dalam screenshot di atas, amati bahwa penghitungan ulang gaya pekerjaan—saat dipilih—menunjukkan jumlah elemen yang terpengaruh. Meskipun screenshot di atas menunjukkan kasus ekstrem dari efek ukuran DOM pada pekerjaan rendering di halaman dengan banyak elemen DOM, info diagnostik ini berguna dalam kasus apa pun untuk menentukan apakah ukuran DOM merupakan faktor pembatas dalam waktu yang diperlukan oleh frame berikutnya untuk digambar sebagai respons terhadap interaksi.
Bagaimana cara mengurangi ukuran DOM?
Selain mengaudit HTML situs web Anda untuk markup yang tidak diperlukan, cara utama untuk mengurangi ukuran DOM adalah dengan mengurangi kedalaman DOM. Salah satu sinyal bahwa DOM Anda mungkin terlalu rumit adalah jika Anda melihat markup yang terlihat seperti ini di tab Elemen pada fitur 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 akan memberi Anda kesempatan untuk menyederhanakan gaya halaman.
Kedalaman DOM juga mungkin menjadi gejala dari kerangka kerja yang Anda gunakan. Secara khusus, framework berbasis komponen—seperti framework yang mengandalkan JSX—mengharuskan Anda menyusun bertingkat beberapa komponen dalam penampung induk.
Namun, banyak framework memungkinkan Anda menghindari komponen bertingkat dengan menggunakan apa yang dikenal sebagai fragmen. Framework berbasis komponen yang menawarkan fragmen sebagai fitur mencakup (tetapi tidak terbatas pada) hal berikut:
Dengan menggunakan fragmen dalam framework pilihan, Anda dapat mengurangi kedalaman DOM. Jika Anda khawatir tentang dampak struktur DOM meratakan gaya, Anda bisa memanfaatkan mode tata letak yang lebih modern (dan lebih cepat) seperti flexbox atau grid.
Strategi lain yang dapat dipertimbangkan
Bahkan jika Anda berusaha keras untuk meratakan pohon DOM Anda dan menghapus elemen HTML yang tidak perlu untuk menjaga DOM Anda sekecil mungkin, itu masih bisa cukup besar dan memulai banyak pekerjaan rendering karena berubah sebagai respons terhadap interaksi pengguna. Jika Anda berada di posisi ini, ada beberapa strategi lain yang dapat dipertimbangkan untuk membatasi pekerjaan rendering.
Mempertimbangkan pendekatan tambahan
Anda mungkin berada dalam posisi saat sebagian besar halaman pada awalnya tidak terlihat oleh pengguna saat pertama kali dirender. Ini bisa menjadi peluang untuk memperlambat pemuatan HTML dengan menghilangkan bagian DOM tersebut saat browser dimulai, tetapi menambahkannya saat pengguna berinteraksi dengan bagian halaman yang memerlukan aspek halaman yang pertama kali disembunyikan.
Pendekatan ini berguna selama pemuatan awal dan bahkan mungkin setelahnya. Untuk pemuatan halaman awal, Anda mengurangi pekerjaan rendering di awal, yang berarti bahwa payload HTML awal akan lebih ringan, dan akan dirender lebih cepat. Hal ini akan memberi interaksi lebih banyak peluang untuk dijalankan dengan lebih sedikit persaingan dalam merebut perhatian thread utama selama periode penting tersebut.
Jika Anda memiliki banyak bagian halaman yang awalnya tersembunyi saat dimuat, hal ini juga dapat mempercepat interaksi lain yang memicu pekerjaan rendering ulang. Namun, seiring dengan bertambahnya interaksi lain ke DOM, pekerjaan rendering akan meningkat seiring pertumbuhan DOM di sepanjang siklus proses halaman.
Menambahkan ke DOM dari waktu ke waktu bisa jadi rumit, dan memiliki konsekuensinya sendiri. Jika menggunakan cara ini, Anda kemungkinan membuat permintaan jaringan guna mendapatkan data untuk mengisi HTML yang ingin ditambahkan ke halaman sebagai respons terhadap interaksi pengguna. Meskipun permintaan jaringan yang sedang berlangsung tidak dihitung terhadap INP, hal ini dapat meningkatkan latensi yang dirasakan. Jika memungkinkan, tampilkan indikator lingkaran berputar atau indikator lain bahwa data sedang diambil sehingga pengguna mengetahui bahwa sesuatu sedang terjadi.
Membatasi kompleksitas pemilih CSS
Saat browser mengurai pemilih dalam CSS, browser harus melewati pohon DOM untuk memahami bagaimana—dan apakah—pemilih tersebut diterapkan pada tata letak saat ini. Semakin kompleks pemilih ini, semakin banyak pekerjaan 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 dengan lambat. Saat mendekati area pandang, elemen akan dirender sesuai permintaan. Manfaat content-visibility tidak hanya memotong sejumlah besar pekerjaan rendering pada render halaman awal, tetapi juga melewati pekerjaan rendering untuk elemen di balik layar saat DOM halaman diubah sebagai hasil dari interaksi pengguna.
Kesimpulan
Mengurangi ukuran DOM menjadi hanya ukuran yang benar-benar diperlukan adalah cara yang baik untuk mengoptimalkan INP situs Anda. Dengan melakukannya, 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 digunakan untuk mengisolasi pekerjaan rendering ke subhierarki DOM, seperti pembatasan CSS dan properti CSS content-visibility.
Bagaimanapun cara Anda melakukannya, menciptakan lingkungan di mana pekerjaan rendering diminimalkan—serta mengurangi jumlah pekerjaan rendering yang dilakukan halaman Anda sebagai respons terhadap interaksi—hasilnya adalah bahwa situs web Anda akan terasa lebih responsif terhadap pengguna ketika mereka berinteraksi dengan mereka. Artinya, Anda akan memiliki INP yang lebih rendah untuk situs Anda, dan hal itu berarti pengalaman pengguna menjadi lebih baik.
Banner besar dari Unsplash, oleh Louis Reed.