Perbedaan Async dan Defer: Definisi, Manfaat & Cara Pakai

Perbedaan Async dan Defer: Definisi, Manfaat & Cara Pakai

Website Anda sudah dioptimasi dari berbagai sisi — gambar dikompresi, hosting dipilih yang cepat, CSS sudah diminifikasi. Tapi skor Lighthouse masih stagnan. First Contentful Paint lambat, dan di bagian “Opportunities” muncul peringatan yang sama terus: render-blocking resources. Sumber masalahnya? Seringkali adalah tag <script> biasa yang belum diberi atribut apapun.

Di sinilah async dan defer masuk. Dua atribut ini sudah ada sejak lama di spesifikasi HTML — tapi banyak developer, termasuk yang berpengalaman, masih salah kaprah soal kapan harus pakai yang mana. Dan perbedaan itu, ternyata, cukup berdampak.

Point penting dalam artikel

Perbedaan Async dan Defer: Definisi, Manfaat & Cara Pakai

  • Atribut async mengunduh script secara paralel dan mengeksekusinya segera setelah unduhan selesai, tanpa menunggu HTML selesai di-parse.
  • Atribut defer juga mengunduh script secara paralel, tapi eksekusinya ditunda hingga seluruh parsing HTML selesai — urutan script tetap terjaga.
  • Perbedaan utama async vs defer ada di execution order: async tidak menjamin urutan, defer menjamin urutan sesuai posisi di HTML.
  • Script analitik dan iklan cocok menggunakan async; script yang bergantung pada DOM atau script lain harus menggunakan defer.
  • Penggunaan async dan defer yang tepat dapat memperbaiki metrik LCP, FCP, dan TBT pada Core Web Vitals, berdampak langsung pada kecepatan halaman.

Script yang Memblokir Render — Masalah yang Sering Diremehkan

Saat browser membaca HTML dari atas ke bawah dan menemukan tag <script src="file.js"></script>, ia berhenti. Parser HTML menunggu. JavaScript diunduh, lalu dieksekusi — baru setelah itu parsing HTML dilanjutkan.

Ini yang disebut render-blocking. Kalau script-nya besar, atau koneksi pengguna sedang lambat, efeknya langsung terasa: halaman terlihat kosong lebih lama dari seharusnya.

Solusi lama yang masih banyak dipakai adalah menaruh semua <script> di posisi paling bawah, tepat sebelum </body>. Ini memang lebih baik dari menaruhnya di dalam <head> — tapi bukan solusi terbaik yang tersedia. Dengan atribut async dan defer, unduhan script bisa berjalan paralel dengan parsing HTML, dan performa loading bisa membaik tanpa harus memindahkan posisi script.

Perbedaan Async dan Defer: Definisi, Manfaat &amp; Cara Pakai

Kalau Anda sedang mencari cara lain mempercepat halaman di luar manajemen script, artikel tentang cara mempercepat website WordPress tanpa plugin mungkin relevan sebagai bacaan lanjutan.

Apa Itu Atribut async?

Atribut async memberitahu browser untuk mengunduh script secara paralel dengan proses parsing HTML. Begitu unduhan selesai — kapanpun itu — script langsung dieksekusi. HTML parsing berhenti sebentar selama eksekusi berlangsung, lalu dilanjutkan.

Yang perlu diperhatikan: urutan eksekusi tidak terjamin. Kalau ada dua script dengan async, script mana yang selesai diunduh lebih dulu akan dieksekusi lebih dulu — terlepas dari urutan kemunculannya di HTML.

<head>
  <script async src="analytics.js"></script>
  <script async src="ads.js"></script>
</head>

Dua script di atas akan diunduh bersamaan. Mana yang selesai duluan, itu yang dieksekusi duluan. analytics.js bisa saja berjalan setelah ads.js — atau sebaliknya. Tidak ada yang mengatur.

Nah, ini bagian yang sering bikin masalah kalau tidak dipahami betul. Banyak developer mengira async itu “aman” untuk semua script. Ternyata tidak — ada kondisi tertentu di mana urutan eksekusi sangat penting.

Apa Itu Atribut defer?

defer bekerja mirip dengan async dalam hal pengunduhan paralel. Perbedaan utamanya ada di kapan eksekusi terjadi: script dengan defer tidak akan dieksekusi sampai seluruh parsing HTML selesai — tepat sebelum event DOMContentLoaded dipanggil.

<head>
  <script defer src="main.js"></script>
  <script defer src="plugin.js"></script>
</head>

Dengan setup di atas, main.js akan selalu dieksekusi sebelum plugin.js — sesuai urutan kemunculannya di HTML. DOM sudah tersedia saat keduanya berjalan. Ini penting kalau plugin.js bergantung pada sesuatu yang diinisialisasi oleh main.js.

Satu detail yang sering terlewat: defer hanya berlaku untuk script eksternal yang punya atribut src. Script inline tidak terpengaruh oleh defer. Ini jadi sumber kebingungan yang cukup umum, terutama saat bekerja dengan library JavaScript yang dimuat bersamaan dengan konfigurasi inline-nya.

“Script inline biasa memang tidak terpengaruh oleh defer. Namun perlu dicatat, jika Anda menggunakan JavaScript Modern dengan type=”module”, browser akan otomatis memperlakukannya seperti defer secara default.”

Perbedaan Async dan Defer yang Sering Disalahpahami

Secara teknis, perbedaan async dan defer bisa diringkas di tiga titik:

  • Waktu eksekusi: async mengeksekusi segera setelah unduhan selesai; defer menunggu HTML selesai di-parse baru berjalan.
  • Urutan eksekusi: async tidak menjamin urutan; defer menjaga urutan sesuai posisi di HTML.
  • Akses ke DOM: Script async tidak bisa dipastikan mendapat DOM yang sudah lengkap; script defer mendapat DOM yang sudah sepenuhnya siap.

Yang paling sering salah kaprah: developer mengira async lebih “cepat” dari defer sehingga selalu dipilih. Padahal bukan soal cepat-lambat. Soal kapan script itu aman untuk dieksekusi.

Script yang mengakses elemen DOM — misalnya document.getElementById(), event listener, atau manipulasi CSS via JavaScript — kalau diberi async, ada kemungkinan ia berjalan sebelum elemen yang dicarinya ada di halaman. Hasilnya: error diam-diam, atau fitur yang kelihatannya terpasang tapi tidak benar-benar berfungsi.

Saya pernah menangani website klien yang awalnya terlihat normal saat dicek sekilas. Halaman bisa dibuka, desain tampil rapi, dan tidak ada pesan error yang langsung terlihat oleh pengunjung.

Dimana masalahnya kemudian?

Masalah baru ketahuan setelah beberapa hari website berjalan.

Klien mengabari bahwa tombol menu di versi mobile kadang tidak bisa diklik, slider di halaman utama sesekali tidak muncul, dan form kontak pernah gagal dikirim walaupun tombol submit sudah ditekan.

artikel terkait

Setelah dicek, penyebabnya ternyata ada pada cara pemanggilan beberapa file JavaScript. Ada script jQuery dan library untuk slider yang diberi `async` dengan tujuan mempercepat loading halaman. Di atas kertas terlihat bagus, tetapi di lapangan justru membuat urutan loading menjadi tidak pasti.

Kadang file utama sudah siap lebih dulu, kadang file pendukungnya terlambat. Akibatnya, script yang mengatur tombol, slider, dan form berjalan sebelum library yang dibutuhkan benar-benar tersedia.

Cara mendeteksinya dimulai dari hal sederhana: membuka halaman berkali-kali dalam mode incognito, lalu mencoba fitur satu per satu, terutama di mobile view.

Setelah itu saya buka browser console dan menemukan error seperti `jQuery is not defined`, `slick is not a function`, atau fungsi form yang tidak dikenali. Error itu tidak selalu muncul setiap kali halaman dibuka, sehingga awalnya terlihat seperti bug kecil yang acak. Padahal sumber masalahnya cukup jelas: script penting dimuat dengan cara yang tidak tepat.

Script yang Memblokir Render — Masalah yang Sering Diremehkan

