Defer JavaScript

Defer JavaScript là gì?

Defer JavaScript là kỹ thuật hoãn tải và thực thi các tập tin JavaScript không cần thiết trong giai đoạn hiển thị đầu tiên của trang web. Khi dùng thuộc tính defer trên thẻ <script>, trình duyệt sẽ tải script song song với việc phân tích HTML, nhưng chỉ chạy nó sau khi cây DOM đã được xây dựng xong — và theo thứ tự xuất hiện trong mã nguồn.

Khác với async (chạy ngay khi tải xong, không đảm bảo thứ tự), defer giữ nguyên thứ tự thực thi, phù hợp với các script phụ thuộc lẫn nhau — ví dụ: thư viện jQuery rồi mới đến plugin sử dụng jQuery.

Tại sao quan trọng trong SEO?

Google xếp hạng trang dựa một phần vào trải nghiệm người dùng — đặc biệt là các chỉ số Core Web Vitals như First Contentful Paint (FCP) và Time to Interactive (TTI). Nếu JavaScript chặn render (render-blocking scripts) tải sớm và thực thi ngay, trình duyệt phải dừng việc hiển thị nội dung để xử lý script — làm chậm FCP và kéo dài thời gian người dùng tương tác được với trang.

Khi áp dụng defer đúng cách:

• FCP cải thiện rõ rệt vì trình duyệt không bị chặn khi vẽ nội dung đầu tiên;
• TTI giảm nhờ đẩy các script nặng ra sau giai đoạn render ban đầu;
• Trang đạt điểm cao hơn trên PageSpeed Insights và Lighthouse — yếu tố gián tiếp ảnh hưởng đến thứ hạng SEO, nhất là trên thiết bị di động.

Lưu ý: Defer không thay thế tối ưu hóa khác như loại bỏ script thừa, nén hoặc dùng CDN — mà là một phần trong chuỗi tối ưu hóa hiệu năng toàn diện.

Cách hoạt động

Khi trình duyệt gặp thẻ <script defer src="script.js"></script> trong quá trình phân tích HTML:

1. Nó tiếp tục phân tích và xây dựng DOM bình thường — không dừng lại;
2. Tải script.js song song với việc phân tích HTML (không chặn mạng);
3. Sau khi DOM hoàn tất (DOMContentLoaded), trình duyệt thực thi script theo thứ tự khai báo trong HTML;
4. Script không được phép thay đổi DOM trước khi DOM sẵn sàng — nên không gây lỗi render.

Chỉ áp dụng được cho script ngoài (có thuộc tính src). Script nội tuyến (<script>...</script>) không hỗ trợ defer.

Hướng dẫn thực hiện

Dưới đây là 3 cách phổ biến để áp dụng defer trên WordPress — từ thủ công đến tự động:

1. Thêm thủ công qua theme hoặc child theme: Chỉnh sửa file functions.php, dùng hàm wp_script_add_data():

   function add_defer_to_scripts() {
       if (!is_admin()) {
           wp_script_add_data('jquery', 'defer', true);
           wp_script_add_data('contact-form-7', 'defer', true);
       }
   }
   add_action('wp_enqueue_scripts', 'add_defer_to_scripts');

   Lưu ý: Chỉ áp dụng cho script đã đăng ký bằng wp_register_script() hoặc wp_enqueue_script().

2. Dùng plugin chuyên dụng: Các plugin như WP Rocket, Autoptimize hoặc LiteSpeed Cache có tùy chọn bật “Defer JavaScript” trong phần cài đặt hiệu năng. Plugin sẽ tự động thêm defer vào các script không phải critical — nhưng cần kiểm tra kỹ sau khi bật để tránh lỗi giao diện.
3. Loại bỏ script không cần thiết trước: Dùng plugin như Asset CleanUp để vô hiệu hóa script theo từng trang. Đây là bước nền tảng: nếu script không cần thì không nên defer — mà nên loại bỏ hoàn toàn.

Lỗi thường gặp

Một số vấn đề phổ biến khi áp dụng defer, kèm cách khắc phục:

• Lỗi giao diện hoặc chức năng bị mất: Xảy ra khi script cần chạy ngay lúc DOM chưa sẵn sàng (ví dụ: script điều khiển thanh menu cố định, script đo lường custom). Cách khắc phục: Loại trừ script đó khỏi defer bằng cách kiểm tra tên handle và không gọi wp_script_add_data() cho nó — hoặc dùng thuộc tính async nếu thứ tự không quan trọng.
• Script chạy sai thứ tự: Khi defer nhiều script phụ thuộc lẫn nhau nhưng plugin tự động không giữ đúng thứ tự khai báo. Cách khắc phục: Kiểm tra thứ tự enqueue trong code, hoặc chuyển sang quản lý thủ công bằng wp_enqueue_script() với tham số $deps rõ ràng.
• Không thấy hiệu quả trên PageSpeed Insights: Có thể do script đã được defer nhưng vẫn tải quá nặng, hoặc có script khác chưa defer. Cách khắc phục: Dùng công cụ Web.dev Measure để kiểm tra chi tiết thời gian tải và thực thi từng script.

Ví dụ thực tế

Một website bán hàng WordPress dùng WooCommerce, có các script sau:

Tên script	Handle trong WordPress	Có nên defer?	Ghi chú
jQuery	jquery	Có	Không cần chạy ngay — hầu hết plugin đều đợi DOM sẵn sàng
WooCommerce cart fragments	wc-cart-fragments	Có	Chỉ cập nhật giỏ hàng sau khi trang đã load — an toàn để defer
Google Analytics 4 (gtag)	gtag hoặc script nội tuyến	Không	Script nội tuyến không hỗ trợ defer; nên dùng async hoặc triển khai qua Google Tag Manager
Slider Revolution	revmin	Tùy trường hợp	Một số phiên bản yêu cầu chạy trước khi DOM hiển thị — kiểm tra tài liệu chính thức

Câu hỏi thường gặp

Defer JavaScript có làm chậm chức năng trang không?

Không — nếu áp dụng đúng. Defer chỉ hoãn thực thi, không hoãn tải. Tất cả script vẫn được tải song song với HTML. Tuy nhiên, nếu script nào đó bắt buộc phải chạy trước khi DOM hiển thị (rất hiếm), thì defer có thể gây lỗi. Luôn kiểm tra kỹ trên môi trường staging trước khi áp dụng lên trang chính.

Defer khác gì so với async?

Defer đảm bảo thứ tự thực thi và chạy sau khi DOM hoàn tất. Async chạy ngay khi tải xong, không đảm bảo thứ tự và có thể chạy trước hoặc sau DOMContentLoaded. Với script phụ thuộc (như jQuery → plugin jQuery), defer là lựa chọn an toàn hơn.

Có nên defer mọi script trên WordPress?

Không. Chỉ defer những script không cần thiết trong giai đoạn render đầu tiên. Script critical (ví dụ: script điều khiển header cố định, script hiển thị cookie consent) nên giữ nguyên hoặc dùng async. Việc defer bừa bãi có thể gây lỗi giao diện hoặc tương tác — cần kiểm tra từng script dựa trên vai trò và phụ thuộc.