7 Strategi Terbukti untuk Memperbaiki Peringatan “Hindari Ukuran DOM yang Berlebihan”.

Diterbitkan: 2022-11-23

TL; DR: Memperbaiki peringatan "Hindari ukuran DOM yang berlebihan" tidak akan meningkatkan skor Lighthouse Anda, tetapi berdampak langsung pada kinerja dunia nyata situs Anda. Ukuran DOM yang besar memperlambat situs Anda, meningkatkan waktu rendering dan biaya data untuk pengguna Anda, dan membebani memori perangkat mereka. Ada banyak solusi untuk masalah ukuran DOM yang berlebihan seperti menghindari tema dan plugin berkode buruk, membagi situs web satu halaman Anda menjadi beberapa halaman, dan menggunakan pembuat halaman dengan hati-hati.

Sebagian besar saran peningkatan Google PageSpeed Insights cukup mudah.

Apakah itu "menunda gambar di luar layar", "menghilangkan sumber daya pemblokiran render", atau "mengurangi CSS yang tidak digunakan", Anda dapat memahami langkah selanjutnya yang perlu diambil untuk mengatasi masalah tersebut.

Namun, ketika Anda menggulir sedikit lebih dalam, Anda tiba-tiba terkena peringatan "Hindari ukuran DOM yang berlebihan":

Reaksi pertama:

Apa itu ukuran DOM, dan bagaimana cara memperbaikinya?!

Anda berada di tempat yang tepat.

Dalam paragraf berikut, Anda akan mempelajari semua yang perlu Anda ketahui tentang ukuran DOM dan cara mengatasi peringatan ini:

Apa itu DOM (Document Object Model)?
Apa pengaruh ukuran DOM pada performa halaman?
Mengapa Anda melihat peringatan "Hindari ukuran DOM yang berlebihan".
Cara memperbaiki peringatan "Hindari ukuran DOM yang berlebihan".

Raih skor 90+ PSI dengan satu klik tombol. Lihat situs Anda dengan NitroPack!

Apa itu DOM?

Situs web Anda menyertakan sumber daya seperti dokumen HTML, CSS, dan file JavaScript.

Setiap kali pengguna memuat situs web Anda, browser mereka membuat koneksi dan menerima sumber daya. Setelah potongan data pertama diterima, proses penguraian dimulai.

Parsing adalah langkah yang dilakukan browser untuk mengubah data (markup HTML) menjadi pohon DOM.

DOM adalah model dokumen yang mewakili HTML sebagai pohon cabang dan node.

Setiap cabang pohon berakhir dengan sebuah node, dan setiap node berisi objek. Node mewakili bagian dari dokumen, seperti elemen, string teks, atau komentar.

Dalam istilah yang lebih sederhana, ketika Anda mendengar DOM, itu berarti struktur objek yang dibuat browser setiap kali halaman web dimuat.

Istilah kunci:

Node. Setiap elemen atau tag dalam DOM disebut node atau daun.
Kedalaman. Jumlah elemen dalam cabang DOM.
Elemen anak. Node terakhir yang tidak bercabang lagi.

Apa pengaruh ukuran DOM pada performa halaman?

Semakin banyak cabang dan node yang dimiliki DOM Anda, semakin besar ukurannya.

Masing-masing, semakin besar ukuran DOM, semakin banyak masalah kinerja negatif yang mungkin Anda hadapi.

Berikut adalah beberapa masalah yang terkait dengan ukuran DOM yang lebih besar:

1. Peningkatan biaya data dan waktu muat yang lebih lambat

Pohon DOM yang besar sering kali menyertakan banyak simpul yang tidak terlihat saat pengguna pertama kali memuat laman. Ini tidak perlu akan meningkatkan biaya data, karena mereka harus memuat lebih banyak elemen, untuk pengguna Anda dan memperlambat waktu muat.

2. Menguasai sumber daya memori perangkat pengguna Anda

Interaksi terus-menerus dengan kueri JavaScript menyebabkan kinerja yang buruk dan rendering yang lambat. Ini menghasilkan pengalaman halaman yang negatif bagi pengguna situs Anda.

3. Peningkatan waktu rendering

Saat pengguna berinteraksi dengan halaman Anda, browser harus terus menghitung ulang posisi dan gaya node. Pohon DOM yang besar dan rumit dapat memperlambat rendering secara drastis.

4. Peningkatan Waktu ke Byte Pertama (TTFB)

