Delay JS WordPress: Ngebut Tanpa Bikin Slider & Form Rusak

Kamu centang “Delay JavaScript” di plugin cache, lalu slider di homepage lenyap. Form kontak nggak muncul. Google Analytics berhenti merekam data. INP dan LCP memang membaik, tapi situsmu sudah setengah mati.

Masalah ini lebih umum dari yang kamu kira. Fitur delay/defer JavaScript memang senjata ampuh buat menekan render-blocking resources, tapi satu klik tanpa strategi bisa mengorbankan fungsionalitas kritis. Kabar baiknya: ada cara menjinakkan JavaScript tanpa merusaknya.

Jawaban Singkat

Delay JavaScript di WordPress harus pakai whitelist. Identifikasi script yang wajib jalan duluan (slider, form, analytics), eksklusi dari penundaan, lalu delay sisanya. Pendekatan “whitelist first” ini mengamankan INP dan LCP tanpa mengorbankan fitur interaktif yang diandalkan pengunjung.

Kenapa Delay JS Itu Bikin Deg-degan

Skenarionya klasik: kamu pasang FlyingPress, WP Rocket, atau Perfmatters. Skor PageSpeed naik 15-20 poin. Kamu puas. Lalu klien telepon: “Slider di homepage kok hilang?” atau “Form checkout nggak muncul.”

Masalahnya sederhana. Fitur Delay JavaScript bekerja dengan menahan eksekusi semua script sampai user berinteraksi (scroll, klik, sentuh). Strategi ini brilian untuk script non-kritis seperti Facebook Pixel, chat widget, atau live chat pihak ketiga. Tapi fatal untuk script yang menginisialisasi elemen visual: slider, form builder, mega menu, atau Google Analytics.

Google sendiri sudah menegaskan bahwa metrik INP (Interaction to Next Paint) kini menjadi penentu ranking bersama LCP dan CLS. Script yang didefer tanpa seleksi bisa memperburuk INP karena browser harus mengeksekusi antrean JavaScript yang tertunda tepat saat user pertama kali berinteraksi. Ironis, ya?

defer vs delay vs async: Pahami Dulu Biar Nggak Salah

Banyak yang mencampuradukkan tiga konsep ini. Padahal dampaknya beda jauh:

• async: Script diunduh paralel lalu langsung dieksekusi begitu siap. Tidak menghormati urutan. Cocok untuk script independen seperti iklan Google Ads.
• defer: Script diunduh paralel tapi dieksekusi setelah HTML selesai diparse, sesuai urutan kemunculan. Aman untuk script yang bergantung pada DOM.
• delay: Script tidak dieksekusi hingga user berinteraksi. Paling agresif. Butuh whitelist.

Rule of thumb-nya: async untuk script analytics pihak ketiga, defer untuk script tema dan plugin yang butuh DOM, delay hanya untuk script yang benar-benar tidak kritis saat halaman pertama kali muncul.

Audit Script Dulu, Jangan Asal Tunda

Kesalahan terbesar: menyalakan fitur delay JavaScript secara global tanpa tahu script apa saja yang berjalan di halaman. Ini resep bencana.

Sebelum menyentuh pengaturan delay, lakukan audit. Buka Chrome DevTools (F12), buka tab Coverage di panel Sources, lalu reload halaman. Kamu akan melihat persentase kode JS yang benar-benar digunakan. Banyak situs WordPress hanya memakai 20-30% dari total JavaScript yang diunduh.

Catat nama handle atau path script yang muncul di daftar. Script dari plugin slider (biasanya mengandung kata “swiper”, “slick”, “owl”), form plugin (“contact-form-7”, “wpforms”, “gravity”), dan analytics (“gtag”, “gtm”, “analytics”) adalah kandidat wajib masuk daftar eksklusi.

Untuk panduan lebih detail tentang audit performa, baca juga: Cara Cek Skor GTmetrix dan Google PageSpeed Insights.

Strategi “Whitelist First”: Kunci Delay JS yang Aman

