Cara Kurangkan Total Blocking Time (TBT) di Laman Web Anda dengan JavaScript Defer/Async

Pemuatan JavaScript secara tertunda adalah teknik untuk mengurangkan Total Blocking Time (TBT) dengan mengatur pemuatan fail JavaScript yang bukan kritikal menggunakan defer atau async. Ini membolehkan pelawat melihat kandungan laman dengan lebih pantas, berinteraksi lebih awal, serta memperbaiki metrik Core Web Vitals. Untuk mengaplikasikan pemuatan JavaScript tertunda, kenal pasti fail-fail skrip yang penting, gunakan defer untuk skrip bersandaran, async untuk skrip pihak ketiga yang bebas, dan uji perubahan anda dengan PageSpeed Insights, Lighthouse serta Chrome DevTools untuk menilai TBT.

Di laman web moden, masalah prestasi biasanya bukan dari imej, tetapi penggunaan JavaScript yang tidak terkawal. Contohnya, laman e-dagang mungkin memuat banyak skrip sekaligus: penapis produk, chat langsung, pixel iklan, kod analitik, plugin komen, alat A/B test dan skrip tema. Ini membebankan main thread browser, terutamanya pada peranti mudah alih. Walaupun pelawat sudah nampak tajuk laman, menu mungkin lambat bertindak bila disentuh. Dalam Lighthouse, nilai TBT akan tinggi.

Panduan ini menerangkan fungsi defer dan async, bila dan bagaimana menggunakannya, cara implementasi di WordPress dan projek custom, aspek pengukuran, serta strategi untuk hasil TBT yang realistik. Cadangan untuk laman yang dihoskan di Hostragons selari dengan piawaian web semasa; kami juga bincangkan bagaimana hosting, CDN, SSL dan caching sokong optimisasi JavaScript. Hostragons pakej hosting web

Apa Itu TBT dan Kenapa Ia Sering Dikaitkan dengan JavaScript?

TBT ialah singkatan Total Blocking Time—ia mengukur masa main thread browser terhalang sebelum laman sedia untuk interaksi pengguna. Dalam ujian Lighthouse, tugas JavaScript yang melebihi 50ms antara First Contentful Paint dan Time to Interactive akan menaikkan TBT. Contohnya, jika satu skrip mengambil 180ms, 130ms darinya menyumbang kepada TBT.

Metrik ini penting untuk pengalaman pengguna. Jika browser masih memproses JavaScript semasa pelawat ingin klik menu, tambah ke troli atau guna kotak carian, interaksi akan terasa lambat. Ini boleh dianggap sebagai laman “hang” atau respons lambat. Walaupun Google tidak jadikan TBT satu-satunya faktor SEO pada 2026, laman yang responsif lebih menarik dan meningkatkan conversion.

Tanda-tanda TBT Tinggi yang Sering Dikesan

• Dalam PageSpeed Insights (mobile), TBT lebih 300ms.
• Amaran “Reduce JavaScript execution time” atau “Minimize main-thread work” pada laporan Lighthouse.
• Kandungan sudah muncul tapi menu, slider, filter atau form lambat bertindak balas.
• Skrip pihak ketiga (iklan, chat, analitik) muncul dengan kos tinggi dalam laporan.
• Peranti Android murah mengalami lag semasa scroll atau klik.

Sasaran TBT di bawah 200ms dianggap baik untuk laman kandungan. Laman e-dagang atau SaaS yang kompleks mungkin perlu lebih dari sekadar defer dan async: pembahagian kod, buang skrip tidak guna, caching, optimasi respons server dan CSS kritikal juga diperlukan. Namun, pemuatan JavaScript tertunda adalah langkah pertama yang mudah dan cepat untuk kebanyakan projek.

Apa Itu Defer dan Async?