TTFB mengukur berapa lama browser klien menerima byte pertama dari respons dari server. DOM yang berlebihan menunjukkan dokumen HTML yang lebih besar. Akibatnya, ada lebih banyak data yang harus diangkut, yang bisa memakan waktu lebih lama.

Mengapa Anda melihat peringatan “Hindari ukuran DOM yang berlebihan” di PageSpeed Insights

PSI menggunakan Lighthouse untuk menganalisis URL dalam lingkungan yang terkendali (yakni menggunakan data lab) untuk menampilkan Skor Performa, Aksesibilitas, Praktik Terbaik, dan SEO.

Agar Lighthouse menandai halaman Anda dan masing-masing - menampilkan peringatan "Hindari ukuran DOM yang berlebihan" di laporan PSI Anda, salah satu kesalahan berikut harus benar untuk pohon DOM-nya:

Ini memiliki total lebih dari 1.500 node DOM .
Ini memiliki kedalaman node maksimum lebih besar dari 32 node .
Node induk memiliki lebih dari 60 node anak .

Perlu diketahui: Ukuran DOM tidak secara langsung memengaruhi skor Lighthouse Anda (yaitu Performa, Aksesibilitas, Praktik Terbaik, dan SEO). Namun, ukuran DOM yang berlebihan akan berdampak negatif pada kinerja dunia nyata situs Anda, yang menyebabkan waktu muat yang lambat dan pengalaman pengguna yang buruk bagi pengguna Anda.

Bergabunglah dengan 31% situs web teratas yang lulus Core Web Vitals mereka! Lihat situs Anda dengan NitroPack

Cara Memperbaiki Hindari ukuran DOM yang berlebihan

Aturan praktis yang baik dari Google adalah:

“Secara umum, cari cara untuk membuat node DOM hanya saat dibutuhkan, dan hancurkan node saat tidak diperlukan lagi.”

Tentu saja, itu lebih mudah diucapkan daripada dilakukan, dan akan ada saat-saat ketika Anda harus turun ke seluk-beluk mengoptimalkan situs web Anda.

Kemudian, kami sarankan untuk menerapkan beberapa perbaikan berikut:

1. Hindari plugin dan tema dengan kode buruk

Mereka pada dasarnya akan menggembungkan kode situs Anda, meningkatkan ukuran DOM Anda, dan merusak kecepatan dan kinerja situs Anda secara keseluruhan.

Bagaimana Anda bisa tahu jika tema/plugin dikodekan dengan buruk?

Pertanyaan bagus. Dan jawabannya adalah:

Baca ulasannya. Jika ada masalah, kemungkinan besar seseorang telah menemuinya dan berkomentar.
Jangan malu untuk mengeluarkan uang. Sama seperti yang lainnya, Anda mendapatkan apa yang Anda bayar. Menghemat uang dengan mendapatkan tema/plugin gratis mungkin terdengar bagus, tetapi efek jangka panjangnya akan membuat Anda lebih mahal.
Periksa kapan terakhir diperbarui. Anda pasti ingin menghindari tema dan plugin yang kedaluwarsa.

Jika Anda adalah pengguna WooCommerce atau berencana untuk memulai toko, Anda harus memeriksa penelitian mendalam kami tentang tema Woo berperforma terbaik di tahun 2022.

Berikut daftar hal-hal yang harus Anda perhatikan/hindari saat memilih tema:

Tema multi-tujuan. Mereka datang dengan banyak opsi yang tidak akan pernah Anda gunakan dan, pada saat yang sama, akan menggembungkan kode Anda.
Versi gratis. Sekali lagi, mereka bagus untuk test drive, tetapi seringkali, kinerjanya buruk dan dapat menyebabkan banyak masalah bagi Anda.
Tema kosong. Jangan pernah menggunakan versi retak dari tema berbayar, karena dapat berisi skrip berbahaya yang dapat membahayakan situs web Anda.

2. Minimalkan node DOM berbasis JavaScript

Menambahkan elemen dinamis di situs web Anda ada harganya, karena mereka mungkin membengkaknya dengan node JavaScript tambahan.

Sebagai permulaan, Anda dapat memperbaikinya dengan mengalokasikan file JS yang menyebabkan masalah dan menghapusnya. Jika itu adalah widget pihak ketiga (misalnya, widget obrolan), Anda harus mencari alternatif yang dioptimalkan.

