Kunci untuk mengurangi ukuran DOM Situs Web

Salah satu aspek yang mempengaruhi pencapaian posisi SEO yang baik pada halaman web adalah kinerja pemuatannya. Dan ini adalah subjek di mana ukuran DOM halaman memainkan peran kunci.

Itu sebabnya kami akan menjelaskan bagaimana DOM dapat dianggap terlalu besar dan bagaimana menguranginya.

Mari kita mulai!

Apa itu DOM?

Sederhananya, ketika kita berbicara tentang DOM, kita mengacu pada struktur objek yang dihasilkan browser setiap kali memuat halaman . Itu berutang namanya ke akronim Model Objek Dokumen.

Ini adalah struktur hierarkis di mana ada objek yang berbeda, beberapa di antaranya bergantung pada yang lain. Strukturnya mirip dengan pohon karena ada objek utama yang menjadi sandaran item sekunder lainnya. DOM mewakili struktur HTML laman sebagai pohon , terdiri dari serangkaian tag.

Dengan kata lain, ketika browser menyiapkan halaman untuk ditampilkan kepada kita, browser membangun pohon objek yang terdiri dari semua elemen halaman berdasarkan struktur HTML-nya.

Setiap kali browser menerima dokumen HTML, browser harus mengubahnya menjadi struktur seperti pohon ini, yang kita sebut DOM atau pohon DOM. Kode JavaScript dapat mengakses DOM itu dan memodifikasinya.

Bagaimana ukuran DOM memengaruhi kinerja web Anda?

Yang benar adalah bahwa ukuran DOM memengaruhi kinerja halaman. DOM yang terlalu besar dapat memperlambat kecepatan Situs , karena memiliki dampak sebagai berikut:

• Efisiensi jaringan dan kinerja beban. Jika DOM terlalu besar, sering kali menyertakan elemen HTML yang tidak terlihat saat pertama kali pengguna memuat halaman, meningkatkan konsumsi data yang tidak perlu dan membuat situs memuat lebih lambat.
• Performa waktu berjalan. Saat pengguna dan skrip berinteraksi dengan halaman, browser harus terus menghitung ulang posisi dan gaya tag HTML.
• Kinerja memori . Jika pohon DOM terlalu besar, browser mungkin memerlukan lebih banyak memori untuk memprosesnya.

Bagaimana cara mengurangi ukuran DOM secara teknis?

Untuk memperkecil ukuran DOM agar tidak berdampak negatif terhadap kinerja web , Anda harus menghapus semua elemen HTML yang tidak diperlukan . Seperti yang telah kita lihat, jika kita tidak mengambil tindakan yang diperlukan, ada beberapa alasan mengapa hal itu akan memperlambat halaman.

Alih-alih menggunakan kode ini;

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

Akan lebih baik untuk menggunakan yang lain ini;

 <ul id = ”navigation-main”>   etc .. </ul>

Mengenai struktur pohon, kita perlu mengetahui istilah-istilah berikut:

• Node : Semua elemen HTML dari DOM. Mereka juga dikenal sebagai 'daun' pohon.
• Node Sekunder : Node yang tidak memiliki cabang lagi.

Yang mengatakan, hal terbaik adalah bahwa kedalaman pohon dibentuk oleh :

• Kurang dari 32 node.
• Kurang dari 60 node sekunder per setiap node.

Google merekomendasikan bahwa ketika mengembangkan Situs Web, halaman berisi kurang dari 1.500 node DOM , yang berarti bahwa desainnya tidak boleh terlalu rumit.

Cara mengurangi ukuran DOM di WordPress

Ada beberapa cara untuk memperkecil ukuran DOM di WordPress:

Segmentasikan halaman besar menjadi beberapa halaman

Apakah Anda memiliki satu halaman yang menampilkan berbagai jenis konten situs Anda? Misalnya, formulir kontak, posting blog, produk, dll.

Dalam hal ini, lebih baik untuk mengklasifikasikan semua elemen tersebut di halaman yang berbeda dan menautkannya melalui bilah navigasi.

Aktifkan plugin pemuatan malas dan bagi semua elemen yang mungkin menjadi halaman

Anda dapat mengaktifkan modul lazy loading di semua elemen yang mengizinkannya. Anda dapat melakukan ini dengan video dari YouTube, menggunakan Youtube Lite atau Lazy Load dari WordPress WP-Rocket.

Hal ini juga penting untuk membatasi jumlah posting per halaman blog . Jumlah maksimum posting yang masuk akal adalah 10 per halaman. Praktik ini juga berlaku untuk jumlah produk yang harus muncul di setiap halaman.

Ada opsi untuk mengubah jumlah posting per halaman. Buka Menu Pengaturan > Submenu Bacaan, ubah tampilan Halaman Blog paling banyak nilainya dan Simpan Perubahan .

Kami juga merekomendasikan untuk membatasi jumlah publikasi terkait hingga jumlah maksimum tiga atau empat.

Hapus item yang tidak perlu termasuk dalam tema WP default

Dalam beberapa kasus, mungkin perlu untuk menghapus elemen tertentu yang disertakan dengan tema WordPress Anda secara default , seperti tombol “Tambahkan ke Keranjang” pada halaman produk, tanggal publikasi, informasi penulis, dll.

Periksa konfigurasi tema WordPress untuk melihat apakah ada opsi untuk menghapus elemen tersebut, dan jika tidak, cari kode PHP yang sesuai untuk menghapusnya.

Gunakan tema atau pembuat halaman yang dikodekan dengan baik

Kualitas tema WordPress secara langsung memengaruhi ukuran DOM. Oleh karena itu, disarankan untuk menggunakan tema yang dikodekan dengan baik, seperti Astra atau GeneratePress.

Pembuat halaman juga sering memasukkan terlalu banyak tag div, jadi penting untuk menggunakan solusi seperti Oxygen Builders, yang tidak menyuntikkan elemen yang tidak diinginkan dan memungkinkan kontrol lebih besar atas struktur HTML.

Alat seperti HotJar memungkinkan Anda melihat apa yang digunakan pengguna dan apa yang tidak berfungsi untuk mereka. Menjalankan analisis yang cermat sangat penting untuk mendapatkan ukuran DOM yang tepat.

Pikiran Akhir

Ukuran Dom yang berlebihan merusak kinerja web Anda, memperlambat waktu buka halaman. Jaga agar struktur HTML Anda tetap sederhana tanpa elemen yang tidak perlu . Periksa pohon DOM Anda dan singkirkan simpul yang tidak menambah nilai ke situs Anda. Anda tidak hanya akan mempercepat Situs Web Anda, tetapi Anda juga akan menawarkan UX yang lebih baik.

Google pasti akan mempertimbangkan ukuran DOM dalam pembaruan Pengalaman Halaman yang akan dirilis dalam beberapa bulan mendatang. Pastikan untuk memiliki yang memadai, sehingga tidak mempengaruhi kinerja web Anda.