Tìm hiểu về gợi ý tài nguyên rel=prefetch và cách sử dụng gợi ý này.
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>
, một gợi ý tài nguyên cho phép bạn triển khai tính năng tải trước một cách dễ dàng và hiệu quả.
Cải thiện tính năng điều hướng 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 toàn bộ trang hoặc 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="/articles/" as="document">
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.
Có nhiều cách để xác định đường liên kết nào cần tải trước. Cách đơn giản nhất là tìm nạp trước đường liên kết đầu tiên hoặc một vài đường liên kết đầu tiên trên trang hiện tại. Ngoài ra, cũng có những thư viện sử dụng các phương pháp phức tạp hơn. Chúng tôi sẽ giải thích về những phương pháp này ở phần sau của bài đăng này.
Trường hợp sử dụng
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ải 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, điều này khiến trang này trở thành 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ải trước cá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:
- Tính năng tìm nạp 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 xuống 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 thông qua 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 bảng 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 thông qua 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 theo yêu cầu này.
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="/articles/" as="document">
...
</head>
Thuộc tính as
giúp trình duyệt đặt đúng tiêu đề và xác định xem tài nguyên đã có trong bộ nhớ đệm hay chưa. Các giá trị mẫu cho thuộc tính này bao gồm: document
, script
, style
, font
, image
và các giá trị khác.
Bạn cũng có thể bắt đầu tải trước qua 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ìm nạp 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 chức năng 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 chức năng 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 chức năng 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" as="script" 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 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 hoặc bộ nhớ đệm (tuỳ thuộc vào việc tài nguyên có thể lưu vào bộ nhớ đệm hay không), trong một khoảng thời gian khác nhau tuỳ theo trình duyệt. Ví dụ: trong Chrome, các tài nguyên được giữ lại trong khoảng 5 phút, sau đó các quy tắc Cache-Control
thông thường cho tài nguyên sẽ được áp dụng.
Kết luận
Việc sử dụng prefetch
có thể cải thiện đáng kể thời gian tải của các thao tác điều hướng trong tương lai và thậm chí khiến các trang có vẻ như tải tức thì. prefetch
được hỗ trợ rộng rãi trong các trình duyệt hiện đại, nhờ đó trở thành một kỹ thuật hấp dẫn để cải thiện trải nghiệm điều hướng cho nhiều người dùng. 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.