ms.allworldrating.com
Artikel

Cara Mengurangkan Saiz DOM dalam WordPress

Atau dalam GTmetrix "Kurangkan bilangan elemen DOM":

Apakah DOM?

Apabila penyemak imbas anda menerima dokumen HTML, ia mesti ditukar kepada struktur pepohon, yang digunakan untuk pemaparan dan lukisan dengan CSS dan JavaScript.

Struktur pokok ini dipanggil DOM atau Model Objek Dokumen.

  • Simpulan Semua elemen HTML dalam DOM dipanggil nod. (aka "daun" pada pokok).
  • Kedalaman – Berapa lama “cabang” masuk dalam pokok dipanggil kedalaman. Contohnya, dalam rajah di atas, teg img mempunyai kedalaman 3. (HTML -> body -> div -> img).
  • Elemen kanak-kanak – semua nod anak nod (tanpa percabangan lanjut) adalah anak.

Lighthouse dan Google PageSpeed ​​​​Insights mula membenderakan halaman jika salah satu daripada syarat berikut dipenuhi:

  • Jumlah untuk mempunyai lebih daripada 1500 nod.
  • Mempunyai kedalaman lebih daripada 32 knot.
  • Nod induk mempunyai lebih daripada 60 nod anak.

Bagaimanakah saiz DOM mempengaruhi prestasi?

Saiz DOM yang berlebihan boleh menjejaskan prestasi dalam cara yang berbeza.

  • Masa Parse dan Render (FCP) Lebih Tinggi . Pokok DOM yang besar dan peraturan gaya yang kompleks melakukan kerja yang bagus untuk penyemak imbas. Pelayar perlu menghuraikan HTML, membina pepohon pemaparan, dsb. Setiap kali pengguna berinteraksi atau sesuatu dalam HTML berubah, pelayar perlu mengiranya semula.
  • Meningkatkan penggunaan memori - Kod JavaScript anda mungkin mempunyai fungsi untuk mengakses elemen DOM. Pokok DOM yang lebih besar memaksa JavaScript menggunakan lebih banyak memori untuk memprosesnya. Contohnya ialah pemilih pertanyaan, dalamdocument.querySelectorAll('img')yang menyenaraikan semua imej yang biasa digunakan oleh perpustakaan malas memuatkan.
  • Meningkatkan TTFB – Apabila saiz DOM bertambah, saiz dokumen HTML bertambah (dalam KB). Memandangkan lebih banyak data perlu dipindahkan melalui rangkaian, ini meningkatkan TTFB.

Bagaimana untuk mengurangkan saiz DOM secara teknikal?

Sebagai contoh, secara teknikalnya mudah untuk mengurangkan saiz DOM:

penggunaan:

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

bukannya:

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

Pada asasnya, buang semua elemen HTML yang mungkin. Anda juga boleh menggunakan Flexbox atau Grid untuk mengurangkan lagi saiz DOM.

Tetapi kerana anda menggunakan WordPress, ini tidak banyak membantu anda!

Bagaimana untuk mengurangkan saiz DOM dalam WordPress?

Pisahkan halaman besar kepada beberapa halaman

Adakah anda mempunyai halaman dengan segala-galanya di tapak? Seperti perkhidmatan, borang hubungan, produk, catatan blog, testimoni, dsb.?

Cuba bahagikannya kepada beberapa halaman dan pautkannya daripada pengepala/bar navigasi.

Pemuatan malas dan penomboran semua yang mungkin

Malas memuatkan semua jenis elemen. Berikut adalah beberapa contoh:

  • Video YouTube malas memuatkan - Gunakan WP YouTube Lyte atau Lazy Load oleh WP Rocket.
  • Hadkan bilangan catatan blog/produk setiap halaman – Saya biasanya cuba menyimpan maksimum 10 catatan blog setiap halaman dan menomborkan selebihnya.
  • Malas memuatkan catatan/produk blog – Tambah butang Muatkan Lagi atau tatal tak terhingga untuk memuatkan lebih banyak catatan atau produk blog.
  • Malas memuatkan komen - Saya menggunakan pemuatan bersyarat Disqus kerana saya menggunakan Disqus . Jika anda menggunakan ulasan anda sendiri, gunakan pemalam seperti Lazy Load for Comments .
  • Penomboran komen - jika anda mempunyai beratus-ratus ulasan, ini juga boleh menjejaskan saiz DOM. Untuk menomborkan komen, pergi ke Tetapan -> Perbincangan -> Halaman Komen.
  • Hadkan bilangan jawatan yang berkaitan – Cuba hadkan bilangan siaran berkaitan kepada 3 atau 4.

Nota: malas memuatkan imej tidak akan mengurangkan saiz DOM

Jangan sembunyikan elemen yang tidak diingini dengan CSS

Kadangkala anda mungkin perlu mengalih keluar elemen yang diperkenalkan oleh tema/pereka bentuk. Contohnya, tambahkan butang pada troli pada halaman produk, butang kadar, maklumat pengarang, tarikh penerbitan, dsb.

Penyelesaian pantas ialah menyembunyikannya dengan CSS:

butang .cart {display:none;}

Walaupun penyelesaian ini kelihatan mudah, anda mendedahkan pengguna kepada kod yang tidak diingini (yang termasuk penanda HTML dan penggayaan CSS).

Semak tetapan tema/pemalam anda untuk melihat sama ada terdapat pilihan untuk mengalih keluarnya. Jika tidak, cari kod PHP yang berkaitan dan alih keluar/komennya.

Gunakan tema dan pembina halaman yang ditulis dengan baik

Tema yang baik memainkan peranan penting dalam saiz DOM. Gunakan tema yang ditulis dengan baik sepertiGeneratePress atauAstra .

Pembina halaman juga memperkenalkan terlalu banyak div. Gunakan pembina sepertioksigen, yang tidak memperkenalkan blok div yang tidak diingini dan mempunyai lebih kawalan ke atas struktur HTML.

Kesimpulan

Mungkin terdapat lebih banyak pemalam atau tetapan tema yang memperkenalkan terlalu banyak div. Contohnya ialah pemalam "menu mega" seperti UberMenu.

Kadangkala ia penting kepada pengalaman pengguna tapak anda. Tetapi kadangkala ia tidak pernah digunakan oleh pengguna.

Mungkin pautan pengaki anda tidak pernah diklik kerana kebanyakan pelawat hanya menatal sehingga 75%.

Gunakan alatan seperti HotJar atau Google Analytics Events untuk mengetahui perkara yang sebenarnya digunakan oleh pelawat dan perkara yang tidak mereka gunakan.Analisis, ukur dan ulangi.

Artikel Yang Menarik