Secara default, tag <script> dalam HTML akan hentikan parsing HTML, muat turun dan jalankan fail JavaScript sebelum sambung rendering. Ini boleh menyebabkan “wait” yang tidak perlu jika digunakan untuk semua skrip. defer dan async mengubah cara browser memuat dan menjalankan skrip ini.

Bagaimana Defer Berfungsi?

Skrip dengan defer dimuat di background semasa HTML diproses, tetapi hanya dijalankan selepas dokumen HTML selesai parsing. Skrip defer mengekalkan susunan dalam HTML, jadi ia sesuai untuk skrip yang saling bergantung. Contohnya, library dan skrip tema yang bergantung padanya.

Contoh: <script defer src="/js/app.js"></script>. Fail app.js akan dimuat tanpa menghalang rendering awal, dan dijalankan bila DOM sedia. Defer disokong luas di browser moden dan selamat untuk kebanyakan skrip tradisional.

Bagaimana Async Berfungsi?

Skrip dengan async juga dimuat di background, tetapi akan dijalankan sebaik sahaja muat turun selesai, walaupun HTML masih parsing. Tiada jaminan susunan; skrip yang selesai dahulu akan dijalankan dahulu. Async sesuai untuk skrip bebas seperti analitik, iklan, pixel tracking, widget luar atau kod media sosial.

Contoh: <script async src="/js/analytics.js"></script>. Skrip ini tidak boleh bergantung pada kod atau library lain yang belum dimuat. Jika analytics.js perlukan jQuery atau global variable yang belum tersedia, async boleh menyebabkan error. Jadi, async adalah pantas tetapi perlu digunakan dengan teliti.

Perbandingan Defer vs Async

Prinsip mudah: jika skrip perlu dijalankan dalam urutan tertentu, gunakan defer. Untuk skrip bebas, pertimbangkan async. Jika ragu-ragu, cuba defer di staging dahulu, pantau error konsol dan interaksi penting. Panduan persekitaran staging dan pematuhan

Langkah-Langkah Praktikal Untuk Pemuatan JavaScript Tertunda

Menambah defer atau async secara rawak ke semua skrip mungkin nampak “boost” skor pada awalnya, tapi boleh rosakkan fungsi penting seperti pembayaran, carian, menu, validasi form atau troli. Ikuti proses: ukur, klasifikasikan, ubah sedikit demi sedikit, uji dan pantau.

1. Ukur Prestasi Semasa

Mulakan dengan rekod baseline. Gunakan PageSpeed Insights untuk skor mobile dan desktop. Catat TBT, First Contentful Paint, Largest Contentful Paint dan Speed Index dalam Lighthouse. Di Chrome DevTools (Performance), lihat blok kuning panjang—ini biasanya kos parsing, compile dan run JavaScript.

Buat jadual baseline: TBT mobile = 780ms, JavaScript execution time = 2.8s, main-thread work = 4.5s. Selepas optimisasi, jika TBT turun ke 280ms, itu sudah 64% penambahbaikan. Rekod sebegini memudahkan team menilai keberkesanan setiap perubahan.

2. Senaraikan Semua Skrip

Di source code atau Network tab, senaraikan semua fail JavaScript yang dimuat. Catat sumber, saiz, bila diperlukan dan dependensi. Klasifikasikan:

• Skrip kritikal: diperlukan segera untuk view awal atau navigasi.
• Skrip tempatan bersandaran: tema, slider, galeri, modul aplikasi.
• Skrip pihak ketiga bebas: analitik, iklan, pixel, chat, media sosial.
• Skrip tak perlu/legacy: dari plugin lama yang tidak digunakan.
• Skrip conditional: hanya perlu di halaman tertentu (contoh: validasi form di halaman hubungi).

Kadang-kadang, optimisasi terbaik ialah buang skrip yang tak perlu. JavaScript 90KB (minified) boleh tambah lebih 300ms di mobile. Buang yang tak perlu dahulu, baru optimasi selebihnya.

3. Pilih Skrip untuk Defer

