DOM (Model Objek Dokumen) adalah nama umum untuk struktur pohon tag HTML. Dampaknya terhadap kecepatan halaman adalah semakin kompleks struktur HTML Anda selama rendering halaman, semakin lambat pula halaman Anda.
Menurut Lighthouse, kompleksitasnya Struktur DOM diukur menggunakan tiga metrik. Untuk memberikan metrik ini dengan titik referensinya:
- Jumlah total tag seharusnya kurang dari 1500
- Kedalaman tag maksimum seharusnya kurang dari 32
- Jumlah maksimum tag anak yang seharusnya kurang dari 60
Dalam contoh di atas, jumlah total tag buruk, kedalaman tag maksimum baik, namun jumlah maksimum tag anak buruk.
Mengoptimalkan elemen DOM sepenuhnya menjadi tanggung jawab pemangku kepentingan frontend. Setiap tag yang dipilih secara acak atau sewenang-wenang saat kode halaman pertama kali dibuat memiliki biaya setelah proyek selesai. Oleh karena itu, kami mengundang semua pengembang frontend untuk mengheningkan cipta dan membuka mata.
Poin-poin di mana DOM yang meningkat berdampak negatif terhadap kinerja laman meliputi:
- Halaman dengan jumlah node (tag) yang banyak akan mengalami masalah kemacetan jaringan dan kesulitan memuat karena ukurannya yang besar, sehingga meningkatkan TTFB (Time to First Byte).
- Merender node yang dimuat untuk dibuat posisi dan gaya mereka membutuhkan waktu, sehingga meningkatkan FCP (First Contentful Paint).
- Ketika jumlah node bertambah, beban yang diperlukan akan meningkat Manipulasi JavaScript membebani memori, meningkatkan TFT (Waktunya untuk Interaktif).
Untuk mengilustrasikan optimasi DOM dengan contoh yang sangat sederhana, pertimbangkan hal berikut ini ketika jumlah dan kedalaman DOM dikurangi:
<div id="nav-element">
<ul>
</ul>
</div>Daripada melakukan ini:
<ul id="nav-element">
</ul>
Hal ini perlu dilakukan: Dua metode yang paling direkomendasikan untuk mengurangi ukuran DOM adalah pemuatan lambat dan penomoran halaman. Karena struktur kartu pada halaman daftar berisi banyak DOM, disarankan untuk melakukan pengguliran atau penomoran halaman tanpa batas. Saat menentukan jumlah item dalam penomoran halaman, kriteria pengukuran DOM harus dipertimbangkan. Waktu biasanya dipertimbangkan jumlah produk di pagination adalah 15-20 detik, namun bagian ini sebenarnya harus dihitung dari sisi pemangku kepentingan frontend, dengan mempertimbangkan ukuran DOM.
Salah satu solusi yang sangat sederhana adalah dengan tidak menambahkan elemen yang tidak terlihat di halaman ke HTML tanpa menyembunyikannya dengan CSS. Jika suatu elemen perlu ditampilkan, elemen tersebut harus dipanggil nanti dan ditampilkan kepada pengguna. Anda harus menyadari bahwa menyembunyikan elemen dengan CSS akan memperbesar DOM.
sumber:
