Resource Preload là gì? Cách tối ưu tốc độ tải trang bằng kỹ thuật Preload

Resource Preload là một kỹ thuật tối ưu hiệu suất web cho phép trình duyệt tải trước các tài nguyên quan trọng ngay từ giai đoạn parsing HTML, trước khi chúng thực sự được yêu cầu. Cơ chế này giúp giảm độ trễ mạng, cải thiện thời gian tải trang và nâng cao trải nghiệm người dùng. Đối với các nhà phát triển web, hiểu rõ resource preload không chỉ đơn thuần là biết cách thêm thẻ link rel="preload", mà còn nắm bắt chiến lược lập lịch tải tài nguyên ưu tiên.

Bản chất của Resource Preload và cách trình duyệt xử lý

Khi trình duyệt tải một trang web, nó phải phân tích HTML, CSS, JavaScript, hình ảnh, font chữ và nhiều loại tài nguyên khác. Quá trình này diễn ra tuần tự qua nhiều giai đoạn: DOM parsing, CSSOM xây dựng, layout, paint. Resource preload can thiệp vào giai đoạn đầu tiên – ngay khi trình duyệt bắt đầu đọc thẻ <link rel="preload"> trong <head>, nó sẽ ngay lập tức gửi yêu cầu HTTP để tải tài nguyên đó với mức ưu tiên cao, bất kể tài nguyên này có xuất hiện trong DOM hay không.

Tài nguyên được preload sẽ được lưu trong cache của trình duyệt và sẵn sàng sử dụng khi cần. Điều này đặc biệt hiệu quả đối với các tài nguyên mà trình duyệt phát hiện muộn, chẳng hạn như font chữ trong CSS, script được inject động, hoặc hình ảnh nền trong stylesheet.

Phân biệt Resource Preload với các kỹ thuật tối ưu khác

Có nhiều cách để kiểm soát thứ tự tải tài nguyên. Điểm khác biệt chính: preload có mức ưu tiên cao nhất và buộc trình duyệt phải tải ngay lập tức, trong khi prefetch ưu tiên thấp dùng cho các tài nguyên cần cho trang sau.

Cách triển khai Resource Preload trong thực tế

Cú pháp cơ bản của thẻ rel=”preload”

Một thẻ preload hoàn chỉnh cần chỉ định href (đường dẫn tài nguyên) và thuộc tính as (loại tài nguyên). Ví dụ phổ biến:

Preload font chữ: <link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Preload hình ảnh: <link rel="preload" href="/images/hero.webp" as="image" media="(min-width: 768px)">
Preload script: <link rel="preload" href="/js/main.js" as="script">
Preload stylesheet: <link rel="preload" href="/css/critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Thuộc tính as và type

Giá trị as rất quan trọng vì nó quyết định mức ưu tiên và cách trình duyệt xử lý tài nguyên. Các giá trị hợp lệ bao gồm: font, image, script, style, audio, video, document, fetch, worker, embed, object. Nếu không chỉ định as, trình duyệt sẽ không thực hiện preload (trừ một số trình duyệt cũ tự động suy luận).

Thuộc tính type giúp trình duyệt kiểm tra MIME type trước khi tải. Ví dụ type="font/woff2" hoặc type="image/webp".

Kết hợp với media queries

Không, bạn phải thêm thẻ <link rel="preload"> vào HTML. Một số framework như Next.js, Gatsby có tích hợp sẵn cơ chế preload tự động cho tài nguyên static.

Làm sao biết preload đã hoạt động?

Mở Chrome DevTools, tab Network, lọc theo Initiator: Preload. Resource được preload sẽ xuất hiện với “Initiator” là “Preload”. Bạn cũng có thể kiểm tra timing trong Waterfall.

Có thể preload API response (fetch) không?

Có, sử dụng as="fetch" và kết hợp với crossorigin nếu cần. Tuy nhiên, preload fetch thường không mang lại lợi ích lớn vì JavaScript sẽ quyết định thời điểm gọi API. Chỉ nên dùng cho API trả về dữ liệu tĩnh (ví dụ cấu hình).

Preload có giống với HTTP/2 push không?

Không. HTTP/2 Push do server chủ động gửi, preload là client hint. Preload được hỗ trợ rộng rãi hơn và không gây vấn đề over-push như HTTP/2 Push. Nhiều trang đã chuyển từ HTTP/2 Push sang preload.

Có nên preload nhiều hơn 5 resource không?

Không khuyến khích. Mỗi preload tạo một HTTP request mới, tăng tải cho network. Tập trung vào 3-5 resource quan trọng nhất cho LCP và FCP.

Safari có hỗ trợ resource preload không?

Safari bắt đầu hỗ trợ từ phiên bản 15. Trên các phiên bản cũ, preload chỉ hoạt động với một số loại resource nhất định. Nên kiểm tra lại bằng caniuse.com.

Kết luận

Resource preload là một công cụ mạnh mẽ trong tay các nhà phát triển web. Khi được sử dụng đúng cách, nó giúp giảm đáng kể thời gian tải trang, cải thiện các chỉ số Core Web Vitals và trải nghiệm người dùng. Tuy nhiên, nếu lạm dụng hoặc thiếu kiến thức, preload có thể phản tác dụng, gây lãng phí tài nguyên và làm chậm trang. Hãy luôn bắt đầu với phân tích hiệu suất của chính website bạn, xác định chính xác các tài nguyên cần tăng tốc, sau đó triển khai preload một cách có chọn lọc. Kiểm tra thường xuyên trên nhiều trình duyệt và thiết bị để đảm bảo chiến lược preload mang lại hiệu quả tối ưu.

Xem thêm:

Bản chất của Resource Preload và cách trình duyệt xử lý

Phân biệt Resource Preload với các kỹ thuật tối ưu khác