Solusinya, saya mencabut `async` dari jQuery dan library UI yang menjadi pondasi fitur halaman. File-file utama dibuat tetap mengikuti urutan yang benar, sementara optimasi hanya diterapkan pada script yang aman, seperti tracking, widget tambahan, atau script yang tidak memengaruhi tombol, menu, slider, dan form. Setelah perubahan itu, halaman diuji lagi beberapa kali dari desktop dan mobile. Hasilnya, tombol kembali responsif, slider tampil stabil, dan form bisa dikirim tanpa masalah.

Kalau Anda membutuhkan tim yang membangun website dengan fondasi teknis yang benar sejak awal — bukan sekadar website yang jadi — Budiharyono.id menyediakan layanan Jasa Pembuatan Website dengan pendekatan seperti ini: performa dan arsitektur teknis dipikirkan dari awal, bukan di-patch belakangan.

Kapan Pakai async, Kapan Pakai defer?

Ini pertanyaan praktis yang paling sering muncul. Jawabannya bertumpu pada satu pertanyaan sederhana: apakah script ini bergantung pada script lain atau pada DOM?

Gunakan async jika:

  • Script berdiri sendiri dan tidak bergantung pada script lain
  • Script tidak perlu mengakses atau memanipulasi DOM
  • Contoh paling umum: Google Analytics, Facebook Pixel, skrip iklan, A/B testing tools

Gunakan defer jika:

  • Script perlu mengakses elemen di DOM
  • Script bergantung pada script lain yang harus berjalan lebih dulu
  • Contoh: jQuery dan semua plugin jQuery, framework UI, slider, script interaktivitas halaman

Kalau masih ragu, defer lebih “aman” sebagai pilihan default untuk sebagian besar script aplikasi. async adalah pilihan eksplisit untuk script yang memang dirancang berjalan independen.

Konteks WordPress perlu diperhatikan tersendiri. Plugin caching dan optimasi sering punya opsi mengatur async/defer secara otomatis — tapi hasilnya tidak selalu tepat. Ada script tertentu yang akan rusak kalau diberi async, dan plugin tidak selalu tahu itu. Inilah salah satu alasan mengapa dalam layanan Jasa Pembuatan Web WordPress kami, audit loading behavior script selalu dilakukan secara manual setelah optimasi otomatis — karena otomatis itu bagus, tapi tidak selalu cukup.

Soal ekosistem plugin, ada baiknya Anda tahu plugin WordPress apa saja yang memang perlu dipasang — termasuk yang berkaitan dengan performa — agar tidak berlebihan memasang plugin yang justru menambah beban loading halaman.

Cara Pakai Async dan Defer — Sintaks dan Contoh Nyata

Sintaksnya sederhana. Tambahkan atribut di tag <script>:

<!-- Tanpa atribut — render-blocking -->
<script src="script.js"></script>

<!-- Dengan async -->
<script async src="analytics.js"></script>

<!-- Dengan defer -->
<script defer src="app.js"></script>

Untuk WordPress, cara yang lebih bersih adalah via filter script_loader_tag di functions.php tema atau plugin Anda:

function tambah_async_defer( $tag, $handle, $src ) {
    $async_scripts = array( 'google-analytics', 'fb-pixel' );
    $defer_scripts = array( 'main-app', 'slick-slider' );

    if ( in_array( $handle, $async_scripts ) ) {
        return preg_replace( '/(<script\b)(?![^>]*\basync\b)/', '$1 async', $tag );
    }

    if ( in_array( $handle, $defer_scripts ) ) {
        return preg_replace( '/(<script\b)(?![^>]*\bdefer\b)/', '$1 defer', $tag );
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'tambah_async_defer', 10, 3 );

Ada satu trade-off yang jarang disebutkan dalam tutorial optimasi: jangan berikan defer pada jQuery kalau ada script inline yang bergantung padanya. Script inline tidak mendukung defer — artinya script inline Anda akan berjalan sebelum jQuery tersedia. Hasilnya adalah error klasik yang sulit dilacak: $ is not defined.

Solusinya adalah memindahkan semua logika dari inline ke file eksternal, lalu berikan defer pada keduanya. Bukan cara yang instan, tapi cara yang benar.

Strategi ini bisa dikombinasikan dengan minifikasi JavaScript di WordPress untuk hasil yang lebih baik — unduhan lebih kecil ditambah loading yang tidak memblokir render.

Pada salah satu proyek klien berbasis WordPress, saya pernah mencoba menerapkan `defer` pada file jQuery untuk mengurangi blocking resource dan memperbaiki skor performa di Lighthouse.

Awalnya terlihat menjanjikan, karena laporan Lighthouse menunjukkan JavaScript yang memblokir rendering mulai berkurang.

Namun setelah dicek langsung di halaman frontend, beberapa elemen interaktif tidak berjalan normal.

Slider tidak bergerak, tombol menu mobile tidak merespons, dan beberapa animasi yang sebelumnya berjalan lancar tiba-tiba berhenti.

Masalah mulai terlihat jelas saat saya membuka browser console.

Di sana muncul error seperti `$ is not defined`, `jQuery is not defined`, atau fungsi dari plugin tertentu yang dipanggil sebelum library utamanya siap.

Dari situ saya tahu bahwa masalahnya bukan sekadar file jQuery yang gagal dimuat, tetapi urutan eksekusi script yang berubah karena penggunaan `defer`.

Beberapa script inline dari tema dan plugin masih menganggap jQuery sudah tersedia lebih dulu, padahal dengan `defer`, eksekusinya menjadi lebih sensitif terhadap urutan pemanggilan.

Saya kemudian membandingkan hasilnya lewat Lighthouse dan pengecekan manual di DevTools.

Dari sisi skor, penggunaan `defer` memang membantu mengurangi render-blocking JavaScript. Tetapi dari sisi stabilitas, risikonya cukup besar karena website klien menggunakan beberapa plugin lama yang masih bergantung pada jQuery global dan inline script. Artinya, optimasi performa tidak bisa hanya dilihat dari angka Lighthouse, tetapi juga harus diuji pada fungsi nyata di halaman.

Keputusan akhirnya, saya tidak menerapkan `defer` langsung pada jQuery utama.

Yang saya lakukan adalah membiarkan jQuery tetap dimuat normal, lalu hanya menerapkan `defer` pada script custom yang tidak kritikal dan tidak bergantung langsung pada urutan awal rendering.

Untuk beberapa script, saya juga memindahkan eksekusinya ke dalam `jQuery(document).ready()` atau event `DOMContentLoaded`. Dengan pendekatan ini, website tetap stabil, fitur klien berjalan normal, dan skor performa tetap bisa ditingkatkan tanpa mengorbankan fungsi utama.

Pengaruhnya pada Core Web Vitals dan Peringkat Google

Google menggunakan Core Web Vitals sebagai salah satu sinyal ranking. Tiga metrik yang paling relevan di sini: Largest Contentful Paint (LCP), First Contentful Paint (FCP), dan Total Blocking Time (TBT).

Script blocking yang tidak dikelola berkontribusi langsung ke TBT yang tinggi — karena main thread browser “terkunci” selama script dieksekusi. Dengan async dan defer, browser tidak perlu menunggu script selesai sebelum melanjutkan rendering. FCP dan LCP bisa membaik, TBT turun.

Tapi ini bukan obat ajaib. Kalau script-nya sendiri memang berat, async/defer tidak akan mempercepat eksekusinya. Yang diperbaiki adalah urutan prioritas: konten halaman ditampilkan dulu, script berjalan belakangan. Dua hal yang berbeda.

Apa Itu Atribut async?

Untuk website yang dibangun dengan tujuan bisnis — baik lewat Jasa Pembuatan Web Company Profile maupun platform konversi lainnya — performa halaman punya dampak langsung pada angka konversi. Google sendiri pernah mempublikasikan data bahwa setiap tambahan 1 detik loading time bisa menurunkan konversi mobile hingga 20%. Angka yang cukup membuat detail teknis seperti ini layak diperhatikan serius.

Prinsip serupa berlaku untuk CSS library yang dimuat di halaman — kalau Anda memuat library besar yang tidak sepenuhnya dipakai, sebaik apapun manajemen script-nya, ukuran aset tetap jadi hambatan tersendiri. Optimasi harus menyeluruh, bukan sepotong-sepotong.

Kalau Anda sedang mempertimbangkan audit performa website secara menyeluruh, termasuk manajemen script dan loading behavior, Jasa Maintenance Website kami mencakup review aspek teknis seperti ini — bukan hanya update konten dan backup rutin.

Satu Atribut, Satu Keputusan yang Tepat

Async dan defer bukan fitur baru. Mereka didukung semua browser modern tanpa pengecualian, dan ada di spesifikasi HTML5 sejak lama. Yang berubah adalah seberapa penting performa halaman dalam konteks SEO dan pengalaman pengguna saat ini — dan seberapa besar konsekuensi dari keputusan kecil seperti pemilihan atribut script.

Memilih antara async dan defer bukan soal mana yang “lebih baik” secara umum. Soal memahami peran setiap script di halaman Anda: apakah ia bisa berdiri sendiri, atau ia butuh DOM dan script lain sebagai fondasi. Satu keputusan yang tepat di sini bisa menghindarkan Anda dari jam debugging yang tidak perlu.

Kalau website Anda dibangun sebagai alat konversi, performa teknis seperti ini adalah bagian dari desain — bukan afterthought. Kami menyediakan Jasa Pembuatan Landing Page yang memperhatikan aspek performa dari awal, termasuk bagaimana setiap script dimuat dan dieksekusi. Untuk kebutuhan teknis yang lebih luas, tim Jasa Web Developer Tangerang dari Budiharyono.id siap membantu dari perencanaan hingga eksekusi.

Artikel Terbaru

Cakupan Layanan

Desain UI/UX, Pengembangan backend, frontend & integrasi API/REST API.

Web development berbasis PHP, Nextjs, Nodejs didalam berbagai stack pilihan yang sesuai dengan kebutuhan Anda.

Full-stack Web Developer

2009 sampai sekarang berpengalaman dalam pengembangan web dan solusi digital.

Memulai sebagai praktisi search engine optimization (SEO) dengan brand JBS Group dapat dibuktikan dengan: Fakta I, Fakta II, Fakta III. Terus melakukan inovasi dan pengembangan dalam bidang digital.

Ruang Lingkup Pekerjaan

Sebaran Klien BudiHaryono.id

Scope klien yang kami tangani 80% terkait dengan SEO, website company profile. 10% Klien terkait dengan pengembangan aplikasi seperti pengembangan SAAS dan web aplikasi untuk kebutuhan kantor. 5% Klien terkait dengan layanan IT Solution seperti: IT infastruktur, IT networking & IT Outsourcing. 5% Klien terkait dengan layanan Maintenance.

80%
SEO & Website Company Profile
10%
Pengembangan Aplikasi
5%
IT Solution
5%
Maintenance

Platform & Arsitektur

Aplikasi yang kami bangun.

Platform, arsitektur yang kami gunakan meliputi: WordPress, Laravel, Shopify, Next.js, React, PHP.

90%
WordPress
10%
Lainnya

Jasa Web Developer Full-stack | BudiHaryono.id

Membangun web, app, SAAS dengan strategi, bukan sekadar mengikuti tren yang belum tentu menghasilkan.

2009
Mulai 2009 bekerja menjadi web devoper.
17+
Bekerja lebih dari 17 tahun berpengalaman dibidangnya.
200+
Lebih dari 200 proyek terselesaikan.
10+
Lebih dari 10 korporate klien aktif.

Worskshop BudiHaryono.id

Bekerja secara remote. Full-time menyelesaikan project sampai selesai.

BudiHaryono.id adalah jasa web developer full-stack freelance profesional dan berpengalaman.

  • Alamat Jl. Mujahidin 1 No.112, RT/RW 002/008. Kreo Selatan, Larangan, Kota Tangerang, Banten, 15156, Indonesia.
  • Telepon: 0813-9891-2341
Workshop BudiHaryono.id

Scope (ruang lingkup) penawaran Kami

Siap membantu mencapai keberhasilan seperti ekspektasi Anda.

Stacks, platforms, infrastruktur yang kami kuasai untuk memberikan hasil yang maksimal. BudiHaryono adalah full-stack web developer. Jasa Pembuatan Website, Maintenance Website, Web Company Profile Perusahaan, Jasa Pembuatan Website WordPress, Jasa Pembuatan Landing Page, Jasa Pembuatan Aplikasi Website, Jasa Fotografer Produk, Jasa Videografi, Jasa Pembuatan Video Company Profile, dan Jasa Desain UI/UX

  • Android App
  • Animasi Web
  • API Design
  • API Rest
  • App Mobile
  • App Testing
  • Backend Dev
  • Bootstrap CSS
  • Brand Photo
  • Bug Fix
  • CMS Custom
  • CodeIgniter
  • Color Grade
  • Company Video
  • Content Photo
  • Custom Hook
  • Custom Plugin
  • Custom Theme
  • Dashboard UI
  • Database
  • Deploy App
  • Docker
  • Domain Setup
  • Drone Shot
  • E-Commerce
  • Edit Photo
  • Edit Video
  • Figma UI
  • Food Photo
  • Form Builder
  • Frontend Dev
  • Full Stack
  • Git Flow
  • GraphQL
  • Headless CMS
  • Headshot
  • Hosting Setup
  • IT Support
  • IT Outsource
  • IT Infrastruktur
  • iOS App
  • JavaScript
  • Joomla Dev
  • jQuery
  • Landing Page
  • Laravel Dev
  • Load Speed
  • Logo Design
  • Maintenance
  • Mobile App
  • Mobile Web
  • Motion Graphic
  • MySQL DB
  • Next.js
  • Node.js
  • On-Page SEO
  • Page Builder
  • PHP Dev
  • Plugin Dev
  • Podcast Video
  • Portfolio Web
  • PWA Dev
  • React Dev
  • Redis Cache
  • Redesign Web
  • Reel Video
  • REST API
  • Responsive
  • Schema Markup
  • SEO Teknis
  • Server Side
  • Sitemap XML
  • SSL Setup
  • Studio Foto
  • Tailwind CSS
  • Theme Dev
  • TypeScript
  • UI Design
  • UX Research
  • Video Profil
  • Vue.js
  • Web Audit
  • Web Design
  • Web Dev
  • WebFlow
  • WooCommerce
  • WordPress Dev
  • XML Sitemap

Klien & Partner Kami

Perusahaan, UMKM & Individual yang menggunakan jasa kami & Tim

Selain pengembangan web kami juga menangani IT solutions (infrastruktur, it support outsourcing) dll.

  • 99.Co
  • AET Travel
  • Alpha Filter Indonesia
  • Belanjah Mamah
  • Diklat Gada Pratama
  • Evania Residence
  • Fajarmerah
  • Fajarmerah Collection
  • Garda Total Securindo
  • Gestun ITC BSD
  • IDHub
  • ID Outsourcing
  • Imtri Jaya Interior
  • Indo Oustsourcing
  • Izzatishot Creative
  • Jasa Cuci Toren Air
  • Juragan Grooming
  • Kopi Kenangan
  • Leo Siregar
  • LQ Law Firm
  • Neviaffan Travel
  • Newland FA
  • Outsourcing
  • Outsourcingindo
  • Paket Firstmedia
  • Paket XL Satu
  • Pengacara Perceraian
  • Pintu Besi Kens
  • PT. ASP
  • PT. BNI ( Divisi DPLK )
  • PT. Buana Merdeka Jaya
  • PT. FISS
  • PT. GPP Sejahtera
  • PT. GTS
  • PT. HPM Group
  • PT. KCS
  • PT. Phytochemindo Reksa
  • PT. Samco Farma
  • PT. SAS Security
  • PT. SKM
  • PT. Union Abadi Makmur
  • PT Bahana Inti Sejahtera
  • PT Fisssecurity
  • PT Inter Sistem Asia
  • PT Kenko
  • PT MKI
  • Pusat Khitan
  • Reqspace
  • Service Center Wika
  • Sewa Standing AC
  • Smartschool Al-Haamidiyah
  • Solahart Service Center
  • Supplier TD
  • Toko Timbangan
  • Total Buah Segar
  • WRK & Partners
  • XL Satu