Skrip tema utama, menu, slider, galeri produk dan bundle aplikasi biasanya sesuai untuk defer. Syaratnya: jangan bergantung pada document.write atau teknik blok lama, dan boleh dijalankan selepas DOM sedia.

Di tema WordPress, jquery-migrate, fail utama tema dan plugin mungkin ada dependensi rumit. Jquery sendiri jangan di-async; banyak plugin tunggu jQuery. Sebaliknya, apply defer dengan kawalan atau guna loading options plugin yang ada. Panduan pengoptimuman kelajuan WordPress

4. Pilih Skrip untuk Async

Contoh skrip yang sesuai untuk async: Google Analytics, tag iklan, Facebook Pixel, LinkedIn Insight Tag, beberapa widget chat luar dan kod perkongsian sosial. Namun, tidak semua skrip pihak ketiga sama—sesetengah chat perlu load serta-merta, sesetengah iklan perlukan container tertentu. Semak documentation.

Biasanya, async analitik tidak menjejaskan UX. Untuk minimakan risiko data loss, kawal trigger dalam laporan real-time. Jika guna tag manager, jangan masukkan semuanya dalam satu container; filter ikut keperluan page. Contohnya, jangan load script komen di page tanpa form komen.

5. Pemuatan Conditional dan Berdasarkan Event

Defer dan async bagus untuk permulaan, tetapi pemuatan JavaScript berdasarkan interaksi pengguna memberi impak lebih besar pada TBT. Contoh: chat hanya dimuat bila pelawat tinggal selama 5 saat, atau klik butang bantuan; kod peta hanya dimuat bila pelawat scroll ke bahagian hubungi; video player hanya dimuat bila butang play ditekan.

Pendekatan ini sangat berkesan untuk laman korporat dan kandungan. Tidak semua pelawat perlukan semua widget. Mengurangkan 200KB JavaScript dalam initial load boleh turunkan TBT ratusan milisecond di mobile.

6. Uji dan Deploy Secara Bertahap

Sebelum deploy ke laman live, uji di staging/test. Test manual di homepage, kategori, produk, hubungi, login, dan halaman pembayaran. Pantau error di console (terutama error seperti “Cannot read property”, “is not defined”, “undefined function” yang biasanya berkaitan urutan atau dependensi).

Deploy secara bertahap—mula dengan optimasi skrip pihak ketiga, kemudian tema. Selepas setiap perubahan, test Lighthouse dengan simulasi jaringan dan device yang sama. Jangan hanya bergantung pada satu ujian; ambil purata dari tiga test untuk hasil yang lebih tepat.

Nota Khusus Defer & Async di WordPress

Di WordPress, fail JavaScript dimuat melalui wp_enqueue_script dalam tema dan plugin. Pada versi terbaru, strategi skrip lebih terkawal, tapi tema lama, page builder dan plugin optimasi boleh menyebabkan konflik.

Jika guna plugin optimasi, jangan hanya “defer” semua JavaScript secara automatik—buat exclusion list untuk fail kritikal: halaman pembayaran, login, admin bar, security, captcha. Untuk WooCommerce, test troli, gateway pembayaran dan varian produk secara teliti. Penyelesaian Hosting WooCommerce

Proses praktikal: buang plugin yang tidak digunakan, jadikan skrip plugin conditional pada halaman tertentu, cuba defer pada skrip tema/plugin, dan akhirnya gunakan async atau pemuatan tertunda untuk skrip independen pihak ketiga. Pendekatan bertahap ini mengurangkan risiko laman rosak secara tiba-tiba.

Perhatian Untuk Projek Custom dan Framework

Dalam React, Vue, Angular, Next.js, Nuxt dan framework moden lain, optimasi JavaScript lebih dari sekadar defer di HTML. Kos bundle, code splitting, tree shaking, dynamic import dan hydration memberi kesan besar pada TBT. Bundle besar (contoh: 700KB) walau di-defer, tetap boleh block main thread lama semasa run.

