“Hindari Ukuran DOM yang Berlebihan” di WordPress
Sejujurnya, ini mungkin cara terbaik untuk memeriksanya, karena ini berkaitan langsung dengan peringatan tersebut. Namun, ada cara lain untuk mengukur ukuran DOM menggunakan kode. Ada juga jawaban atas pertanyaan tentang Stack Overflow yang menggunakan JavaScript untuk menghitung semua node:
function countNodes(element = document.body) {
let count = 0; let child = element.firstElementChild;
while (child) { count += countNodes(child);
if (child.shadowRoot) { count += countNodes(child.shadowRoot); }
child = child.nextElementSibling; count++;
} return count;
}
Code language: JavaScript (javascript)Bagaimana pun Anda menghitung node dan elemen, setelah Anda mengurangi ukuran DOM, Anda akan mencapai performa dan UX yang lebih baik. Saran kami adalah tetap menggunakan penghitungan di Google Lighthouse kecuali Anda perlu membuat kode solusi khusus untuk kebutuhan Anda sendiri.
Cara mengatasi peringatan “Hindari ukuran DOM yang berlebihan”.
Pada sisa artikel ini, kita akan mencari cara untuk menghilangkan peringatan ‘Hindari ukuran DOM yang berlebihan’ untuk selamanya. Sebagian besar solusi tersebut merupakan solusi praktis dan non-teknis. Namun, dokumentasi Lighthouse milik Google memiliki beberapa tip untuk pengaturan khusus tumpukan jika Anda membutuhkannya.
- Pilih tema dan plugin dengan basis kode yang bagus
- Gunakan Optimole untuk mengoptimalkan gambar dan menerapkan pemuatan lambat
- Terapkan penomoran halaman atau pengguliran tak terbatas
- Gunakan konsep minimalis untuk mengurangi elemen situs Anda
1. Pilih tema dan plugin dengan basis kode yang baik
Fondasi yang baik untuk situs Anda adalah menggunakan tema dan plugin yang memiliki basis kode yang bersih dan menggunakan teknik pengkodean modern. Kumpulan alat sering kali berfungsi dengan baik di sini, karena Anda dapat memilih dari daftar pilihan. Namun, jika Anda memerlukan plugin yang tidak ada dalam salah satu daftar ini, Anda dapat menggunakan daftar periksa berikut untuk menemukannya:
Anda juga sebaiknya mengikuti pedoman umum untuk memilih produk WordPress. Ini termasuk peringkat dan ulasan yang bagus, serta pembaruan rutin dalam enam bulan terakhir. Selain itu, biasanya Anda ingin menghindari tema dan plugin nulled.
2. Gunakan Optimole untuk mengoptimalkan gambar dan menerapkan pemuatan lambat
Pemuatan lambat adalah cara terbaik tidak hanya untuk meningkatkan UX Anda, tetapi juga meningkatkan kinerja situs Anda. Selain itu, karena teknologi ini menghambat pemuatan elemen lain, pohon DOM Anda akan lebih bersih. Meskipun ada banyak cara untuk melakukan ini, plugin Optimole adalah pilihan yang sempurna:
Ini memberi Anda seperangkat alat untuk membantu mengoptimalkan aspek situs Anda. Misalnya, ia memanfaatkan cloud untuk mendistribusikan media melalui jaringan pengiriman konten (CDN) CloudFront Amazon. Hal ini akan mengurangi waktu pemuatan, yang akan berdampak langsung pada Data Web Inti Anda yang lain.
Namun, versi gratis dan premium menawarkan pengoptimalan gambar yang khas dan fungsionalitas pemuatan lambat. Yang terbaik dari semuanya, Anda dapat menerapkannya dengan satu klik dari dashboard WordPress:
Meskipun Anda dapat tetap menggunakan fungsionalitas sekali klik, pemuatan lambat khususnya memiliki banyak opsi lain untuk disesuaikan:
Ini berarti Anda dapat ‘mengoptimalkan’ pemuatan lambat Anda (tidak ada kata-kata yang dimaksudkan) sesuai dengan kebutuhan situs Anda.
Penomoran halaman dan pengguliran tak terbatas berkaitan erat dengan pemuatan lambat. Berikut ringkasan singkat tentang apa yang dapat dicapai keduanya:
- Paginasi. Di sinilah Anda memecah konten Anda menjadi bagian-bagian yang lebih kecil dan memuatnya di beberapa halaman. Ini adalah metode ‘brute force’ untuk mengurangi jumlah elemen di pohon DOM. Jika Anda menghapus beberapa konten dari halaman Anda, konten yang dimuat akan lebih sedikit.
- Pengguliran tanpa batas. Di sini, situs Anda pada dasarnya tidak memiliki footer. Sebaliknya, konten akan dimuat selama pengguna terus menggulir. Walaupun hal ini rumit dan bersifat teknis, teknologi ini memungkinkan Anda ‘membongkar’ elemen di luar kanvas. Ini hampir merupakan sisi lain dari pemuatan yang lambat, dan keduanya bersama-sama dapat bekerja dengan baik.
Menambahkan ini ke situs Anda bisa menjadi pekerjaan bagi pengembang. Namun, tema WordPress seperti Neve dapat melakukan keduanya.
Anda dapat menemukan penomoran halaman dan gulir tak terbatas di dalamnya Tata Letak → Arsip Blog → Pemesanan dan Konten layar:
Kami memiliki tutorial lengkap tentang cara mencapai hal ini di situs saudara kami, Themeisle.
Anda juga dapat menggunakan plugin seperti WP-PageNavi jika Anda ingin kontrol lebih besar atas penomoran halaman dan pengguliran pada halaman individual. Namun, implementasi di seluruh situs dapat dilakukan dengan tema yang tepat.
4. Gunakan konsep minimalis untuk mengurangi elemen situs Anda
Memilih untuk menggunakan konsep minimalis di situs Anda bukan hanya soal estetika – tetapi juga akan meningkatkan kinerja Anda. Meskipun kami tidak akan membahas cara menerapkan gaya minimalis pada situs Anda di sini, ada tiga bidang utama yang perlu dipikirkan:
- Batasi jumlah elemen pada halaman. Ini adalah kemenangan yang jelas dan mudah karena semakin sedikit elemen yang ada di laman, semakin ‘langsing’ pohon DOM Anda.
- Minimalkan elemen tata letak yang mewah. Seperti halnya elemen HTML, menggunakan skrip, CSS, dan lainnya untuk menambahkan fungsionalitas ke halaman Anda akan meningkatkan jumlah node di pohon DOM Anda. Anda sebaiknya hanya menggunakan ‘berkembang’ jika diperlukan untuk UX. Selain itu, menyembunyikan elemen menggunakan
display:none;sering kali bukan merupakan ide yang baik. Hal ini tidak akan menghentikan pemuatan elemen tersebut, yang berarti elemen tersebut akan berada di pohon DOM dan menggunakan sumber daya sistem. - Gunakan navigasi situs yang mudah. Breadcrumb, menu mega, dan bentuk navigasi lanjutan lainnya memang bagus, tetapi juga dapat menambah jumlah elemen pada halaman. Jika memungkinkan, gunakan jenis navigasi yang mudah. Manfaat tambahannya adalah pengunjung Anda akan dapat melintasi situs Anda lebih cepat, tanpa tersesat.
Selama Anda tetap mengingat konsep inti, Anda seharusnya dapat mengurangi jumlah elemen yang Anda sajikan, dan juga menghapus peringatan ‘Hindari ukuran DOM yang berlebihan’.
Perbaiki pesan “Hindari ukuran DOM yang berlebihan” untuk selamanya 🎯
Semua elemen HTML di situs Anda disusun ke dalam pohon DOM. Ini adalah cara Anda menavigasi tag dalam solusi seperti Chrome DevTools. Namun, terlalu banyak elemen – terutama elemen yang bertumpuk atau memiliki elemen turunan – akan memengaruhi performa Anda. Dalam situasi ini, Google Lighthouse akan menampilkan peringatan ‘Hindari ukuran DOM yang berlebihan’ di file Anda Pertunjukan laporan. Mengurangi hal ini dapat mempercepat situs Anda dan meningkatkan pengalaman pengunjung Anda.
Untuk memperkecil ukuran DOM, Anda dapat memilih tema dan plugin yang menggunakan basis kode inti yang baik, seperti Neve dan Optimole. Omong-omong, yang terakhir dapat membantu Anda menerapkan pemuatan lambat – penting untuk mengurangi jumlah node dalam pohon DOM. Anda juga dapat menerapkan solusi pengguliran tak terbatas atau penomoran halaman jika situasinya memerlukannya. Secara keseluruhan, jika Anda meminimalkan elemen tata letak dan menerapkan pilihan yang baik pada tema dan plugin yang Anda gunakan, hal ini akan memperbaiki pesan “Hindari ukuran DOM yang berlebihan”.
Apakah Anda perlu memperbaiki peringatan ‘Hindari ukuran DOM yang berlebihan’ di Google Lighthouse? Jika demikian, bagikan situasi Anda dengan kami di bagian komentar di bawah!
