Optimasi website pada server linux terbaik adalah salah satu aspek penting dalam pengembangan web modern. Salah satu teknik optimasi yang sering digunakan adalah defer pada JavaScript. Teknik ini membantu meningkatkan kecepatan pemuatan halaman dan pengalaman pengguna dengan menunda eksekusi skrip hingga setelah halaman dimuat sepenuhnya.
Apa Itu Defer dalam JavaScript?
defer adalah atribut yang dapat ditambahkan ke dalam elemen <script> dalam HTML. Fungsinya adalah untuk menunda eksekusi skrip sampai seluruh halaman HTML selesai di-parse oleh browser. Dengan cara ini, proses rendering halaman tidak terhambat oleh eksekusi skrip JavaScript.
Contoh Penggunaan Defer
Tanpa defer, browser akan mengeksekusi skrip segera setelah menemukannya, yang bisa menyebabkan pemuatan halaman menjadi lebih lambat:
<script src="script.js"></script>Dengan defer, browser akan menunda eksekusi hingga setelah seluruh dokumen HTML selesai diproses:
<script src="script.js" defer></script>Perbedaan defer dan async
Selain defer pada javascript, terdapat atribut async yang juga berfungsi untuk mengontrol eksekusi JavaScript. Berikut adalah perbedaannya:
| Atribut | Waktu Eksekusi | Urutan Eksekusi |
async | Segera setelah diunduh | Tidak berurutan |
defer | Setelah HTML selesai di-parse | Berurutan |
Jika urutan eksekusi skrip penting, maka defer adalah pilihan yang lebih baik dibandingkan async.
Manfaat Menggunakan Defer
- Meningkatkan Kecepatan Pemuatan Halaman
- HTML dapat diproses tanpa terhambat oleh eksekusi JavaScript.
- Menghindari Kesalahan DOM Tidak Ditemukan
- Karena JavaScript baru dieksekusi setelah seluruh dokumen selesai dimuat, elemen DOM sudah tersedia.
- Mempertahankan Urutan Eksekusi
- Jika ada beberapa skrip dengan
defer, mereka akan dieksekusi dalam urutan yang muncul di HTML.
- Jika ada beberapa skrip dengan
Kesimpulan
Menggunakan defer pada JavaScript adalah salah satu cara efektif untuk mengoptimalkan performa website. Dengan memastikan bahwa skrip tidak menghambat rendering halaman, pengalaman pengguna dapat ditingkatkan secara signifikan. Pastikan untuk selalu mempertimbangkan apakah skrip memerlukan defer atau async sesuai dengan kebutuhan website Anda.