Pendekatan yang diajarkan banyak tutorial adalah “tunda semua, lalu perbaiki yang rusak.” Ini pendekatan reaktif yang melelahkan. Strategi yang lebih cerdas adalah whitelist first: asumsikan semua script kritis, lalu tunda hanya yang sudah kamu pastikan aman.

Daftar Script yang Tidak Boleh Ditunda

• Slider/Carousel: Swiper, Slick, Owl Carousel, Revolution Slider, Smart Slider
• Form Plugin: Contact Form 7, WPForms, Gravity Forms, Ninja Forms, Fluent Forms
• Page Builder: Elementor, Divi, Bricks, GenerateBlocks (terutama script frontend)
• Analytics: Google Analytics (gtag.js), Google Tag Manager (gtm.js), Meta Pixel
• Menu & Navigasi: Mega menu script, mobile menu toggle
• jQuery & jQuery Migrate: Banyak plugin masih bergantung pada jQuery
• WooCommerce Cart Fragments: Jika ditunda, keranjang belanja tidak akan update

Baca juga artikel terkait: WooCommerce Core Web Vitals Kamu Merah? Cart Fragments & Checkout Ini Biangnya.

Implementasi: Plugin vs Kode Manual

Kamu bisa menerapkan delay JavaScript lewat plugin populer atau lewat kode manual. Kedua jalur punya kelebihan:

Lewat Plugin (Rekomendasi untuk 90% Kasus)

FlyingPress, WP Rocket, dan Perfmatters punya fitur Delay JavaScript bawaan. Caranya sama: cari kolom eksklusi, masukkan keyword dari nama script (bukan URL penuh), lalu uji di mode incognito.

Contoh eksklusi di FlyingPress atau WP Rocket:

swiper
slick
owl
jquery
contact-form-7
wpforms
gtag
gtm
fbq
cart-fragments
elementor
divi

Setelah menambahkan eksklusi, selalu uji form, slider, dan analytics di halaman utama. Buka console browser. Kalau ada error JavaScript, itu tanda ada script yang belum dieksklusi.

Lewat Kode Manual (Untuk Kontrol Penuh)

Kalau kamu frontend developer yang ingin kontrol penuh, tambahkan atribut defer langsung di functions.php tema:

add_filter('script_loader_tag', function($tag, $handle) {
    // Script yang TIDAK didefer (whitelist)
    $skip = ['jquery', 'jquery-core', 'contact-form-7', 'wpforms'];
    
    if (!in_array($handle, $skip)) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 2);

Pendekatan ini hanya menambahkan defer, bukan delay interaksi. Untuk delay berbasis interaksi, kamu perlu plugin atau kode JavaScript custom yang mendengarkan event scroll, click, atau touchstart. Tapi hati-hati: delay berbasis interaksi bisa memperburuk INP jika terlalu banyak script menunggu.

Uji, Ukur, Ulangi

Setelah konfigurasi delay/defer selesai, jangan langsung tutup laptop. Lakukan tiga pengujian ini:

1. Fungsionalitas: Buka semua halaman penting (homepage, landing page, checkout, form kontak). Pastikan slider jalan, form aktif, analytics merekam.
2. PageSpeed Insights: Cek skor mobile dan desktop. Kalau masih ada peringatan “Reduce JavaScript execution time,” artinya kamu belum menunda cukup banyak script.
3. Web Vitals via Chrome UX Report: Pantau INP dan LCP di CrUX dashboard Search Console. Penundaan yang berlebihan kadang menaikkan INP.

Baca juga: LCP Sudah Hijau? INP WordPress-mu Bisa Diam-diam Bikin Ranking Bocor.

Kesimpulan: Jangan Korbankan Fungsionalitas Demi Skor

Delay JavaScript itu seperti rem tangan. Dipakai dengan benar, aman dan terkendali. Dipakai sembarangan, situsmu berhenti total. Pendekatan “whitelist first” adalah jalan tengah terbaik: kamu tetap mendapat skor PageSpeed hijau tanpa kehilangan slider, form, atau data analytics.

Mulai dari audit script. Buat daftar whitelist. Uji bertahap. Skor PageSpeed memang penting, tapi konversi dan pengalaman pengguna adalah tujuan akhirnya.

FAQ: JavaScript Delay/Defer di WordPress