Guna code splitting berdasarkan route—jangan muat turun kod admin panel, grafik, editor canggih di homepage. Import modul berat secara dinamik bila diperlukan. Kenal pasti dan buang dependensi tidak digunakan dengan tools bundle analyzer. Pilih library yang ringan untuk tarikh, grafik atau animasi.

Projek SSR atau static generation juga perlu berhati-hati: walau HTML load cepat, proses hydration boleh block ratusan komponen serentak dan naikkan TBT. Elakkan JavaScript client-side yang tidak perlu di page statik—ini prinsip utama prestasi web 2026.

Hubungan Hosting, Respons Server dan Prestasi JavaScript

TBT bergantung pada masa JavaScript dijalankan di browser, tetapi hosting boleh mempengaruhi hasil secara tidak langsung. Respons server lambat (TTFB tinggi), tiada compression, tiada HTTP/2/3, caching lemah atau lokasi server jauh akan lambatkan JavaScript sampai ke browser. Bila fail lambat sampai, cycle rendering akan bertambah dan UX menurun.

Hosting berkualiti dengan Brotli/Gzip compression, caching browser, PHP terkini, disk pantas dan CDN akan sokong optimasi. SSL yang dipasang betul penting untuk ciri browser, HTTP/2 dan integrasi pihak ketiga. Hostragons sijil SSL Hostragons semakan domain

Contoh: fail JavaScript tanpa compression = 320KB; dengan Brotli = 95KB. Ini tidak mengurangkan TBT secara langsung (kerana TBT ialah kos run), tetapi download lebih cepat, prioriti sumber lebih baik, dan pengalaman load lebih lancar. Jadi, defer, async, caching dan hosting perlu digabungkan.

Senarai Semak Pengukuran dan Validasi

Untuk menilai kejayaan optimasi, jangan hanya lihat skor PageSpeed. Gunakan senarai semak ini:

• Bandingkan TBT mobile sebelum dan selepas optimasi.
• Adakah fail JavaScript paling berat berkurang dalam laporan execution time?
• Adakah jumlah tugas panjang (long tasks) di Chrome DevTools menurun?
• Adakah error JavaScript muncul di console?
• Adakah menu, carian, filter, form, troli dan flow pembayaran berfungsi lancar?
• Adakah tag analitik dan iklan pihak ketiga trigger dengan betul?
• Adakah Interaction to Next Paint (INP) dan delay interaksi pengguna bertambah baik dalam data sebenar?
• Adakah ujian diulang selepas cache dibersihkan?

Penting untuk bezakan data lab (Lighthouse) dan data sebenar pengguna. TBT ialah metrik lab; INP kini jadi petunjuk utama UX. Namun, penurunan TBT biasanya membantu INP kerana main thread kurang block.

Kesilapan Lazim dan Cara Elak

Async Semua Skrip Sekaligus

Ini kesilapan paling biasa. Async tidak menjamin urutan, jadi fail bersandaran boleh error secara rawak. Laman mungkin nampak ok, tetapi rosak di browser/peranti lain atau sambungan perlahan. Untuk fail bersandaran, defer lebih selamat.

Salah Defer jQuery dan Plugin Bersandaran

WordPress bergantung kepada jQuery untuk banyak plugin. Async jQuery boleh menyebabkan plugin gagal kerana jQuery belum dimuat. Solusi: fahami dependensi, exclude fail kritikal dari optimasi.

Abaikan Skrip Pihak Ketiga

Pemilik laman sering fokus pada fail tema, tetapi lupa optimasi skrip iklan, chat dan analitik. Sebenarnya, tugas paling berat dalam Lighthouse biasanya datang dari sumber luar. Buang tag tidak perlu, guna conditional trigger, dan delay ke interaksi pengguna bila sesuai.

