id.allworldrating.com
Artikel

Cara Mengurangi Ukuran DOM di WordPress

Atau di GTmetrix "Kurangi jumlah elemen DOM":

Apa itu DOM?

Ketika browser Anda menerima dokumen HTML, itu harus diubah menjadi struktur pohon, yang digunakan untuk rendering dan menggambar dengan CSS dan JavaScript.

Struktur pohon ini disebut DOM atau Model Objek Dokumen.

  • simpul Semua elemen HTML di DOM disebut node. (alias "daun" di pohon).
  • Kedalaman – Berapa lama “cabang” masuk ke dalam pohon disebut kedalaman. Misalnya, pada diagram di atas, tag img memiliki kedalaman 3. (HTML -> body -> div -> img).
  • elemen anak – semua node anak dari sebuah node (tanpa percabangan lebih lanjut) adalah anak-anak.

Lighthouse dan Google PageSpeed ​​​​Insights mulai menandai halaman jika salah satu dari kondisi berikut terpenuhi:

  • Total memiliki lebih dari 1500 node.
  • Memiliki kedalaman lebih dari 32 knot.
  • Node induk memiliki lebih dari 60 node anak.

Bagaimana ukuran DOM memengaruhi kinerja?

Ukuran DOM yang berlebihan dapat memengaruhi kinerja dengan cara yang berbeda.

  • Waktu Parse dan Render (FCP) yang Lebih Tinggi . Pohon DOM besar dan aturan gaya kompleks melakukan pekerjaan yang bagus untuk browser. Browser harus mengurai HTML, membangun pohon render, dll. Setiap kali pengguna berinteraksi atau sesuatu dalam HTML berubah, browser harus menghitungnya lagi.
  • Meningkatkan penggunaan memori - Kode JavaScript Anda mungkin memiliki fungsi untuk mengakses elemen DOM. Pohon DOM yang lebih besar memaksa JavaScript menggunakan lebih banyak memori untuk memprosesnya. Contohnya adalah pemilih kueri, didocument.querySelectorAll('img')yang mencantumkan semua gambar yang biasa digunakan oleh pustaka yang memuat lambat.
  • Meningkatkan TTFB – Saat ukuran DOM meningkat, ukuran dokumen HTML meningkat (dalam KB). Karena lebih banyak data perlu ditransfer melalui jaringan, ini meningkatkan TTFB.

Bagaimana cara mengurangi ukuran DOM secara teknis?

Misalnya, secara teknis mudah untuk mengurangi ukuran DOM:

penggunaan:

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

dari pada:

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

Pada dasarnya, singkirkan semua elemen HTML yang mungkin. Anda juga dapat menggunakan Flexbox atau Grid untuk lebih mengurangi ukuran DOM.

Tetapi karena Anda menggunakan WordPress, ini tidak akan banyak membantu Anda!

Bagaimana cara mengurangi ukuran DOM di WordPress?

Bagi halaman besar menjadi beberapa halaman

Apakah Anda memiliki halaman dengan semua yang ada di situs? Seperti layanan, formulir kontak, produk, posting blog, testimonial, dll?

Coba bagi menjadi beberapa halaman dan tautkan dari header/navbar.

Pemuatan malas dan pagination dari segala kemungkinan

Pemuatan malas dari semua jenis elemen. Berikut beberapa contohnya:

  • Pemuatan lambat video YouTube - Gunakan WP YouTube Lyte atau Lazy Load oleh WP Rocket.
  • Batasi jumlah posting blog/produk per halaman – Saya biasanya mencoba untuk menyimpan maksimal 10 posting blog per halaman dan membuat paginasi sisanya.
  • Malas memuat posting/produk blog – Tambahkan tombol Muat Lebih Banyak atau gulir tak terbatas untuk memuat lebih banyak posting blog atau produk.
  • Malas memuat komentar - Saya menggunakan pemuatan bersyarat Disqus karena saya menggunakan Disqus . Jika Anda menggunakan komentar Anda sendiri, gunakan plugin seperti Lazy Load for Comments .
  • Paginasi komentar - jika Anda memiliki ratusan komentar, ini juga dapat memengaruhi ukuran DOM. Untuk memberi paginasi komentar, buka Pengaturan -> Diskusi -> Memberi Komentar Paginasi.
  • Batasi jumlah posting terkait – Coba batasi jumlah posting terkait menjadi 3 atau 4.

Catatan: pemuatan gambar yang lambat tidak akan mengurangi ukuran DOM

Jangan sembunyikan elemen yang tidak diinginkan dengan CSS

Terkadang Anda mungkin perlu menghapus elemen yang diperkenalkan oleh tema/desainer. Misalnya, tambahkan tombol ke keranjang di halaman produk, tombol nilai, informasi penulis, tanggal publikasi, dll.

Perbaikan cepat adalah menyembunyikannya dengan CSS:

.cart-button {tampilan: tidak ada;}

Meskipun solusi ini terlihat sederhana, Anda mengekspos pengguna ke kode yang tidak diinginkan (yang mencakup markup HTML dan gaya CSS).

Periksa pengaturan tema/plugin Anda untuk melihat apakah ada opsi untuk menghapusnya. Jika tidak, temukan kode PHP yang relevan dan hapus/komentari.

Gunakan tema dan pembuat halaman yang ditulis dengan baik

Tema yang baik memainkan peran penting dalam ukuran DOM. Gunakan tema yang ditulis dengan baik sepertiHasilkanTekan atauAstra .

Pembuat halaman juga memperkenalkan terlalu banyak div. Gunakan konstruktor sepertioksigen, yang tidak memperkenalkan blok div yang tidak diinginkan dan memiliki kontrol lebih besar atas struktur HTML.

Kesimpulan

Mungkin ada lebih banyak plugin atau pengaturan tema yang memperkenalkan terlalu banyak div. Contohnya adalah plugin "menu mega" seperti UberMenu.

Terkadang mereka sangat penting untuk pengalaman pengguna situs Anda. Namun terkadang mereka tidak pernah digunakan oleh pengguna.

Mungkin tautan footer Anda tidak pernah diklik karena kebanyakan pengunjung hanya menggulir hingga 75%.

Gunakan alat seperti HotJar atau Google Analytics Events untuk mengetahui apa yang sebenarnya digunakan pengunjung dan apa yang tidak digunakan.Analisis, ukur, dan ulangi.

Artikel Menarik