Tối Ưu Hiệu Suất Frontend: Hiểu Rõ về Tài Nguyên Chặn Trong Web
Tài nguyên chặn (blocking resources) là các tệp ngăn trình duyệt hiển thị nội dung trang web cho đến khi chúng được tải về, phân tích và thực thi hoàn toàn. Những tài nguyên này ảnh hưởng đáng kể đến hiệu suất của trang web và trải nghiệm người dùng, dẫn đến hiện tượng chậm trễ trong quá trình hiển thị và giảm khả năng tương tác trên trang.
Các Loại Tài Nguyên Chặn
Có hai loại tài nguyên chặn chính mà bạn cần nắm:
1. Tài Nguyên Ngăn Chặn Render (Render Blocking)
Khái niệm: Là những tài nguyên khiến trình duyệt không thể thực hiện render giao diện của trang.
-
CSS được xem là một loại tài nguyên Render Blocking vì trình duyệt cần xác định các style sẽ được áp dụng cho các phần tử HTML trước khi chúng được hiển thị lên màn hình. Điều này có nghĩa là DOM và CSSOM phải được xây dựng hoàn thành trước khi bất kỳ nội dung nào được hiển thị.
-
Lợi ích: Mặc dù có thể gây chậm trễ, nhưng việc render blocking lại giúp ngăn ngừa hiện tượng FOUC (Flash of Unstyled Content), tức là nội dung hiển thị với style mặc định của trình duyệt trước khi có CSS. Điều này có thể tạo ra một trải nghiệm không tốt cho người dùng.
2. Tài Nguyên Ngăn Chặn Phân Tích (Parser Blocking)
Khái niệm: Là những tài nguyên làm chậm quá trình phân tích HTML của trình duyệt.
-
Thẻ script (nếu không có thuộc tính async hoặc defer) được coi là Parser Blocking. Khi trình duyệt gặp thẻ script, nó sẽ tạm dừng việc phân tích HTML cho đến khi tải và thực thi xong script đó. Bởi vì script có thể truy cập và thay đổi DOM, trình duyệt tránh việc xây dựng DOM trong khi script đang thực thi.
-
Chiến lược tối ưu: Để cải thiện tốc độ tải trang, hãy trì hoãn việc tải các script không cần thiết hoặc đặt chúng vào cuối tài liệu HTML.
Cơ Chế Preload Scanner
Để giảm thiểu tác động của tài nguyên chặn, các trình duyệt hiện đại sử dụng cơ chế Preload Scanner. Cơ chế này quét toàn bộ tệp HTML để tìm các tài nguyên quan trọng như hình ảnh, CSS và JavaScript, giúp tải xuống sớm các tài nguyên dựa trên mức độ ưu tiên. Nhờ vậy, trình duyệt có thể tải liên tiếp các tệp app.js và timing.js mà không mất quá nhiều thời gian.
Một Số Chiến Lược Tối Ưu Tài Nguyên Chặn
Để cải thiện hiệu suất trang web của bạn, hãy xem xét các chiến lược sau:
- Giảm kích thước các tệp CSS và JavaScript: Bỏ đi mã không cần thiết, minify, và compress.
- Inline CSS quan trọng: Chèn CSS quan trọng trực tiếp vào HTML để giảm thiểu số lượng yêu cầu.
- Preload tài nguyên quan trọng: Sử dụng thẻ link preload để chỉ định các tài nguyên cần tải sớm.
- Sử dụng Async và Defer cho thẻ script: Giúp trình duyệt tiếp tục phân tích HTML trong khi tải các script.
- Giảm kích thước hình ảnh: Sử dụng định dạng WebP để giảm dung lượng tệp.
Kết Luận
Bài viết này đã cung cấp cái nhìn sâu sắc về tài nguyên chặn và các chiến lược tối ưu chúng. Mong rằng những thông tin này sẽ hữu ích cho bạn trong việc cải thiện hiệu suất frontend của trang web. Đừng quên kết nối với mình trên Youtube và LinkedIn để cập nhật những bài viết hữu ích khác!
