Defer và Async là gì là câu hỏi then chốt khi bạn đối mặt với cảnh báo “Eliminate render-blocking resources” trên Google PageSpeed Insights. Trong cấu trúc website hiện đại, JavaScript mặc định thường làm gián đoạn quá trình đọc dữ liệu của trình duyệt, khiến người dùng phải chờ đợi màn hình trắng trong thời gian dài. Việc cấu hình sai thứ tự thực thi script không chỉ gây ra các lỗi logic nghiêm trọng mà còn khiến chỉ số LCP và TBT sụt giảm đáng kể.
Bài viết này sẽ phân tích sâu cơ chế vận hành, sự khác biệt về mặt kỹ thuật và lộ trình triển khai chuẩn SEO. Bạn sẽ biết chính xác khi nào nên dùng từng thuộc tính để đạt được điểm hiệu năng tuyệt đối cho dự án của mình.
Defer và Async là gì? Định nghĩa kỹ thuật chuẩn xác
Defer và Async là gì? Về cơ bản, đây là hai thuộc tính (attribute) được thêm vào thẻ <script> trong HTML để thay đổi cách trình duyệt tải xuống và thực thi tệp JavaScript. Ở trạng thái mặc định (Classic Script), khi trình duyệt gặp một thẻ script, nó sẽ tạm dừng việc phân tích cú pháp HTML (HTML Parsing) để tải file JS về và chạy ngay lập tức. Quá trình tạm dừng này tạo ra hiện tượng “render-blocking”, làm chậm thời gian hiển thị nội dung cho người dùng.
Theo tài liệu từ MDN Web Docs, thuộc tính Async cho phép script được tải song song với quá trình parse HTML và sẽ thực thi ngay khi việc tải xuống hoàn tất. Ngược lại, thuộc tính Defer cũng hỗ trợ tải song song nhưng sẽ kìm hãm việc thực thi cho đến khi trình duyệt đã phân tích xong toàn bộ cấu trúc DOM của trang web. Mục tiêu cuối cùng của cả hai là giải phóng luồng chính (Main Thread), giúp trang web hiển thị nhanh hơn và cải thiện các chỉ số đo lường trải nghiệm người dùng (Core Web Vitals).
Cách Defer và Async hoạt động
Để nắm rõ sự khác biệt, chúng ta cần quan sát hành vi của trình duyệt qua từng giai đoạn: Tải (Download) và Thực thi (Execution).
Cơ chế của Classic Script (Mặc định)
Khi trình duyệt gặp <script src="...">, quá trình xây dựng DOM bị chặn đứng hoàn toàn. Trình duyệt phải đợi tệp JS tải xong, sau đó thực thi xong, rồi mới tiếp tục đọc phần HTML còn lại. Đây là nguyên nhân chính khiến website tải chậm nếu bạn đặt quá nhiều script ở phần <head>.
Cơ chế của Async Script
Thuộc tính async mang tính chất “độc lập”. Trình duyệt sẽ không đợi mà tải file JS song song với việc đọc HTML. Tuy nhiên, một khi file JS tải xong, trình duyệt sẽ tạm dừng parse HTML để thực thi script ngay lập tức. Sau khi chạy xong, nó mới tiếp tục công việc phân tích HTML. Do đó, thứ tự thực thi của các file async sẽ phụ thuộc vào việc file nào tải xong trước, không theo thứ tự bạn đặt trong code.
Cơ chế của Defer Script
Thuộc tính defer được coi là giải pháp tối ưu nhất cho mã nguồn ứng dụng. Trình duyệt tải file JS song song nhưng tuyệt đối không ngắt quãng quá trình parse HTML. Scripts chỉ được thực thi sau khi toàn bộ tài liệu HTML đã được xử lý xong và ngay trước sự kiện DOMContentLoaded. Đặc biệt, các script có thuộc tính defer sẽ luôn thực thi theo đúng thứ tự mà chúng xuất hiện trong tệp HTML.
Ngưỡng hiệu năng tốt, trung bình, kém
Việc lựa chọn sai thuộc tính có thể dẫn đến việc các chỉ số Core Web Vitals bị ảnh hưởng tiêu cực. Dưới đây là bảng so sánh ngưỡng tác động kỹ thuật:
| Tiêu chí so sánh | Classic Script | Async Script | Defer Script |
| Download | Chặn Parsing | Song song | Song song |
| Execution | Ngay khi gặp | Ngay khi tải xong | Sau khi Parse HTML |
| Thứ tự thực thi | Theo thứ tự | Không đảm bảo | Đảm bảo thứ tự |
| DOMContentLoaded | Chờ thực thi | Có thể chặn | Xảy ra sau thực thi |
| Tác động TBT | Rất cao | Trung bình | Thấp |
Dựa vào bảng này, chúng ta thấy rằng Defer mang lại sự ổn định cao nhất cho cấu trúc trang web, trong khi Async phù hợp hơn cho các tác vụ độc lập không phụ thuộc vào dữ liệu khác.
Cách kiểm tra Defer và Async của website
Bạn cần thường xuyên đo lường để xác định xem các tệp JavaScript có đang gây nghẽn luồng chính hay không thông qua các công cụ chuyên dụng.
Dùng Google PageSpeed Insights
Hãy nhập URL website và quan sát mục “Eliminate render-blocking resources”. Nếu danh sách hiển thị nhiều tệp .js nằm trong thẻ head mà không có thuộc tính defer hoặc async, đó là lúc bạn cần can thiệp kỹ thuật. Công cụ này cũng chỉ ra lượng thời gian tiết kiệm được nếu bạn chuyển đổi sang các thuộc tính tải không chặn.
Dùng Chrome DevTools
Mở trình duyệt Chrome, nhấn F12 và chuyển sang tab Network. Hãy quan sát cột “Waterfall” để thấy quá trình tải script. Ngoài ra, bạn nên dùng tab Coverage để kiểm tra lượng JavaScript không được sử dụng. Nếu một file JS lớn đang chặn render nhưng thực tế chỉ dùng 10% mã nguồn, việc kết hợp Defer và Code Splitting là bắt buộc.
Dùng Lighthouse (Chrome)
Chạy báo cáo Lighthouse trực tiếp trên máy tính để kiểm tra chỉ số Total Blocking Time (TBT). Nếu TBT vượt ngưỡng 200 ms, điều đó chứng tỏ JavaScript đang thực thi quá sớm hoặc quá nặng, khiến trình duyệt không kịp phản hồi các tương tác của người dùng. Kiểm tra các script bên thứ ba và áp dụng async cho chúng là một giải pháp nhanh chóng.
Cách cải thiện JavaScript hiệu quả
Để tối ưu hóa Web Performance toàn diện, hãy áp dụng chiến lược phân loại script một cách khoa học.
Cách 1 — Sử dụng Defer cho các Script phụ thuộc lẫn nhau
Đối với các file JavaScript chính của website (như logic giao diện, xử lý form, hay các thư viện cần tương tác với DOM), bạn nên luôn luôn sử dụng thuộc tính defer.
HTML
<script src="jquery.min.js" defer></script>
<script src="main-app.js" defer></script>
Việc này đảm bảo jquery.min.js luôn chạy trước main-app.js, tránh các lỗi “variable not defined” thường gặp khi dùng async.
Cách 2 — Sử dụng Async cho các Script bên thứ ba độc lập
Các dịch vụ như Google Analytics, Facebook Pixel, hay Chat Widget không cần can thiệp vào cấu trúc hiển thị chính của website. Bạn nên sử dụng async để chúng tải và chạy ngay khi có thể mà không ảnh hưởng đến thứ tự thực thi của mã nguồn chính.
HTML
<script src="https://www.google-analytics.com/analytics.js" async></script>
Cách 3 — Tối ưu hóa thứ tự tải với Resource Hints
Đối với các script cực kỳ quan trọng (Critical JS) cần thực thi ngay, thay vì dùng async, hãy cân nhắc sử dụng preload kết hợp với thẻ script ở cuối trang. Điều này giúp trình duyệt ưu tiên tải tệp tin sớm nhất nhưng vẫn không chặn quá trình hiển thị ban đầu.
HTML
<link rel="preload" href="critical.js" as="script">
Defer và Async là gì ảnh hưởng SEO thế nào?
Trong lĩnh vực SEO, tốc độ phản hồi trang web là một tín hiệu xếp hạng quan trọng. JavaScript đóng vai trò trung tâm trong việc cải thiện chỉ số Interaction to Next Paint (INP) – thước đo khả năng phản hồi của trang web khi người dùng tương tác.
Khi bạn sử dụng Defer hoặc Async đúng cách, bạn đang trực tiếp giảm bớt gánh nặng cho CPU của thiết bị người dùng. Một website có JavaScript được tối ưu sẽ có chỉ số LCP tốt hơn, vì trình duyệt có thể tập trung tài nguyên để hiển thị hình ảnh hoặc văn bản quan trọng sớm nhất. Googlebot cũng có thể bò trườn và phân tích nội dung nhanh hơn khi không bị kẹt bởi các script nặng nề. Một trải nghiệm mượt mà không chỉ làm hài lòng người dùng mà còn giúp website của bạn giữ vững vị thế trên kết quả tìm kiếm.
Câu hỏi thường gặp về Defer và Async là gì
Khi nào thì nên dùng Defer thay vì Async?
Bạn nên dùng Defer cho mọi script cần tương tác với cấu trúc giao diện (DOM) hoặc có sự phụ thuộc lẫn nhau về thứ tự thực thi. Defer đảm bảo scripts chỉ chạy sau khi trang web đã dựng xong khung, giúp tránh lỗi và tối ưu hóa thời gian hiển thị nội dung chính cho người dùng.
Async có làm chậm quá trình parse HTML không?
Có. Mặc dù Async tải file song song nhưng nó sẽ tạm dừng việc parse HTML để thực thi ngay khi tải xong. Nếu file JS đó lớn và thực thi lâu, người dùng vẫn sẽ gặp tình trạng trang web bị đơ giữa chừng. Vì vậy, chỉ nên dùng Async cho các script nhẹ và độc lập.
Làm sao cải thiện thứ tự script nhanh nhất?
Cách nhanh nhất là rà soát toàn bộ thẻ script trong phần head. Hãy chuyển các script không quan trọng xuống cuối trang hoặc thêm thuộc tính defer. Đối với các trang WordPress, sử dụng các plugin tối ưu hóa như Asset CleanUp hoặc WP Rocket sẽ tự động hóa việc thêm defer cho bạn.
Kết luận
Việc làm chủ kiến thức Defer và Async là gì là bước đi bắt buộc để đạt được hiệu suất website đỉnh cao trong năm 2026. Hãy ưu tiên sử dụng defer cho mã nguồn ứng dụng để bảo vệ luồng chính và đảm bảo tính đúng đắn của logic. Đồng thời, áp dụng async một cách linh hoạt cho các dịch vụ bên thứ ba để tối đa hóa tốc độ tải song song. Sự kết hợp thông minh giữa hai thuộc tính này không chỉ giúp website đạt điểm số Core Web Vitals ấn tượng mà còn mang lại trải nghiệm người dùng vượt trội.
Đọc tiếp: Google Fonts ảnh hưởng đến Web như thế nào?
Tham khảo nguồn tham khảo chính thức tại: web.dev/efficient-javascript-loading
