Technical SEO

Async Attribute

Thuộc tính script HTML cho phép tải và thực thi script không đồng bộ, không chặn render nhưng thứ tự thực thi không đảm bảo.

2 lượt xem Cập nhật: 30/05/2026

Async Attribute là gì?

Async Attribute là một thuộc tính HTML được thêm vào thẻ <script> để chỉ thị trình duyệt tải và thực thi tập lệnh JavaScript không đồng bộ — tức là không chặn quá trình hiển thị trang (render blocking). Khi dùng async, trình duyệt sẽ tải script song song với việc phân tích HTML, và ngay khi tải xong, script sẽ được thực thi ngay lập tức — bất kể thứ tự xuất hiện trong mã nguồn hay trạng thái của DOM.

Thuộc tính này chỉ áp dụng cho các script bên ngoài (có thuộc tính src), không dùng được với script nội tuyến (<script>...</script>).

Tại sao quan trọng trong SEO?

Async Attribute ảnh hưởng trực tiếp đến tốc độ tải trang — một yếu tố xếp hạng chính thức của Google từ năm 2010 và trở thành tín hiệu trong Core Web Vitals từ 2021. Khi script chặn render (render-blocking), trình duyệt phải tạm dừng xây dựng cây hiển thị (render tree) cho đến khi script được tải và xử lý xong. Điều này làm chậm thời điểm người dùng thấy nội dung (First Contentful Paint – FCP) và thời điểm trang tương tác được (Time to Interactive – TTI).

Các công cụ đo lường như Lighthouse, PageSpeed Insights hay CrUX đều báo cáo rõ ràng về các script chặn render. Việc loại bỏ chúng bằng async giúp cải thiện điểm Core Web Vitals — đặc biệt là FCP và Largest Contentful Paint (LCP), từ đó hỗ trợ xếp hạng tốt hơn trên thiết bị di động và desktop.

Lưu ý: Async không thay thế tối ưu hóa khác như gộp file, nén, hoặc dùng CDN — mà là một phần trong chiến lược tổng thể để giảm thiểu thời gian chặn render.

Cách hoạt động

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

  1. Nó tiếp tục phân tích HTML bình thường (không dừng lại).
  2. Tải script.js song song với việc xây dựng DOM.
  3. Ngay khi file tải xong, trình duyệt dừng tạm thời việc phân tích HTML, thực thi script ngay lập tức, rồi tiếp tục phân tích.
  4. Thứ tự thực thi giữa các script có async không được đảm bảo — script nào tải xong trước thì chạy trước, bất kể thứ tự khai báo.

Điều này khác biệt rõ rệt với defer: script có defer cũng không chặn render, nhưng luôn thực thi theo đúng thứ tự khai báo và chỉ chạy sau khi HTML được phân tích xong (trước sự kiện DOMContentLoaded).

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

Để áp dụng async đúng cách:

  1. Xác định script không phụ thuộc vào DOM hoặc thứ tự thực thi: ví dụ script phân tích (Google Analytics, Meta Pixel), quảng cáo, hoặc widget độc lập.
  2. Chỉ áp dụng cho script bên ngoài: kiểm tra thẻ <script> có thuộc tính src. Không thêm async vào script nội tuyến.
  3. Loại bỏ async nếu script cần DOM sẵn sàng: ví dụ script thao tác trực tiếp với document.getElementById ngay lúc tải — vì nó có thể chạy trước khi phần tử tồn tại.
  4. Không dùng đồng thời async và defer: trình duyệt sẽ bỏ qua defer nếu async có mặt.
  5. Kiểm tra sau triển khai: dùng DevTools → tab Network → lọc JS, kiểm tra cột Start Time và End Time để xác nhận script tải song song, không chờ DOM.

Lỗi thường gặp

  • Lỗi “Cannot read property of null”: xảy ra khi script có async cố gắng truy cập phần tử DOM chưa được tạo. Cách khắc phục: chuyển sang defer, hoặc bọc logic trong hàm đợi DOMContentLoaded.
  • Script chạy sai thứ tự gây lỗi phụ thuộc: ví dụ script-b.js dùng hàm từ script-a.js, nhưng script-b.js tải nhanh hơn nên chạy trước. Cách khắc phục: dùng defer thay vì async, hoặc gộp thành một file duy nhất.
  • Thêm async vào script nội tuyến: trình duyệt bỏ qua thuộc tính này hoàn toàn. Cách khắc phục: chuyển script sang file ngoài, rồi thêm src và async.
  • Dùng async cho thư viện nền tảng (jQuery, React): có thể gây crash nếu script phụ thuộc chạy trước. Cách khắc phục: chỉ dùng async cho script độc lập; thư viện nền nên dùng defer hoặc đặt cuối <body>.

Ví dụ thực tế

Dưới đây là so sánh hai cách khai báo script phân tích:

Cách viết Tác động đến render Thứ tự thực thi Phù hợp với
<script src="ga.js"></script> Chặn render hoàn toàn Theo thứ tự khai báo Không khuyến nghị
<script async src="ga.js"></script> Không chặn render Không đảm bảo — tùy tốc độ tải Google Analytics, Meta Pixel, script quảng cáo
<script defer src="ga.js"></script> Không chặn render Đảm bảo theo thứ tự khai báo Script cần DOM, hoặc phụ thuộc lẫn nhau

Một ví dụ thực tế trên website tin tức: script tải dữ liệu quảng cáo từ bên thứ ba được thêm với async. Kết quả đo Lighthouse cho thấy FCP giảm từ 2.8s xuống còn 1.9s trên mạng 3G mô phỏng — cải thiện 32% và đạt mức “Tốt” theo tiêu chuẩn Core Web Vitals.

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

Async có làm chậm tải trang không?

Không — ngược lại, async giúp trang tải nhanh hơn bằng cách loại bỏ thời gian chờ tải script. Tuy nhiên, nếu script quá nặng hoặc có lỗi, nó vẫn có thể làm chậm giai đoạn thực thi (execution time), ảnh hưởng đến TTI. Vì vậy, cần kết hợp với nén, lazy-load và kiểm thử hiệu năng.

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

Không. Chỉ dùng cho script độc lập, không phụ thuộc vào DOM, không phụ thuộc vào script khác, và không thay đổi hành vi hiển thị ban đầu. Các script điều khiển giao diện, xử lý form, hoặc khởi tạo thư viện UI nên dùng defer hoặc đặt cuối <body>.

Async và defer khác nhau ở điểm nào?

Cả hai đều không chặn render, nhưng async thực thi ngay khi tải xong (thứ tự không đảm bảo), còn defer thực thi sau khi HTML phân tích xong và theo đúng thứ tự khai báo. Với script không phụ thuộc, async thường nhanh hơn; với script cần DOM hoặc thứ tự, defer an toàn hơn. Việc chọn giữa hai tùy trường hợp — không có lựa chọn “tốt hơn chung chung”.