Pengaruh ukuran DOM yang besar terhadap interaktivitas, dan tindakan yang dapat Anda lakukan

Ukuran DOM yang besar memiliki lebih banyak pengaruh terhadap interaktivitas daripada yang Anda perkirakan. Panduan ini menjelaskan alasannya dan tindakan yang dapat Anda lakukan.

Jeremy Wagner

Tidak ada cara lain: saat Anda mem-build halaman web, halaman tersebut akan memiliki Document Object Model (DOM). DOM merepresentasikan struktur HTML halaman Anda, dan memberi JavaScript serta 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 merender halaman tersebut terlebih dahulu dan memperbarui renderingnya nanti di siklus proses halaman.

Hal ini akan bermasalah di halaman dengan DOM yang sangat besar jika interaksi yang mengubah atau memperbarui DOM memicu pekerjaan tata letak yang mahal dan 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?

Istilah penting: Penting untuk mengetahui perbedaan antara elemen DOM dan node DOM. Elemen DOM merujuk ke elemen HTML tertentu dalam hierarki DOM. Node DOM memiliki makna yang tumpang tindih dengan istilah elemen DOM, tetapi definisinya diperluas hingga mencakup komentar, spasi kosong, dan teks. Meskipun audit ukuran DOM Lighthouse merujuk pada node DOM, panduan ini akan merujuk pada elemen DOM daripada node jika memungkinkan.

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 dari ini, jadi penting untuk memahami apa yang dapat Anda lakukan untuk menjaga ukuran DOM tetap terkendali—serta strategi lain untuk mengoptimalkan pekerjaan rendering setelah Anda mendapatkan DOM halaman sekecil mungkin.

Bagaimana pengaruh DOM yang besar terhadap performa halaman?

DOM yang besar memengaruhi performa halaman dengan beberapa cara:

1. Selama render awal halaman. Saat CSS diterapkan ke halaman, struktur yang mirip dengan DOM yang dikenal sebagai CSS Object Model (CSSOM) akan dibuat. Seiring dengan peningkatan kekhususan CSS, GCLID menjadi lebih kompleks, dan diperlukan lebih banyak waktu untuk menjalankan pekerjaan tata letak, penataan gaya, pengomposisian, dan penggambaran yang diperlukan untuk menggambar laman web ke layar. Pekerjaan tambahan ini meningkatkan latensi interaksi untuk interaksi yang terjadi di awal selama pemuatan halaman.
2. Saat interaksi memodifikasi DOM, baik melalui penyisipan atau penghapusan elemen, atau dengan memodifikasi konten dan gaya DOM, pekerjaan yang diperlukan untuk merender pembaruan tersebut bisa mengakibatkan pekerjaan tata letak, penataan gaya, pengomposisian, dan penggambaran 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.
3. Saat JavaScript melakukan kueri DOM, referensi ke elemen DOM disimpan di memori. Misalnya, jika Anda memanggil document.querySelectorAll untuk memilih semua elemen <div> di halaman, biaya memori bisa cukup besar jika hasilnya menampilkan sejumlah besar elemen DOM.

Tugas yang lama seperti yang ditampilkan di profiler performa di Chrome DevTools. Tugas panjang yang ditampilkan disebabkan oleh penyisipan elemen DOM ke dalam DOM besar melalui JavaScript.

Semua 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 di DOM halaman saat ini akan berada di audit "Hindari ukuran DOM berlebihan" di judul "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;

Catatan: Perhatikan bahwa cuplikan kode di atas hanya menyertakan jumlah elemen HTML di DOM. Ini tidak menyertakan semua node di DOM.

Jika ingin melihat pembaruan ukuran DOM secara realtime, Anda juga dapat menggunakan alat pemantau performa. Dengan alat ini, Anda dapat mengaitkan operasi tata letak dan gaya visual (serta aspek performa lainnya) bersama dengan ukuran DOM saat ini.

Performance monitor di Chrome DevTools. Dalam tampilan ini, jumlah node DOM halaman saat ini dipetakan bersama dengan operasi tata letak dan penghitungan ulang gaya yang dilakukan per detik.

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 dipengaruhi 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.

Mengamati jumlah elemen yang terpengaruh dalam DOM sebagai hasil kerja penghitungan ulang gaya. Perhatikan bahwa bagian interaksi yang diarsir di jalur interaksi mewakili bagian durasi interaksi yang lebih dari 200 milidetik, yang merupakan batas "baik" yang ditetapkan untuk INP.

Pada screenshot di atas, amati bahwa penghitungan ulang gaya suatu pekerjaan—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 untuk mencari markup yang tidak perlu, cara utama untuk mengurangi ukuran DOM adalah 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>

Jika melihat pola seperti ini, Anda mungkin dapat menyederhanakannya dengan meratakan struktur DOM. Melakukan hal itu akan mengurangi jumlah elemen DOM, dan mungkin memberi Anda kesempatan untuk menyederhanakan gaya halaman.

Kedalaman DOM mungkin juga merupakan 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 memungkinkan Anda menghindari penyusunan bertingkat menggunakan apa yang dikenal sebagai fragmen. Framework berbasis komponen yang menawarkan fragmen sebagai fitur mencakup (tetapi tidak terbatas pada) hal-hal berikut:

• Bereaksi
• Preact
• Vue
• Svelte

Dengan menggunakan fragmen dalam framework pilihan Anda, Anda dapat mengurangi kedalaman DOM. Jika khawatir dengan dampak perataan struktur DOM terhadap gaya, Anda dapat memanfaatkan mode tata letak yang lebih modern (dan lebih cepat), seperti flexbox atau grid.

Strategi lain yang perlu dipertimbangkan

Meskipun Anda berusaha keras untuk meratakan hierarki DOM dan menghapus elemen HTML yang tidak diperlukan 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 menghilangkan bagian DOM tersebut saat memulai, tetapi tambahkan saat pengguna berinteraksi dengan bagian halaman yang memerlukan aspek halaman yang awalnya tersembunyi.

Pendekatan ini bermanfaat baik selama pemuatan awal maupun bahkan mungkin 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 tersembunyi 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 DOM dari waktu ke waktu bisa menjadi hal yang rumit, dan ada 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 browser mengurai pemilih di CSS, browser harus menelusuri hierarki DOM untuk memahami bagaimana—dan apakah—pemilih tersebut diterapkan pada 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.

Baca untuk mempelajari lebih lanjut: Mengurangi cakupan dan kompleksitas penghitungan gaya.

Menggunakan properti content-visibility

CSS menawarkan properti content-visibility, yang secara efektif merupakan cara untuk merender elemen DOM 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 melewatkan pekerjaan rendering untuk elemen di luar layar saat DOM halaman diubah sebagai hasil dari interaksi pengguna.

Baca untuk mempelajari lebih lanjut: content-visibility: properti CSS baru yang meningkatkan performa rendering Anda.

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 subhierarki 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.