Tìm hiểu về gợi ý tài nguyên rel=prefetch và cách sử dụng gợi ý này.
Ngày xuất bản: 12 tháng 9 năm 2019, Ngày cập nhật gần đây nhất: 8 tháng 2 năm 2025
Nghiên cứu cho thấy rằng thời gian tải nhanh hơn sẽ giúp tăng tỷ lệ chuyển đổi và mang lại trải nghiệm tốt hơn cho người dùng. Nếu có thông tin chi tiết về cách người dùng di chuyển trên trang web của bạn và những trang mà họ có thể truy cập tiếp theo, bạn có thể cải thiện thời gian tải của các thao tác điều hướng trong tương lai bằng cách tải trước tài nguyên cho các trang đó.
Hướng dẫn này giải thích cách thực hiện việc đó bằng <link rel=prefetch>, cho phép bạn triển khai tính năng tải trước một cách hiệu quả.
Cải thiện hiệu suất trang web bằng rel=prefetch
Việc thêm <link rel=prefetch> vào một trang web sẽ yêu cầu trình duyệt tải một số tài nguyên (chẳng hạn như tập lệnh hoặc tệp CSS) mà người dùng có thể cần đến trong tương lai:
<link rel="prefetch" href="/css/styles.css">
Gợi ý prefetch sẽ tiêu tốn thêm vài byte cho các tài nguyên không cần thiết ngay lập tức, vì vậy, bạn cần áp dụng kỹ thuật này một cách thận trọng; chỉ tải trước tài nguyên khi bạn chắc chắn rằng người dùng sẽ cần đến chúng. Cân nhắc không tải trước khi người dùng có kết nối chậm. Bạn có thể phát hiện điều đó bằng API Thông tin mạng.
Trường hợp sử dụng
Tính năng tải trước có nhiều trường hợp sử dụng để tăng tốc độ trang web bằng cách tải trước tài nguyên.
Tải trước các trang tiếp theo
Tải trước tài liệu HTML khi có thể dự đoán các trang tiếp theo, nhờ đó khi người dùng nhấp vào một đường liên kết, trang sẽ được tải ngay lập tức.
Ví dụ: trong trang thông tin sản phẩm, bạn có thể tìm nạp trước trang cho sản phẩm phổ biến nhất trong danh sách. Trong một số trường hợp, thao tác điều hướng tiếp theo thậm chí còn dễ dự đoán hơn – trên trang giỏ hàng, khả năng người dùng truy cập vào trang thanh toán thường rất cao, vì vậy, đây là một ứng cử viên phù hợp để tải trước.
Mặc dù việc tải trước tài nguyên sẽ sử dụng thêm băng thông, nhưng nó có thể cải thiện hầu hết các chỉ số hiệu suất. Thời gian tải byte đầu tiên (TTFB) thường sẽ thấp hơn nhiều, vì yêu cầu tài liệu dẫn đến một lượt truy cập vào bộ nhớ đệm. Vì TTFB sẽ thấp hơn, nên các chỉ số dựa trên thời gian tiếp theo cũng thường thấp hơn, bao gồm cả Thời gian hiển thị nội dung lớn nhất (LCP) và Thời gian hiển thị nội dung đầu tiên (FCP).
Tìm nạp trước thành phần tĩnh
Tìm nạp trước các thành phần tĩnh, chẳng hạn như tập lệnh hoặc tệp kiểu, khi có thể dự đoán các phần tiếp theo mà người dùng có thể truy cập. Điều này đặc biệt hữu ích khi các thành phần đó được chia sẻ trên nhiều trang.
Ví dụ: Netflix tận dụng thời gian người dùng dành cho các trang đã đăng xuất để tải trước React. React sẽ được sử dụng sau khi người dùng đăng nhập. Nhờ đó, họ giảm 30% Thời gian phản hồi cho các thao tác điều hướng trong tương lai.
Ảnh hưởng của việc tải trước thành phần tĩnh đối với các chỉ số hiệu suất phụ thuộc vào tài nguyên đang được tải trước:
- Việc tải trước hình ảnh có thể làm giảm đáng kể thời gian LCP cho các phần tử hình ảnh LCP.
- Việc tìm nạp trước các tệp kiểu có thể cải thiện cả FCP và LCP, vì thời gian mạng để tải tệp kiểu sẽ bị loại bỏ. Vì các tệp kiểu đang chặn quá trình kết xuất, nên chúng có thể làm giảm LCP khi được tìm nạp trước. Trong trường hợp phần tử LCP của trang tiếp theo là hình nền CSS được yêu cầu bằng cách sử dụng thuộc tính
background-image, hình ảnh đó cũng sẽ được tìm nạp trước dưới dạng tài nguyên phụ thuộc của trang tính kiểu được tìm nạp trước. - Tính năng tìm nạp trước JavaScript sẽ cho phép quá trình xử lý tập lệnh được tìm nạp trước diễn ra sớm hơn nhiều so với khi mạng bắt buộc phải tìm nạp tập lệnh trước trong quá trình điều hướng. Điều này có thể ảnh hưởng đến Lượt tương tác đến nội dung hiển thị tiếp theo (INP) của trang. Trong trường hợp đánh dấu được hiển thị trên ứng dụng bằng JavaScript, bạn có thể cải thiện LCP bằng cách giảm độ trễ tải tài nguyên và hiển thị phía máy khách của phần đánh dấu chứa phần tử LCP của trang có thể xảy ra sớm hơn.
- Việc tải trước phông chữ web mà trang hiện tại chưa sử dụng có thể loại bỏ các thay đổi bố cục. Trong trường hợp sử dụng
font-display: swap;, khoảng thời gian hoán đổi cho phông chữ sẽ bị loại bỏ, giúp hiển thị văn bản nhanh hơn và loại bỏ các thay đổi bố cục. Nếu một trang trong tương lai sử dụng phông chữ được tìm nạp trước và phần tử LCP của trang là một khối văn bản sử dụng phông chữ web, thì LCP cho phần tử đó cũng sẽ nhanh hơn.
Tìm nạp trước các đoạn JavaScript theo yêu cầu
Tính năng phân tách mã các gói JavaScript cho phép bạn ban đầu chỉ tải một số phần của ứng dụng và tải lười phần còn lại. Nếu đang sử dụng kỹ thuật này, bạn có thể áp dụng tính năng tải trước cho các tuyến hoặc thành phần không cần thiết ngay lập tức nhưng có thể sẽ sớm được yêu cầu.
Ví dụ: nếu có một trang chứa nút mở hộp thoại có bộ chọn biểu tượng cảm xúc, bạn có thể chia trang đó thành 3 phần JavaScript – trang chủ, hộp thoại và bộ chọn. Ban đầu, bạn có thể tải trang chủ và hộp thoại, trong khi bộ chọn có thể được tải theo yêu cầu. Các công cụ như webpack cho phép bạn hướng dẫn trình duyệt tải trước các đoạn này theo yêu cầu.
Cách triển khai rel=prefetch
Cách đơn giản nhất để triển khai prefetch là thêm thẻ <link> vào <head> của tài liệu:
<head>
...
<link rel="prefetch" href="//css/styles.css">
...
</head>
Bạn cũng có thể bắt đầu tải trước bằng tiêu đề HTTP Link:
Link: </css/style.css>; rel=prefetch
Lợi ích của việc chỉ định gợi ý tải trước trong Tiêu đề HTTP là trình duyệt không cần phân tích cú pháp tài liệu để tìm gợi ý tài nguyên. Điều này có thể cải thiện một chút trong một số trường hợp.
Tải trước các mô-đun JavaScript bằng nhận xét ma thuật webpack
webpack cho phép bạn tải trước tập lệnh cho các tuyến hoặc hàm mà bạn chắc chắn rằng người dùng sẽ sớm truy cập hoặc sử dụng.
Đoạn mã sau đây tải từng phần một hàm sắp xếp từ thư viện lodash để sắp xếp một nhóm số sẽ được gửi bằng một biểu mẫu:
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Thay vì chờ sự kiện "gửi" diễn ra để tải hàm này, bạn có thể tìm nạp trước tài nguyên này để tăng khả năng có tài nguyên đó trong bộ nhớ đệm vào thời điểm người dùng gửi biểu mẫu. webpack cho phép việc đó bằng cách sử dụng nhận xét ma thuật bên trong import():
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Thao tác này sẽ yêu cầu webpack chèn thẻ <link rel="prefetch"> vào tài liệu HTML:
<link rel="prefetch" href="1.bundle.js">
Lợi ích về hiệu suất của việc tải trước các đoạn theo yêu cầu có chút khác biệt, nhưng nói chung, bạn có thể thấy phản hồi nhanh hơn đối với các lượt tương tác phụ thuộc vào các đoạn theo yêu cầu đó, vì các đoạn này sẽ có sẵn ngay lập tức. Tuỳ thuộc vào bản chất của lượt tương tác, điều này có thể mang lại lợi ích cho INP của trang.
Tính năng tìm nạp trước nói chung cũng ảnh hưởng đến việc ưu tiên tài nguyên tổng thể. Khi một tài nguyên được tìm nạp trước, tài nguyên đó sẽ được thực hiện ở mức độ ưu tiên thấp nhất có thể. Do đó, mọi tài nguyên được tìm nạp trước sẽ không cạnh tranh băng thông với các tài nguyên mà trang hiện tại cần.
Tải trước thông minh bằng quicklink và Guess.js
Bạn cũng có thể triển khai tính năng tải trước thông minh hơn bằng các thư viện sử dụng prefetch:
- quicklink sử dụng Intersection Observer API để phát hiện thời điểm các đường liên kết xuất hiện trong khung nhìn và tải trước các tài nguyên được liên kết trong thời gian rảnh. Phần thưởng: đường liên kết nhanh có kích thước dưới 1 KB!
- Guess.js sử dụng báo cáo phân tích để tạo mô hình dự đoán dùng để tải trước một cách thông minh chỉ những nội dung mà người dùng có thể cần.
Cả quicklink và Guess.js đều sử dụng Network Information API để tránh tải trước nếu người dùng đang sử dụng mạng chậm hoặc đã bật Save-Data.
Tìm nạp trước trong phần nội dung
Gợi ý tài nguyên không phải là hướng dẫn bắt buộc và trình duyệt có thể quyết định xem có thực thi gợi ý hay không và khi nào thực thi.
Bạn có thể sử dụng tính năng tải trước nhiều lần trong cùng một trang. Trình duyệt sẽ đưa tất cả gợi ý vào hàng đợi và yêu cầu từng tài nguyên khi rảnh. Trong Chrome, nếu một nội dung tìm nạp trước chưa tải xong và người dùng chuyển đến tài nguyên tìm nạp trước đã định sẵn, thì tải trong quá trình sẽ được trình duyệt chọn làm thao tác điều hướng (các nhà cung cấp trình duyệt khác có thể triển khai thao tác này theo cách khác).
Tính năng tìm nạp trước diễn ra ở mức độ ưu tiên "Thấp nhất", vì vậy, các tài nguyên được tìm nạp trước sẽ không cạnh tranh băng thông với các tài nguyên cần thiết trong trang hiện tại.
Các tệp được tìm nạp trước được lưu trữ trong Bộ nhớ đệm HTTP nếu tài nguyên có thể lưu vào bộ nhớ đệm, nếu không, tài nguyên đó sẽ bị loại bỏ và không được sử dụng.
Kết luận
Việc sử dụng prefetch có thể cải thiện đáng kể hiệu suất web của một trang web bằng cách tải trước các tài nguyên cần thiết trong tương lai. prefetch được hỗ trợ trong hầu hết các trình duyệt hiện đại. Kỹ thuật này yêu cầu tải thêm các byte có thể không được sử dụng, vì vậy, hãy lưu ý khi sử dụng kỹ thuật này; chỉ thực hiện khi cần thiết và tốt nhất là chỉ trên các mạng nhanh.