Defer vs async — so sánh 2 attribute script cho WordPress

defer và async là 2 thuộc tính trên thẻ <script> kiểm soát thời điểm trình duyệt thực thi JS mà không chặn parse HTML. Chọn sai thuộc tính gây lỗi script hoặc làm FCP không cải thiện được.

Vấn đề với script mặc định

Thẻ <script src="..."> không có thuộc tính chặn parser HTML theo mặc định. Trình duyệt dừng parse, tải JS, thực thi xong rồi mới tiếp tục parse — gây trễ FCP và LCP trực tiếp.

Một file JS 100KB qua mạng 4G có thể chặn hiển thị 500–800ms. defer và async giải quyết điểm chặn này — mỗi thuộc tính theo cách riêng.

defer — thực thi sau khi DOM parse xong

Trình duyệt tải JS song song với parse HTML. Thực thi SAU khi DOM parse xong, ngay trước sự kiện DOMContentLoaded.

Nhiều script defer thực thi theo đúng thứ tự khai báo trong HTML.

Phù hợp cho: script cần truy cập DOM, script có phụ thuộc lẫn nhau, plugin và theme JS trong WordPress.

async — thực thi ngay khi tải xong

Trình duyệt tải JS song song với parse HTML. Thực thi NGAY KHI tải xong — bất kể HTML đã parse xong chưa.

Nhiều script async thực thi không theo thứ tự (ai tải xong trước thực thi trước).

Phù hợp cho: script độc lập, không cần DOM, không có phụ thuộc với script khác.

So sánh defer và async — 7 khía cạnh

Dòng thời gian thực thi — hình dung rõ hơn

Khuyến nghị theo loại script cho shop WordPress

Triển khai trong WordPress

WordPress core không hỗ trợ defer/async trong hàm wp_enqueue_script(). Cần thêm thuộc tính qua hook script_loader_tag hoặc dùng plugin.

4 phương pháp triển khai

Ví dụ filter thủ công

// Thêm defer/async thủ công vào functions.php
add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {
  $defer_scripts = [ 'theme-slider', 'theme-menu', 'wc-cart-fragments' ];
  $async_scripts  = [ 'google-analytics', 'facebook-pixel' ];

  if ( in_array( $handle, $defer_scripts ) ) {
    return str_replace( '<script ', '<script defer ', $tag );
  }
  if ( in_array( $handle, $async_scripts ) ) {
    return str_replace( '<script ', '<script async ', $tag );
  }
  return $tag;
}, 10, 3 );

Kết hợp với preload để tăng hiệu quả

defer/async loại bỏ điểm chặn — nhưng trình duyệt vẫn phát hiện script muộn trong quá trình parse. Preload script quan trọng giúp tải song song từ sớm hơn.

Pattern preload kết hợp defer

<!-- Preload để tải sớm, defer để không chặn -->
<link rel="preload" href="/theme.js" as="script">
<script src="/theme.js" defer></script>

Đọc thêm về preload và prefetch resource hint và cách kết hợp với CSS quan trọng để loại bỏ toàn bộ điểm chặn hiển thị.

Checklist triển khai defer/async cho shop WordPress

1. Mở DevTools → Network → lọc JS — xem script nào load ở thứ tự cao nhất.
2. Liệt kê tất cả script đang enqueue: wp_print_scripts() trong theme hoặc dùng Query Monitor.
3. Phân loại từng script: cần DOM không? Có phụ thuộc với script khác không?
4. Script theo dõi độc lập (Analytics, Pixel) — phân loại riêng để thêm async.
5. Giữ jQuery mặc định (không thêm defer/async) nếu có plugin phụ thuộc.
6. Thêm defer cho toàn bộ theme JS tùy biến và plugin cần DOM.
7. Thêm async cho script theo dõi (Analytics, Pixel) và font loader.
8. Test kỹ trên staging trước: kiểm tra console không có lỗi X is not defined.
9. Đo lại FCP và LCP qua Google PageSpeed Insights sau khi triển khai.
10. Kết hợp với tách bundle cho frontend Next.js nếu có.

Bài liên quan

• Preload và prefetch — tải tài nguyên sớm hơn
• CSS quan trọng — loại bỏ điểm chặn CSS
• Tách bundle theo route — giảm JS tải ban đầu
• FCP vs LCP — sự khác biệt và cách tối ưu

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

Web22 audit toàn bộ script đang load, phân loại và triển khai defer/async đúng chuẩn — bao gồm test staging và đo FCP trước/sau. Xem dịch vụ tối ưu hiệu năng Core Web Vitals để bắt đầu.