Giới thiệu

Một trong những lý do chính khiến một trang web tải chậm chính là việc tải JavaScript. Khi trình duyệt gặp thẻ <script>, nó sẽ dừng việc đọc HTML, tải file, xác thực và thực thi mã trước khi tiếp tục phân tích HTML. Điều này có thể làm chậm quá trình tải trang và ảnh hưởng đến các chỉ số Core Web Vitals, từ đó ảnh hưởng trực tiếp đến SEO và trải nghiệm người dùng.

Tin vui là có hai thuộc tính quan trọng, async và defer, cho phép chúng ta cải thiện tốc độ tải trang mà không làm giảm chức năng và hiệu suất SEO.

Cách thức hoạt động và khi nào nên sử dụng defer?

Khi bạn thêm thuộc tính defer vào thẻ <script> như sau:

<script src="script.js" defer></script>

Trình duyệt sẽ bắt đầu tải xuống script ngay lập tức, nhưng đồng thời vẫn tiếp tục xử lý HTML và xây dựng trang mà không bị dừng lại. Khi hoàn tất việc phân tích HTML và trước sự kiện DOMContentLoaded, các script sẽ được thực thi theo thứ tự mà bạn đã khai báo.

Điều này có nghĩa là quá trình tải trang sẽ không bị chặn và các script sẽ giữ đúng thứ tự thực thi. Defer là lựa chọn tốt nhất cho hầu hết các script làm phong phú giao diện (carousel, các yếu tố tương tác, hoạt ảnh...) nhưng không thiết yếu cho việc render trang.

Ví dụ thực tế

Giả sử bạn có một trang web với nhiều thành phần tương tác. Sử dụng defer cho các script này giúp trang web tải nhanh hơn mà không làm mất đi tính năng tương tác.

Cách thức hoạt động và khi nào nên sử dụng async?

Ngược lại, khi bạn sử dụng async:

<script src="script.js" async></script>

Script sẽ được tải xuống song song và ngay khi nó hoàn tất, trình duyệt sẽ dừng lại để thực thi nó. Điều này có nghĩa là các script sẽ không theo thứ tự khai báo mà theo thứ tự tải xuống.

Async là lựa chọn tốt nhất cho các script độc lập với việc render trang (ví dụ như các thẻ theo dõi analytics).

Ví dụ thực tế

Khi bạn chèn mã theo dõi Google Analytics, sử dụng async là một lựa chọn hợp lý vì nó không ảnh hưởng đến việc tải trang nhưng vẫn đảm bảo thu thập dữ liệu phân tích.

Khi nào KHÔNG nên sử dụng async và defer?

Có những trường hợp mà một script cần được tải ngay lập tức, chẳng hạn như:

• Framework chính của một SPA;
• Template tạo nội dung động phía client;
• Script điều khiển quy trình thanh toán trong eCommerce...

Trong những trường hợp này, nếu script không được tải ngay, trang web sẽ không hoạt động đúng cách. Do đó, các script này nên được giữ lại ở trạng thái chặn và không nên sử dụng defer hoặc async.

Tóm tắt

• defer: tải xuống, thực thi sau khi hoàn tất phân tích HTML, giữ đúng thứ tự cho các script phụ;
• async: tải xuống, thực thi ngay khi hoàn tất tải xuống, không giữ thứ tự khai báo cho các script độc lập.

Các thực tiễn tốt nhất

• Luôn kiểm tra hiệu suất khi sử dụng async và defer.
• Sử dụng defer cho các script cần thiết cho giao diện nhưng không thiết yếu cho rendering.
• Sử dụng async cho các script không ảnh hưởng đến trải nghiệm người dùng.

Những cạm bẫy thường gặp

• Sử dụng sai async hoặc defer có thể làm hỏng chức năng quan trọng của trang web.
• Quá nhiều script sử dụng async có thể gây ra tình trạng tải không ổn định.

Mẹo tối ưu hóa hiệu suất

• Thực hiện kiểm tra tốc độ tải trang thường xuyên để theo dõi ảnh hưởng của các thay đổi.
• Sử dụng công cụ như Google PageSpeed Insights để nhận được các gợi ý cụ thể về việc cải thiện tốc độ tải trang.

FAQ

1. defer và async có khác nhau như thế nào?

Defer đảm bảo thứ tự thực thi trong khi async không.

2. Có nên sử dụng cả hai thuộc tính trên cùng một script không?

Không, bạn chỉ nên sử dụng một trong hai thuộc tính cho mỗi script.

3. async có ảnh hưởng đến SEO không?

Nếu sử dụng đúng cách, async có thể cải thiện SEO bằng cách tăng tốc độ tải trang.

Kết luận

Việc hiểu rõ cách sử dụng async và defer sẽ giúp bạn tối ưu hóa hiệu suất trang web của mình, cải thiện SEO và trải nghiệm người dùng. Hãy thử nghiệm và theo dõi hiệu quả của bạn, và bạn sẽ thấy sự khác biệt rõ rệt trong tốc độ tải trang.