Di bagian ketiga dari seri “Peningkatan Kinerja” saya, Anda akan mempelajari cara membuat proyek web Anda lebih efisien dan cepat dengan mengoptimalkan DOM.
Batasi jumlah elemen HTML
Pohon DOM yang besar dapat memperlambat kinerja situs web Anda. Anda harus membatasi jumlah node HTML sebanyak yang Anda bisa. Saat memuat halaman — dalam dunia yang sempurna — hanya node yang terlihat oleh pengguna yang harus ditampilkan. Konten yang hanya muncul setelah di-scroll atau mis. modals yang hanya terbuka setelah interaksi baru kemudian diintegrasikan ke dalam DOM. Anda juga harus menghapus node yang telah digunakan tetapi tidak diperlukan lagi.
Saat menggunakan Bootstrap dengan flexbox Anda secara otomatis memiliki struktur DOM yang lebih dalam dibandingkan saat menggunakan grid. Anda dapat sepenuhnya menghilangkan level elemen baris di sini dan Anda dapat mengontrol tata letak dengan menangani wadah induk:
/* Using Bootstrap with flexbox */
<div class="container">
<div class="row">
<div class="gr-4">...</div>
<div class="gr-8">...</div>
</div>
<div class="row">
<div class="gr-4">...</div>
<div class="gr-8">...</div>
</div>
</div>
/* Using grid without Bootstrap */
<div class="container">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
IntersectionObserver untuk menyelamatkan
Anda dapat menggunakan API IntersectionObserver untuk mendeteksi kapan dan di mana pengguna men-scroll, sehingga Anda dapat memuat konten dengan lambat. Lihat beberapa contoh gambar dan komponen pemuatan lambat di bagian pemuatan lambat di bagian pertama dari seri Peningkatan Kinerja saya.
Ukuran transfer lebih rendah
Jika Anda menggunakan lebih sedikit elemen DOM, ukuran transfer data juga akan berkurang, yang khususnya akan menyenangkan pengguna perangkat seluler.
Pada saat yang sama, lalu lintas dan beban pada server berkurang, yang juga memberikan keuntungan bagi lingkungan kita. Selain itu, server lebih mudah mengirimkan situs web lebih cepat ketika bebannya rendah.
Performa waktu proses dan kinerja memori
DOM yang besar dengan banyak aturan CSS yang rumit dapat memperlambat rendering halaman Anda.
Jika Anda memiliki ukuran DOM yang berlebihan dan menggunakan pemilih kueri umum seperti document.querySelectorAll('div'), Anda dapat menyimpan referensi ke node dalam jumlah besar, yang dapat membuat memori perangkat pengguna Anda berkurang.
Hindari memperbarui node induk
Jika Anda memanipulasi properti CSS dari node induk menggunakan JavaScript, hal ini dapat mengakibatkan semua elemen turunan juga harus dirender ulang. Oleh karena itu, usahakan selalu untuk mengatasi unsur langsungnya. Hal ini akan menyebabkan penghitungan ulang paling sedikit.
Kirimkan HTML statis
Biarkan sisi server membuat HTML Anda untuk jalur rendering penting terlebih dahulu. Jika memungkinkan, HTML tidak boleh dibuat oleh bahasa server saat dipanggil. Sebaliknya, bahasa skrip server harus digunakan untuk menyimpan dan menyimpan HTML yang sudah di-cache sebagai file. Ini menghemat biaya overhead (misalnya koneksi database) untuk merakit halaman terlebih dahulu ketika pengguna tiba di situs web Anda.
Struktur dasar situs web statis HTML — terkadang hanya itu yang Anda perlukan untuk jalur rendering penting — dapat terlihat seperti ini:
<html>
<head>...</head>
<body>
<div class="wrap">
<header class="header">
<img class="header--logo" src="logo.svg" alt="Logo">
<nav class="header--nav">
<ul>
<li><a href="">Home</a></li>
...
</ul>
</nav>
</header>
<section class="content">
<h1>Welcome</h1>
<p>Teaser Text</p>
</section>
<!-- insert dynamic content here -->
<footer class="footer">...</footer>
</div>
</body>
</html>
Untuk menambahkan konten tambahan ke DOM yang tidak mempengaruhi jalur render kritis, ada beberapa metode yang diikuti sekarang…
Fasad
Pemuatan lambat dengan fasad berarti penundaan pemuatan komponen pihak ketiga, dengan HTML statis atau gambar dimuat terlebih dahulu, yang kemudian hanya diganti dengan komponen yang benar saat pengguna berinteraksi. Hal ini menghemat pemuatan data eksternal yang tidak perlu, sebagian besar JavaScript, yang kinerjanya sering kali tidak dapat kami optimalkan.
Menurut Google, fasad harus ditambahkan ke DOM selama acara onload situs web, dengan gerakan mouse, fasad tersebut kemudian dapat dihubungkan ke sumber daya pihak ketiga dan hanya dengan satu klik fasad tersebut ditukar dengan konten pihak ketiga.
Kegunaan yang baik untuk fasad adalah mis. Google Maps, widget kalender, atau pemutar video mis. dari YouTube atau Vimeo.
Bayangan DOM
Jadi, sekarang mari kita masuk ke sisi gelap DOM…
Shadow DOM digunakan untuk membuat elemen HTML khusus — dikenal sebagai komponen web — yang dilampirkan ke DOM melalui shadow root. Beberapa manipulasi DOM (menambahkan atau menghapus node HTML) dapat menyebabkan perubahan posisi dan pengecatan ulang tata letak, yang dapat berdampak negatif pada pengalaman pengguna. Manipulasi dalam shadow DOM tidak mempengaruhi DOM dan oleh karena itu tidak menyebabkan pengecatan ulang atau perubahan posisi, yang dapat mempercepat rendering ulang.
Dalam contoh berikut, Anda dapat melihat bagaimana style sheet eksternal ditambahkan ke shadow DOM. Demikian pula, elemen HTML lainnya dapat dibuat di shadow DOM.
// Create an external stylesheet
const style = document.createElement("link");
style.setAttribute("rel", "stylesheet");
style.setAttribute("href", "style.css");
// Create the shadow root
const shadow = this.attachShadow({ mode: "open" });
// Attach the created stylesheet to the shadow DOM
shadow.appendChild(style);
Baca selengkapnya tentang shadow DOM di bagian “Tautan berguna” di bawah.
Fragmen Dokumen
Dengan antarmuka JavaScript DocumentFragment, node DOM dapat dibuat dan kemudian ditambahkan ke DOM aktif.
Mirip dengan shadow DOM, perubahan pada DocumentFragment tidak memengaruhi DOM lainnya dan tidak menurunkan performa.
// Create a list of fruits
let fruits = ['Apple', 'Banana', 'Cherry', 'Pineapple'];
// Grab a empty <ul> element with the id #fruits existing in your HTML
let fruitsUl = document.querySelector('#fruits');
// Create a document fragment
let fragment = new DocumentFragment();
// Append content to the fragment
fruits.forEach((fruit) => {
let li = document.createElement('li');
li.innerHTML = fruit;
fragment.appendChild(li);
});
// Append the fragment to your <ul>
fruitsUl.appendChild(fragment);
DOM Virtual — Hidrasi
Hidrasi adalah teknologi yang menghadirkan HTML statis terlebih dahulu, kemudian menambahkan interaksi ke elemen dengan membuat apa yang disebut DOM Virtual. Dalam kasus hidrasi parsial, tidak semua elemen terhidrasi, tetapi hanya elemen yang memiliki perilaku interaktif. Di sini Anda mendapatkan manfaat dari rendering sisi server untuk meningkatkan First Input Delay (FID) pengukuran Google.
Pilihan lainnya adalah hidrasi progresif, di mana masing-masing komponen dimuat kemudian segera setelah terlihat di layar.
Hidrasi digunakan khususnya untuk aplikasi satu halaman. Kerangka kerja seperti React atau NextJS menggunakan hidrasi.
Tautan yang bermanfaat
Hindari ukuran DOM yang berlebihan
Pemuatan lambat dengan fasad
Bayangan DOM
Fragmen Dokumen
Hidrasi
Video wawasan kinerja
Apa berikutnya?
Di bagian mendatang dari seri peningkatan kinerja saya, saya akan fokus pada pengoptimalan server Anda dan kecepatan halaman JavaScript.
Pantau terus…
