Memuat JavaScript secara tertunda adalah metode untuk mengurangi Waktu Total Blocking (Total Blocking Time atau TBT) dengan menunda pemrosesan file JavaScript yang menghalangi konten halaman untuk dirender oleh browser. Singkatnya, dengan menambahkan atribut defer atau async pada file script yang tidak kritis, Anda dapat mengurangi penguncian pada thread utama; sehingga pengguna dapat melihat halaman lebih cepat, dapat mengklik lebih awal, dan metrik Core Web Vitals akan membaik. Untuk menerapkan pemuatan JavaScript secara tertunda di situs Anda, pertama-tama Anda harus menentukan file mana yang kritis, umumnya menggunakan defer untuk script yang memiliki ketergantungan, dan async untuk script pihak ketiga yang independen, serta setelah melakukan perubahan, Anda harus mengukur nilai TBT menggunakan PageSpeed Insights, Lighthouse, dan Chrome DevTools.
Masalah performa di situs web modern sering kali disebabkan oleh penggunaan JavaScript yang tidak terkontrol, bukan oleh gambar. Jika pada situs e-commerce, filter produk, dukungan langsung, piksel iklan, kode analitik, plugin komentar, alat A/B testing, dan script tema dimuat secara bersamaan, maka thread utama browser akan terjebak dalam waktu yang lama. Hal ini terutama terlihat pada perangkat mobile. Meskipun pengguna dapat melihat judul di layar, mereka mungkin tidak mendapatkan respons saat menyentuh menu; sementara di laporan Lighthouse, TBT terlihat tinggi.
Dalam panduan ini, kita akan membahas apa yang dilakukan atribut defer dan async, kapan Anda harus menggunakannya, bagaimana cara menerapkannya di proyek WordPress dan perangkat lunak khusus, hal-hal yang perlu diperhatikan saat mengukur, dan keuntungan TBT yang realistis secara bertahap. Saran yang diberikan untuk situs yang dihosting di infrastruktur Hostragons sesuai dengan standar web umum; kami juga akan membahas bagaimana hosting yang tepat, CDN, SSL, dan keputusan caching mendukung optimasi JavaScript. Paket Hosting Web Hostragons
Apa itu TBT dan Mengapa Terkait dengan JavaScript?
TBT adalah singkatan dari Total Blocking Time dan mengukur blokir pada thread utama yang menghambat halaman untuk siap berinteraksi dengan pengguna. Dalam pengujian laboratorium Lighthouse, banyaknya tugas panjang yang melebihi 50 milidetik antara First Contentful Paint dan Time to Interactive akan meningkatkan nilai TBT. Sebagai contoh, jika sebuah tugas JavaScript memakan waktu 180 ms, maka 130 ms dari waktu tersebut berkontribusi pada waktu blokir setelah 50 ms pertama.
Metrik ini sangat penting untuk pengalaman pengguna. Jika seorang pengunjung menyentuh menu, tombol tambah ke keranjang, atau kotak pencarian setelah halaman dibuka, tetapi browser masih menjalankan JavaScript, maka interaksi akan tertunda. Pengguna dapat menganggap hal ini sebagai pembekuan, respons lambat, atau situs yang rusak. Dalam standar SEO 2026, meskipun Google tidak merangkum pengalaman halaman menjadi satu skor, situs yang menawarkan interaksi cepat dan stabil akan mendapatkan keuntungan baik dalam kepuasan pengguna maupun tingkat konversi.
Tanda-tanda Umum TBT Tinggi
- Nilai TBT di laporan PageSpeed Insights untuk mobile melebihi 300 ms.
- Peringatan Reduce JavaScript execution time atau Minimize main-thread work muncul di laporan Lighthouse.
- Menu, slider, filter, atau bidang formulir memberikan respons lambat meskipun halaman sudah terlihat.
- Script iklan pihak ketiga, dukungan langsung, atau analitik terlihat mahal di laporan.
- Terutama pada perangkat Android entry-level, mengalami keterlambatan saat menggulir dan mengklik.
Menjaga nilai TBT di bawah 200 ms dianggap sehat untuk sebagian besar situs konten. Namun, untuk antarmuka e-commerce atau SaaS yang lebih kompleks, mencapai target ini mungkin tidak cukup hanya dengan menggunakan defer dan async; pembagian kode, penghapusan paket yang tidak perlu, caching, perbaikan waktu respons server, dan pengaturan CSS kritis juga mungkin diperlukan. Meski begitu, memuat JavaScript secara tertunda adalah salah satu optimasi pertama yang harus diterapkan dan dapat memberikan hasil yang cepat.
Apa itu Defer dan Async?
Ketika sebuah tag script digunakan dalam HTML tanpa atribut, browser akan menghentikan pemrosesan HTML, mengunduh file JavaScript, menjalankannya, dan kemudian melanjutkan untuk membangun halaman. Perilaku ini kadang-kadang diperlukan untuk script yang kritis; namun, jika digunakan untuk setiap file, ini dapat menyebabkan waktu tunggu yang tidak perlu. Atribut defer dan async mengubah perilaku ini dengan mengaitkan unduhan dan eksekusi file dengan aturan yang berbeda.
Bagaimana cara kerja Defer?
File script yang ditambahkan dengan defer akan diunduh di latar belakang sementara pemrosesan HTML tetap berlangsung; namun, eksekusinya hanya terjadi setelah dokumen HTML sepenuhnya diparse. Selain itu, beberapa file yang menggunakan defer akan mempertahankan urutan di mana mereka ditulis dalam HTML. Oleh karena itu, ini sering merupakan pilihan yang aman untuk file JavaScript yang saling bergantung. Sebagai contoh, jika sebuah library perlu dijalankan sebelum script tema yang bergantung padanya, maka defer mungkin cocok.
Contoh penggunaan sederhana dapat ditulis sebagai: <script defer src=/js/app.js></script>. Dalam penggunaan ini, file app.js diunduh tanpa memblokir rendering pertama halaman, dan dieksekusi secara berurutan setelah DOM siap. Di browser modern, defer didukung secara luas dan merupakan alat optimisasi yang andal untuk file script klasik.
Bagaimana cara kerja Async?
Script yang ditambahkan dengan async juga diunduh saat pemrosesan HTML berlangsung; namun, segera setelah unduhannya selesai, eksekusi dimulai. Selama waktu ini, pemrosesan HTML dapat terhenti untuk waktu yang singkat. Async tidak menjamin urutan file. File yang diunduh pertama kali akan dieksekusi lebih dulu. Oleh karena itu, ini lebih sesuai untuk analisis mandiri, iklan, piksel pelacakan, widget eksternal, atau script media sosial.
Contoh penggunaan: <script async src=/js/analytics.js></script>. File ini tidak harus menunggu script lokal lainnya untuk dieksekusi sebelumnya. Jika analytics.js bergantung pada variabel yang didefinisikan kemudian dalam halaman atau pada library lain seperti jQuery, menggunakan async dapat menyebabkan kesalahan. Oleh karena itu, async cepat tetapi memerlukan klasifikasi yang hati-hati.
Tabel Perbandingan Defer dan Async
| Fitur | defer | async |
|---|---|---|
| Apakah menghalangi pemrosesan HTML saat mengunduh? | Tidak, file diunduh di latar belakang. | Tidak, file diunduh di latar belakang. |
| Waktu eksekusi | Setelah pemrosesan HTML selesai. | Segera setelah file diunduh. |
| Jaminan urutan | Ada, urutan HTML dipertahankan. | Tidak ada, yang diunduh pertama akan dijalankan lebih dulu. |
| Penggunaan yang paling sesuai | Script tema, modul yang bergantung, file aplikasi utama. | Analisis mandiri, iklan, piksel, dan kode widget eksternal. |
| Risiko | Dapat menyebabkan penundaan pada kode yang harus berjalan sebelum DOM siap. | Dapat menyebabkan kondisi balapan dan kesalahan pada file yang bergantung. |
| Dampak pada TBT | Umumnya aman dan seimbang dalam mengurangi blokir saat pemuatan awal. | Efektif dalam memisahkan beban pihak ketiga yang mandiri lebih awal. |
Aturan praktisnya adalah: Jika file Anda harus dieksekusi dalam urutan tertentu, mulai dengan defer. Jika file Anda sepenuhnya mandiri, pertimbangkan async. Jika Anda tidak yakin, coba defer terlebih dahulu di lingkungan staging, uji kesalahan konsol dan interaksi kritis. Panduan Lingkungan Staging dan Cadangan
Rencana Penerapan Langkah demi Langkah untuk Memuat JavaScript Secara Tertunda
Menambahkan defer atau async secara acak ke setiap tag script mungkin tampak meningkatkan skor dalam jangka pendek, tetapi dapat merusak fungsi kritis seperti pembayaran, pencarian, menu, validasi formulir, atau keranjang pada situs produksi. Untuk penerapan yang sehat, perlu dilakukan pengukuran, klasifikasi, perubahan kecil, pengujian, dan siklus pemantauan.
1. Ukur performa saat ini
Sebelum memulai, buatlah nilai dasar. Catat skor mobile dan desktop menggunakan PageSpeed Insights. Catat nilai TBT, First Contentful Paint, Largest Contentful Paint, dan Speed Index di laporan Lighthouse. Periksa thread utama di tab Performance pada Chrome DevTools; blok kuning yang panjang biasanya menunjukkan biaya parsing, kompilasi, dan eksekusi JavaScript.
Anda dapat menyiapkan tabel awal seperti: TBT mobile 780 ms, waktu eksekusi JavaScript 2,8 detik, kerja di thread utama 4,5 detik. Jika setelah optimisasi TBT mobile turun menjadi 280 ms, Anda akan mendapatkan perbaikan sekitar 64 persen. Catatan konkret seperti ini memudahkan tim untuk melihat perubahan mana yang efektif.
2. Buat inventaris script
Daftarkan semua file JavaScript yang dimuat di kode sumber halaman atau di tab Network. Tentukan sumber, ukuran, kapan diperlukan, dan ketergantungan dari setiap file. Mengelompokkan file-file ini dapat mempermudah pekerjaan Anda:
- Script kritis: Kode yang diperlukan segera untuk tampilan pertama atau navigasi dasar.
- Script lokal yang bergantung: Tema, slider, filter, galeri, dan modul aplikasi.
- Script pihak ketiga yang mandiri: Analitik, iklan, piksel, obrolan, dan komponen media sosial.
- Script yang tidak perlu atau usang: File dari plugin yang tidak digunakan.
- Script yang perlu dimuat secara kondisional: Yang diperlukan hanya pada halaman tertentu seperti validasi formulir di halaman kontak.
Optimisasi terbaik kadang-kadang bukanlah menambahkan defer, tetapi menghapus script yang sama sekali tidak diperlukan. Sebuah file yang terkompresi 90 KB dapat menghasilkan biaya lebih dari 300 ms, termasuk parsing dan eksekusi pada perangkat mobile. Oleh karena itu, membersihkan yang tidak perlu terlebih dahulu, kemudian menunda yang tersisa adalah pendekatan yang lebih tepat.
3. Tentukan file yang akan menggunakan Defer
Umumnya, script tema utama, perilaku menu, kode slider, modul galeri produk, dan file bundle aplikasi adalah kandidat yang baik untuk defer. Namun, syarat penting di sini adalah script tidak terlalu bergantung pada metode lama dan pemblokir seperti document.write dan dapat diterima jika dijalankan setelah DOM siap.
Sebuah tema WordPress dapat memiliki jQuery-migrate, file tema utama, dan script plugin yang mengandung ketergantungan yang kompleks. Membuat jQuery menjadi async berisiko pada banyak situs; karena banyak plugin menunggu urutan jQuery. Sebagai gantinya, menerapkan defer secara terkontrol pada file yang bergantung pada jQuery atau menggunakan opsi pemuatan yang dioptimalkan pada tingkat plugin lebih aman. Panduan optimasi kecepatan WordPress
4. Pilih file yang akan menggunakan Async
Google Analytics, tag iklan, Facebook Pixel, LinkedIn Insight Tag, beberapa widget obrolan eksternal, dan kode berbagi sosial adalah kandidat untuk async. Namun, tidak semua script pihak ketiga sama. Beberapa alat dukungan langsung mungkin ingin membuat sesi pengguna segera setelah halaman dimuat, sementara beberapa sistem iklan mungkin menunggu urutan kontainer tertentu. Oleh karena itu, penting untuk memeriksa dokumentasi.
Membuat kode analisis mandiri menjadi async biasanya tidak merusak pengalaman pengguna. Namun, untuk mengurangi risiko kehilangan data, lakukan pemeriksaan pemicu pada laporan waktu nyata. Jika Anda menggunakan pengelola tag, alih-alih mengumpulkan semua tag dalam satu kontainer, atur kondisi pemicu. Misalnya, script pelacakan komentar tidak boleh dimuat di halaman tanpa formulir komentar, dan script interaksi produk tidak boleh dimuat di halaman tanpa halaman produk.
5. Tambahkan pemuatan kondisional dan berbasis peristiwa
Defer dan async adalah langkah awal yang baik; namun, memuat file JavaScript berdasarkan perilaku pengguna dapat memberikan dampak yang lebih besar pada TBT. Kotak dukungan langsung tidak perlu dimuat segera setelah halaman terbuka, tetapi dapat dimuat ketika pengguna telah berada selama 5 detik atau telah mengklik tombol bantuan. Kode embed peta dapat dimuat saat pengguna menggulir ke bagian kontak. Script pemutar video dapat dipanggil saat pengguna menekan tombol putar.
Pendekatan ini sangat efektif terutama untuk situs konten dan situs web perusahaan. Karena pengunjung tidak memerlukan setiap widget di setiap halaman. Menghapus 200 KB JavaScript dari pemuatan awal dapat mengurangi nilai TBT ratusan milidetik pada prosesor mobile yang lemah.
6. Uji dan terapkan secara bertahap
Alih-alih menerapkan perubahan langsung ke situs live, coba di lingkungan pengujian. Lakukan pengujian manual pada halaman kritis seperti halaman utama, halaman kategori, halaman produk atau layanan, halaman kontak, formulir login, dan alur pembayaran. Periksa apakah ada kesalahan di konsol browser. Terutama kesalahan seperti Cannot read property, is not defined, dan undefined function menunjukkan masalah urutan atau ketergantungan.
Bergeraklah secara bertahap saat beralih ke live. Pertama, optimalkan script pihak ketiga yang mandiri, kemudian lanjutkan ke script tema. Setelah setiap perubahan, ulangi laporan Lighthouse dengan simulasi jaringan dan perangkat yang sama. Jangan mengandalkan satu pengukuran; mengambil rata-rata dari 3 pengujian memberikan hasil yang lebih sehat.
Catatan Penerapan Defer dan Async di Situs WordPress
Di ekosistem WordPress, file JavaScript dimuat melalui fungsi wp_enqueue_script di tema dan plugin. Mulai tahun 2026, strategi script di versi WordPress modern dapat didefinisikan dengan lebih terkontrol. Namun, tema lama, plugin pembuat halaman, dan plugin optimisasi yang tidak kompatibel dapat menyebabkan konflik.
Jika Anda menggunakan plugin performa, alih-alih menunda semua JavaScript dengan satu klik, buat daftar pengecualian. Halaman pembayaran, login anggota, bilah admin, script verifikasi keamanan, dan captcha bisa menjadi sensitif. Pada situs yang menggunakan WooCommerce, bagian keranjang, script gateway pembayaran, dan pemilih variasi harus diuji dengan cermat. Solusi Hosting WooCommerce
Urutan praktis untuk WordPress mungkin sebagai berikut: Pertama, hapus plugin yang tidak digunakan. Kemudian, buat file plugin yang hanya diperlukan di halaman tertentu menjadi kondisional. Selanjutnya, coba defer pada script tema dan plugin. Terakhir, gunakan async atau pemuatan tertunda pada kode pihak ketiga yang mandiri. Metode ini mengurangi risiko mengalami gangguan besar sekaligus.
Poin Penting untuk Proyek Perangkat Lunak Khusus dan Framework
Dalam struktur modern seperti React, Vue, Angular, Next.js, Nuxt, atau sejenisnya, optimisasi JavaScript tidak hanya melibatkan menambahkan defer pada tag HTML. Ukuran paket, pembagian kode, tree shaking, import dinamis, dan biaya hidrasi berpengaruh pada TBT. Jika sebuah file bundle besar berukuran 700 KB, meskipun menggunakan defer, thread utama dapat terblokir untuk waktu yang lama selama fase eksekusi.
Pada proyek perangkat lunak khusus, gunakan pembagian kode berbasis rute. Saat pengguna berada di halaman utama, kode panel admin, pustaka grafik, atau editor lanjutan tidak boleh diunduh. Panggil komponen berat dengan import dinamis saat diperlukan. Identifikasi ketergantungan yang tidak digunakan dengan alat analisis paket. Pertimbangkan untuk menggunakan alternatif yang lebih ringan daripada pustaka besar untuk tanggal, grafik, atau animasi.
Pada proyek yang menggunakan rendering sisi server atau produksi statis, kehati-hatian juga diperlukan. Meskipun HTML datang dengan cepat, aktivasi ratusan komponen secara bersamaan selama fase hidrasi dapat meningkatkan nilai TBT. Menghindari JavaScript sisi klien yang tidak perlu pada konten yang tidak interaktif menjadi pusat pendekatan performa 2026.
Hubungan antara Hosting, Waktu Respons Server, dan Performa JavaScript
TBT terkait langsung dengan waktu eksekusi JavaScript di browser; namun, infrastruktur hosting mempengaruhi hasil secara tidak langsung. TTFB yang lambat, kurangnya kompresi, tidak adanya dukungan HTTP/2 atau HTTP/3, caching yang buruk, dan latensi akibat lokasi yang jauh menyebabkan file JavaScript sampai lebih lambat. Ketika file sampai terlambat, siklus hidup halaman menjadi lebih panjang dan pengalaman pengguna menurun.
Infrastruktur hosting yang berkualitas mendukung optimisasi dengan Brotli atau Gzip compression, caching browser yang aktif, versi PHP yang terkini, teknologi disk yang cepat, dan integrasi CDN. Pemasangan sertifikat SSL yang benar juga penting untuk fitur browser modern, HTTP/2, dan integrasi pihak ketiga yang aman. Sertifikat SSL Hostragons Cek Domain Hostragons
Sebagai contoh, sebuah file JavaScript yang tidak terkompresi berukuran 320 KB dapat turun menjadi 95 KB dengan Brotli. Ini tidak secara langsung mengurangi nilai TBT dalam proporsi yang sama; karena TBT mengukur biaya eksekusi. Namun, waktu unduh berkurang, prioritas sumber daya menjadi lebih baik, dan pengalaman pemuatan total meningkat. Oleh karena itu, defer, async, caching, dan hosting yang tepat harus dipikirkan secara bersamaan.
Daftar Periksa Pengukuran dan Validasi
Untuk memahami apakah optimisasi berhasil, hanya melihat skor PageSpeed tidaklah cukup. Daftar periksa berikut dapat membantu Anda mengevaluasi dampak yang sebenarnya dengan lebih akurat:
- Apakah nilai TBT mobile dibandingkan sebelum dan sesudah optimisasi?
- Apakah file-file yang paling mahal di laporan waktu eksekusi JavaScript berkurang?
- Apakah jumlah tugas panjang di rekaman Performance Chrome DevTools berkurang?
- Apakah ada kesalahan JavaScript di konsol?
- Apakah menu, pencarian, filter, formulir, keranjang, dan alur pembayaran berfungsi dengan baik?
- Apakah tag analisis dan iklan pihak ketiga terpicu dengan benar?
- Apakah data pengguna nyata menunjukkan perbaikan pada INP dan keterlambatan interaksi?
- Apakah perubahan diuji ulang setelah membersihkan cache?
Poin penting di sini adalah memisahkan data laboratorium dan lapangan. TBT adalah metrik laboratorium Lighthouse. Dalam pengalaman pengguna nyata, Interaction to Next Paint (INP) menjadi lebih menentukan. Namun, penurunan TBT sering kali berkontribusi pada perbaikan INP; karena mengurangi blokir pada thread utama.
Kesalahan Umum dan Cara Menghindarinya
Menggunakan async pada semua script sekaligus
Ini adalah salah satu kesalahan paling umum. Karena async tidak menjamin urutan, ini dapat menyebabkan kesalahan acak pada file yang bergantung. Struktur yang terlihat baik di satu halaman bisa mengalami kerusakan pada koneksi lambat atau di browser yang berbeda. Pada file yang memiliki ketergantungan, defer adalah langkah awal yang lebih aman.
Menunda jQuery dan plugin yang bergantung secara salah
Di situs WordPress, banyak plugin bergantung pada urutan jQuery. Mengubah jQuery menjadi async dapat menyebabkan kode plugin dijalankan sebelum jQuery dimuat. Solusinya adalah melihat jaringan ketergantungan dan memasukkan file-file kritis ke dalam daftar pengecualian.
Membiarkan script pihak ketiga tanpa pengawasan
Pemilik situs mungkin lupa untuk mengoptimalkan kode iklan, obrolan, dan analitik saat mengoptimalkan file tema mereka. Padahal, di laporan Lighthouse, tugas paling berat sering kali berasal dari sumber pihak ketiga. Menghapus tag yang tidak digunakan, memicu secara kondisional, dan menunda jika perlu untuk interaksi pengguna memberikan keuntungan yang signifikan.
Instal plugin tanpa pengukuran
Plugin performa bisa sangat berguna; namun, setiap alat tambahan yang digunakan tanpa pengukuran dapat menambah beban JavaScript dan CSS baru. Pertama, diagnosa masalah, lalu pilih alat. Pastikan plugin benar-benar menurunkan TBT dengan laporan pengujian.
Mengabaikan konflik cache dan minifikasi
Jika minifikasi, penggabungan, defer, dan async diterapkan secara bersamaan, urutan file bisa terpengaruh. Hal ini dapat menyebabkan kesalahan tak terduga dalam lingkungan produksi. Terutama jika CDN, cache server, dan cache aplikasi digunakan bersama, bersihkan semua lapisan setelah melakukan perubahan.
Skema Optimisasi yang Realistis
Misalkan pada situs web perusahaan berukuran menengah, ada 18 permintaan JavaScript di halaman utama. Lima di antaranya adalah untuk tema dan perilaku menu, empat untuk slider dan animasi, tiga untuk formulir dan peta, dan enam untuk analitik, piksel, dan kode dukungan langsung. Nilai TBT mobile awal diukur 920 ms.
Pada langkah pertama, dua plugin animasi yang tidak digunakan dihapus, mengurangi beban JavaScript yang terkompresi sebesar 140 KB. TBT menjadi 760 ms. Pada langkah kedua, file tema dan slider diterapkan defer; urutan ketergantungan diuji. TBT menjadi 480 ms. Pada langkah ketiga, script peta hanya dimuat saat pengguna menggulir ke bagian kontak, dukungan langsung dimulai setelah 7 detik, dan kode analitik serta piksel diubah menjadi async. Pada pengukuran terakhir, TBT turun menjadi 210 ms.
Skema ini menunjukkan pentingnya pendekatan bertahap daripada satu pengaturan sihir. Defer dan async adalah alat yang kuat; namun hasil terbaik dicapai dengan menghapus kode yang tidak perlu, pemuatan kondisional, caching yang benar, dan infrastruktur berkualitas.
Kesimpulan: Strategi JavaScript yang Seimbang dan Teruji untuk TBT yang Lebih Rendah
Menerapkan pemuatan JavaScript secara tertunda di situs Anda adalah salah satu cara paling praktis dan efektif untuk mengurangi waktu TBT. Defer menawarkan solusi yang aman untuk file yang harus dijalankan secara berurutan dan setelah DOM siap; sementara async ideal untuk memuat script pihak ketiga yang mandiri dengan lebih fleksibel. Untuk optimisasi yang sukses, Anda harus melakukan pengukuran terlebih dahulu, mengklasifikasikan script, menghapus file yang tidak perlu, menguji perubahan secara bertahap, dan memantau pengalaman pengguna yang sebenarnya.
Menggunakan infrastruktur yang cepat, aman, dan skalabel di Hostragons; bersama dengan optimisasi JavaScript, caching, dan konfigurasi SSL akan membantu Anda mencapai performa web yang lebih stabil. Jika Anda ingin meningkatkan nilai TBT situs Anda, keluarkan laporan Anda terlebih dahulu, kemudian lanjutkan dengan langkah-langkah kecil namun terukur. Anda dapat menjelajahi solusi Hostragons untuk hosting dan infrastruktur performa yang tepat. Paket Hosting Web Hostragons
Pertanyaan yang Sering Diajukan
Bisakah defer dan async digunakan bersamaan?
Pada tag script klasik, jika defer dan async digunakan bersamaan, pada browser modern async dapat berperilaku prioritas; sehingga menghilangkan jaminan urutan. Oleh karena itu, dalam praktiknya, tidak disarankan untuk menggunakan keduanya dalam file yang sama. Defer untuk file yang bergantung, dan async untuk file yang mandiri lebih aman.
Apakah memuat JavaScript secara tertunda meningkatkan peringkat SEO secara langsung?
Secara mandiri tidak memberikan jaminan peringkat langsung; namun, dengan meningkatkan pengalaman halaman, kecepatan interaksi, dan performa Core Web Vitals, mendukung keberhasilan SEO. Halaman yang merespons lebih cepat dapat meningkatkan kepuasan pengguna, konversi, dan persepsi kualitas yang dapat dipindai.
Apakah aman untuk menambahkan defer pada setiap file JavaScript?
Tidak. Beberapa script mungkin harus dijalankan pada tahap awal halaman atau bergantung pada file lain yang harus dimuat dalam urutan tertentu. Oleh karena itu, untuk setiap file, tujuan, ketergantungan, dan waktu eksekusi harus diperiksa; perubahan harus diuji di lingkungan pengujian.
Apakah cukup hanya dengan defer dan async untuk mengurangi TBT?
Untuk situs kecil dan menengah, ini bisa memberikan perbaikan besar; namun, untuk situs yang menggunakan framework berat, memiliki banyak kode pihak ketiga, atau file bundle besar, langkah tambahan diperlukan. Pembagian kode, penghapusan JavaScript yang tidak digunakan, pemuatan kondisional, caching, dan infrastruktur hosting yang kuat harus dipertimbangkan bersama.
Script mana yang tidak boleh saya buat async di situs WordPress?
File plugin yang bergantung pada jQuery, script pembayaran dan keranjang, validasi formulir, verifikasi keamanan, dan fungsi tema kritis tidak boleh dibuat async sembarangan. Jika urutan dalam file-file ini terganggu, proses pengguna dapat terhambat. Sebaiknya coba defer terlebih dahulu, dan buat daftar pengecualian jika perlu.