Pasang Plugin Tanpa Ujian Prestasi

Plugin prestasi boleh bantu, tapi setiap plugin tambah beban JavaScript/CSS. Pastikan masalah diidentifikasi dahulu, baru pilih alat. Uji dan sahkan plugin benar-benar turunkan TBT dengan laporan.

Abaikan Konflik Caching/Minify

Jika minify, combine, defer dan async dilakukan serentak, urutan fail boleh berubah dan laman rosak di production. Jika guna CDN, server cache dan app cache, bersihkan semua lapisan selepas perubahan.

Contoh Senario Optimasi Realistik

Katakan laman korporat sederhana ada 18 permintaan JavaScript di homepage: 5 untuk tema/menu, 4 slider/animasi, 3 form/peta, 6 analitik/pixel/chat. TBT mobile awal: 920ms.

Langkah pertama: buang dua plugin animasi yang tak digunakan, kurangkan 140KB JavaScript. TBT turun ke 760ms. Kedua: defer fail tema dan slider, test urutan dependensi. TBT jadi 480ms. Ketiga: skrip peta hanya dimuat bila scroll ke bahagian hubungi, chat delay 7s, analitik/pixel di-async. Selepas semua, TBT tinggal 210ms.

Senario ini menunjukkan tiada “magic switch”—pendekatan bertingkat lebih efektif. Defer dan async alat utama, tapi buang kod tidak perlu, pemuatan conditional, caching dan hosting berkualiti juga penting.

Penutup: Strategi JavaScript Tertunda yang Seimbang & Teruji

Implementasi JavaScript tertunda adalah cara paling praktikal untuk kurangkan TBT. Defer selamat untuk fail yang bersandaran dan dijalankan selepas DOM sedia; async ideal untuk skrip pihak ketiga bebas. Untuk hasil terbaik, ukur dahulu, klasifikasikan skrip, buang fail tak perlu, test bertahap dan pantau pengalaman sebenar pengguna.

Jika anda menggunakan Hostragons, infrastruktur pantas dan selamat membantu prestasi web melalui optimasi JavaScript, caching dan SSL. Untuk kurangkan TBT laman, mula dengan laporan semasa, kemudian lakukan perubahan kecil yang boleh diukur. Untuk hosting dan prestasi terbaik, lihat solusi Hostragons. Hostragons pakej hosting web

Soalan Lazim (FAQ)

Bolehkan defer dan async digunakan serentak?

Jika defer dan async digunakan dalam satu tag skrip, browser biasanya utamakan async dan urutan boleh terganggu. Tidak disarankan guna kedua-duanya untuk fail sama. Untuk fail bersandaran, gunakan defer; untuk fail bebas, gunakan async.

Adakah pemuatan JavaScript tertunda terus meningkatkan ranking SEO?

Tidak secara langsung, tetapi ia memperbaiki pengalaman dan Core Web Vitals, yang membantu SEO. Laman lebih responsif meningkatkan kepuasan pengguna, conversion dan kualiti crawl.

Amankah jika semua fail JavaScript di-defer?

Tidak. Ada skrip yang mesti dijalankan segera atau bergantung pada urutan tertentu. Semak tujuan, dependensi dan timing sebelum ubah; test di staging dahulu.

Cukupkah sekadar defer dan async untuk turunkan TBT?

Untuk laman kecil/sederhana, ya—tetapi untuk laman dengan framework berat, banyak kod pihak ketiga, atau bundle besar, perlu langkah tambahan: code splitting, buang JavaScript tidak guna, pemuatan conditional, caching dan hosting berkualiti.

Skrip mana di WordPress tidak boleh di-async?

Skrip plugin yang bergantung pada jQuery, troli/pembayaran, validasi form, security dan fungsi tema kritikal jangan di-async secara rawak. Jika urutan terganggu, operasi boleh gagal. Cuba defer dahulu, dan buat exclusion list jika perlu.