3. Pembuat halaman yang menghasilkan HTML yang membengkak

Kemudahan penggunaan pembuat halaman telah menjadikannya bagian integral dari proses pembuatan situs web untuk banyak pengguna.

Sayangnya, pembuat halaman terkadang dapat menghasilkan kode yang membengkak dengan jumlah node DOM yang berlebihan. Mereka melakukannya dengan menyuntikkan terlalu banyak tag div.

Untuk mengatasinya, Anda dapat mengakses HTML Anda dan memperbaikinya secara manual.

Kabar baiknya adalah beberapa pembuat halaman mengambil langkah-langkah untuk menyelesaikan masalah umum ini. Misalnya, Elementor telah mengumumkan bahwa Elementor 3.0 hadir dengan peningkatan DOM yang signifikan untuk meningkatkan kecepatan dan kinerja situs web baru.

4. Jangan salin/tempel teks ke editor WYSIWYG

Sebagian besar editor WYSIWYG (What You See Is What You Get) gagal membersihkan kode yang ditempelkan. Terutama ketika disisipkan dari sumber rich text lain seperti Microsoft Word. Masalahnya adalah itu tidak hanya akan menyalin teks tetapi juga gayanya. Dan mereka adalah penyebab utama karena mereka mungkin menyematkan banyak node DOM.

Anda memiliki beberapa opsi untuk menghadapinya:

Hindari menempelkan teks di editor Anda
Gunakan opsi Tempel sebagai Teks Biasa
(Jika editor Anda mengizinkan) Gunakan fitur lanjutan untuk membersihkan kode setelah menempelkannya

Dan yang tak kalah pentingnya - kembali ke halaman lama Anda dan bersihkan.

5. Hancurkan situs web satu halaman Anda menjadi beberapa halaman

Situs web satu halaman adalah ide bagus jika tujuannya hanya untuk mempresentasikan bisnis Anda.

Sebaliknya, jika Anda memutuskan untuk menambahkan info bisnis, artikel blog, produk, formulir kontak, dll., bagi menjadi beberapa halaman terpisah dan tautkan melalui menu navigasi.

Memisahkan halaman besar menjadi beberapa halaman dapat mengurangi jumlah node DOM.

6. Jangan sembunyikan elemen yang tidak diinginkan menggunakan display:none

display: none umumnya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan membuatnya kembali. Namun, itu tidak berarti bahwa mereka menghilang dari markup HTML Anda, membuat pengunjung memuat elemen yang tidak diinginkan.

7. Hindari penggunaan deklarasi CSS dan JavaScript yang rumit

Deklarasi CSS dan JavaScript yang rumit juga dapat meningkatkan penggunaan memori dan memperlambat situs Anda. Sebaiknya lewati saja jika Anda berurusan dengan jumlah node DOM yang berlebihan.

Perbaiki masalah CSS dan JavaScript secara otomatis! Lihat situs Anda dengan NitroPack

Kesimpulannya

Benar bahwa memperbaiki masalah DOM tidak akan meningkatkan skor PageSpeed Insights Anda.

Namun, manfaat tersembunyi dari upaya menangani peringatan "hindari ukuran DOM yang berlebihan" jauh lebih besar:

Tingkatkan waktu muat situs Anda
Tingkatkan kinerja yang dirasakan halaman Anda
Berikan pengalaman pengguna yang lebih baik kepada pengunjung

Yang terpenting, ketiga hal ini dihargai oleh Google ! Selain itu, mereka adalah cara yang pasti untuk menurunkan rasio pentalan, meningkatkan waktu rata-rata yang dihabiskan, dan yang terakhir, meningkatkan konversi.

Jika Anda sedang mencari cara untuk memperbaiki saran PSI lainnya, pastikan untuk membaca artikel kami yang lain:

Sajikan Gambar dalam Format Generasi Berikutnya dengan Mudah (WordPress, OpenCart & Magento)
Cara Malas Memuat Gambar Di Luar Layar (5 Teknik Terbukti)
Pengoptimalan Gambar untuk Web: SEO 2022 dan Teknik Kecepatan Situs
8 Strategi Pemuatan Font untuk Meningkatkan Data Web Inti Anda (2022)
Cara Menghilangkan Render-Blocking Resource (CSS dan JavaScript)
Kurangi Dampak Kode Pihak Ketiga (Dengan/Tanpa Plugin)
7 Cara Meminimalkan Pekerjaan Thread Utama