SEO WordPress

Async JavaScript

Tải script không đồng bộ mà không chặn parsing HTML, phù hợp với script độc lập như analytics.

3 lượt xem Cập nhật: 26/05/2026

Async JavaScript là gì?

Async JavaScript là cách tải và thực thi tập lệnh JavaScript mà không làm chậm quá trình phân tích (parsing) tài liệu HTML. Khi thêm thuộc tính async vào thẻ <script>, trình duyệt sẽ tải file script song song với việc đọc HTML, và ngay khi tải xong, nó sẽ dừng parsing để chạy script — nhưng chỉ áp dụng cho script độc lập, không phụ thuộc vào DOM hay các script khác.

Khác với defer, async không đảm bảo thứ tự thực thi: nếu có nhiều script async, chúng có thể chạy theo thứ tự tải xong — không phải thứ tự xuất hiện trong mã nguồn.

Tại sao quan trọng trong SEO?

Tốc độ tải trang là yếu tố xếp hạng trực tiếp của Google từ năm 2018 (Core Web Vitals), đặc biệt là chỉ số First Contentful Paint (FCP) và Largest Contentful Paint (LCP). Script JavaScript chặn parsing làm chậm hiển thị nội dung đầu tiên — gây tăng thời gian chờ người dùng và giảm tỷ lệ giữ chân.

Với các script như Google Analytics, Facebook Pixel, hoặc tag quản trị — vốn không cần DOM sẵn sàng hay tương tác với HTML — việc dùng async giúp:

  • Giảm thời gian chặn parsing HTML xuống gần bằng 0
  • Cải thiện điểm LCP trung bình từ 0,3–0,8 giây (tùy cấu hình máy chủ và mạng)
  • Tránh cảnh báo "Eliminate render-blocking resources" trong PageSpeed Insights
  • Không ảnh hưởng đến khả năng thu thập dữ liệu vì script vẫn chạy đầy đủ

Lưu ý: Nếu dùng sai (ví dụ áp dụng async cho script phụ thuộc vào jQuery hoặc DOM), trang có thể lỗi chức năng — điều này gián tiếp ảnh hưởng SEO do tăng tỷ lệ thoát.

Cách hoạt động

Khi trình duyệt gặp thẻ <script async src="analytics.js"></script>:

  1. Nó tiếp tục phân tích HTML bình thường
  2. Đồng thời bắt đầu tải analytics.js trên luồng riêng (không chặn)
  3. Khi file tải xong, trình duyệt tạm dừng parsing, thực thi script ngay lập tức
  4. Sau khi thực thi xong, parsing HTML tiếp tục

Quá trình này khác biệt rõ với:

  • Script thường (không có thuộc tính): chặn parsing cho đến khi tải & thực thi xong
  • Script có defer: tải song song, nhưng đợi parsing HTML xong mới thực thi — theo đúng thứ tự khai báo

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

Dưới đây là các cách triển khai async an toàn trên WordPress:

1. Thêm thủ công qua theme (file header.php)

Mở file wp-content/themes/[tên-theme]/header.php, tìm vị trí trước thẻ </head> hoặc ngay sau <body>, rồi chèn:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-ABC123"></script>

→ Áp dụng cho script không phụ thuộc vào DOM hoặc thư viện khác.

2. Dùng hook wp_enqueue_script() (khuyến nghị)

Thêm đoạn sau vào file functions.php của child theme:

function enqueue_async_analytics() {
  wp_enqueue_script('google-analytics', 'https://www.googletagmanager.com/gtag/js?id=G-ABC123', array(), null, true);
  wp_script_add_data('google-analytics', 'async', true);
}
add_action('wp_enqueue_scripts', 'enqueue_async_analytics');

Lưu ý: Tham số thứ 5 của wp_enqueue_script() là $in_footer. Đặt true giúp đưa script xuống cuối <body>, kết hợp async sẽ an toàn hơn.

3. Dùng plugin hỗ trợ

Các plugin như WP Rocket, Autoptimize hoặc LiteSpeed Cache đều có tùy chọn bật “Load JS asynchronously” cho từng script. Tuy nhiên: chỉ kích hoạt cho script đã kiểm tra độc lập — không bật chung cho toàn bộ.

Lỗi thường gặp

Dưới đây là 3 lỗi phổ biến và cách xử lý:

Lỗi Nguyên nhân Cách khắc phục
Script chạy lỗi “jQuery is not defined” Áp dụng async cho script phụ thuộc vào jQuery (ví dụ: custom.js gọi $(document).ready()) Dùng defer thay vì async, hoặc đặt script ở cuối <body> và không dùng thuộc tính nào
Giao diện bị nhảy (FOUC) hoặc chức năng không hoạt động Script async can thiệp vào quá trình khởi tạo DOM hoặc CSS Kiểm tra dependency bằng công cụ Async Best Practices; loại bỏ async nếu script thao tác trực tiếp với DOM lúc đang parsing
Google Analytics không gửi dữ liệu Script async tải quá nhanh, trong khi phần cấu hình (gtag config) chưa được định nghĩa Gộp cả phần tải và cấu hình vào một khối <script async>, hoặc dùng defer + đảm bảo thứ tự khai báo

Ví dụ thực tế

Một website tin tức WordPress có 3 script bên ngoài:

  • analytics.js — thu thập lượt xem, độc lập → dùng async
  • share-buttons.js — cần DOM và jQuery → dùng defer hoặc đặt cuối <body>
  • ads.js — từ đối tác quảng cáo, không phụ thuộc → dùng async

Sau khi tối ưu, tốc độ LCP cải thiện từ 3,2s → 2,4s (đo bằng WebPageTest trên thiết bị mobile 3G). Báo cáo PageSpeed Insights không còn cảnh báo “Render-blocking scripts” với 2 file đầu.

Lưu ý: Kết quả đo lường thực tế phụ thuộc vào hosting, CDN, và cấu hình cache — không phải lúc nào cũng đạt mức cải thiện như trên.

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

Async JavaScript có ảnh hưởng đến Googlebot không?

Không. Googlebot hiện nay (từ 2023) sử dụng Chromium 115+ nên hỗ trợ đầy đủ async và xử lý giống trình duyệt người dùng. Script async vẫn được thực thi và thu thập dữ liệu đầy đủ.

Có nên dùng async cho mọi script bên ngoài?

Không. Chỉ dùng cho script không phụ thuộc vào DOM, không gọi hàm từ script khác, và không yêu cầu thứ tự thực thi. Với script như jQuery, Popper.js, hoặc custom logic tương tác giao diện — cần kiểm tra dependency kỹ trước khi áp dụng.

Async và Defer khác nhau thế nào về mặt SEO?

Cả hai đều cải thiện FCP/LCP so với script thông thường. Tuy nhiên, async tối ưu hơn về thời gian tải (vì thực thi ngay khi xong), còn defer an toàn hơn với script phụ thuộc. Về mặt SEO thuần túy: nếu script không gây lỗi, hiệu quả cải thiện tốc độ là tương đương — lựa chọn phụ thuộc vào tính chất script, không phải lợi thế xếp hạng tuyệt đối.