Tìm hiểu về gợi ý về tài nguyên rel=tìm nạp trước và cách sử dụng.
Nghiên cứu cho thấy thời gian tải nhanh hơn giúp tỷ lệ chuyển đổi cao hơn và trải nghiệm người dùng tốt hơn. Nếu có thông tin chi tiết về cách người dùng di chuyển qua trang web của bạn và những trang họ có thể sẽ truy cập tiếp theo, bạn có thể cải thiện thời gian tải của các lần điều hướng trong tương lai bằng cách tải trước tài nguyên cho những trang đó xuống.
Hướng dẫn này giải thích cách đạt được điều đó bằng <link rel=prefetch>, một gợi ý về tài nguyên cho phép bạn triển khai việc tìm nạp trước theo cách dễ dàng và hiệu quả.
Cải thiện các thao tác di chuyển 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ộ các trang hoặc một số tài nguyên (chẳng hạn như tập lệnh hoặc tệp CSS) xuống mà người dùng có thể cần trong tương lai:
<link rel="prefetch" href="/articles/" as="document">
Gợi ý prefetch sẽ tốn thêm 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ìm nạp trước tài nguyên khi bạn chắc chắn rằng người dùng sẽ cần đến các tài nguyên đó. Cân nhắc không tìm nạp trước khi người dùng sử dụng kết nối chậm. Bạn có thể phát hiện điều này bằng API thông tin mạng.
Có nhiều cách để xác định đường liên kết nào được tìm nạp 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òn có các thư viện sử dụng phương pháp phức tạp hơn, được giải thích ở phần sau của bài đăng này.
Trường hợp sử dụng
Tìm nạp trước các trang tiếp theo
Tìm nạp trước tài liệu HTML khi các trang tiếp theo có thể dự đoán được, để khi một đường liên kết được nhấp vào, 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, việc điều hướng tiếp theo thậm chí còn dễ dàng 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 cao, nên đây là lựa chọn phù hợp để tìm nạp trước.
Mặc dù việc tìm nạp trước tài nguyên có sử dụng thêm băng thông, nhưng việc này có thể cải thiện hầu hết các chỉ số hiệu suất. Thời gian tạo 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 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 sẽ thấp hơn, bao gồm 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 như tập lệnh hoặc biểu định 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 những 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ìm nạp trước React, việc này sẽ được sử dụng sau khi người dùng đăng nhập. Nhờ đó, họ đã giảm được 30% Thời gian tương tác cho các thao tác điều hướng trong tương lai.
Ảnh hưởng của việc tìm nạp trước thành phần tĩnh đến chỉ số hiệu suất phụ thuộc vào tài nguyên đang được tìm nạp trước:
- Việc 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 biểu định kiểu có thể cải thiện cả FCP và LCP, vì thời gian mạng để tải biểu định kiểu xuống sẽ bị loại bỏ. Vì biểu định kiểu đang chặn hiển thị, nên các biểu định kiểu này 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 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 biểu định kiểu được tìm nạp trước. - Việc 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 trường hợp mạng bắt buộc phải tìm nạp trước trong quá trình điều hướng. Điều này có thể ảnh hưởng đến các chỉ số về khả năng phản hồi như Thời gian phản hồi lần tương tác đầu tiên (FID) và Lượt tương tác với nội dung hiển thị tiếp theo (INP). Trong trường hợp mã đánh dấu hiển thị trên máy khách thông qua JavaScript, LCP có thể được cải thiện thông qua việc giảm độ trễ tải tài nguyên. Ngoài ra, việc hiển thị mã đánh dấu phía máy khách có chứa phần tử LCP của trang có thể diễn ra sớm hơn.
- Việc tìm nạp trước phông chữ web chưa được trang hiện tại sử dụng có thể loại bỏ việ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 phông chữ sẽ bị loại bỏ, giúp hiển thị văn bản nhanh hơn và loại bỏ việ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 phân đoạn JavaScript theo yêu cầu
Phân tách mã theo gói JavaScript cho phép bạn ban đầu chỉ tải các phần của ứng dụng và tải từng phần phần còn lại. Nếu đang dùng kỹ thuật này, bạn có thể áp dụng quá trình tìm nạp 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 bạn có một trang chứa nút mở ra hộp thoại chứa bộ chọn biểu tượng cảm xúc, bạn có thể chia thành ba phần JavaScript: trang chủ, hộp thoại và bộ chọn. Ban đầu, trang chủ và hộp thoại có thể được tả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ìm nạp trước các phân đ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 tiêu đề phù hợp 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à khác.
Bạn cũng có thể bắt đầu tìm nạp 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ìm nạp 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ể giúp cải thiện đôi chút trong một số trường hợp.
Tìm nạp trước mô-đun JavaScript bằng chú thích kỳ diệu về gói web
webpack cho phép bạn tìm nạp 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 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 theo 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ì đợi 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 tài nguyên có sẵ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 sử dụng bình luận thần kỳ 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 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ìm nạp trước các phân đoạn theo yêu cầu có đôi chút khác biệt, nhưng nhìn chung, bạn có thể sẽ thấy phản hồi nhanh hơn cho các lượt tương tác phụ thuộc vào những phân đoạn theo yêu cầu đó, vì chúng sẽ được cung cấp ngay lập tức. Tuỳ thuộc vào bản chất của hoạt động tương tác, điều này có thể mang lại lợi ích cho INP của trang.
Nhìn chung, hoạt động tìm nạp trước cũng tính đến mức độ ưu tiên của tài nguyên tổng thể. Khi đượ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 về băng thông cho các tài nguyên cần thiết cho trang hiện tại.
Tìm nạp trước thông minh bằng Quicklink và Đo lường.js
Bạn cũng có thể triển khai quá trình tìm nạp trước thông minh hơn bằng các thư viện sử dụng prefetch nâng cao:
- Quicklink sử dụng Intersection Observer API để phát hiện thời điểm đường liên kết đi vào khung nhìn và tìm nạp trước tài nguyên được liên kết trong thời gian không hoạt động. Bật mí thêm cho bạn: đường liên kết nhanh có dung lượng chưa đến 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ìm nạp trước thông minh chỉ những gì người dùng có thể cần.
Cả lối liên kết nhanh và Đoán tên.js đều sử dụng API Thông tin mạng để tránh tìm nạp trước nếu người dùng sử dụng mạng chậm hoặc đã bật Save-Data.
Tìm nạp trước nâng cao
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 hay không, cũng như thời điểm thực thi gợi ý.
Bạn có thể sử dụng tính năng tìm nạp trước nhiều lần trên cùng một trang. Trình duyệt sẽ xếp tất cả cá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 quá trình 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 trước, thì tải trong quá trình sẽ được trình duyệt chọn làm hoạt động điều hướng (các nhà cung cấp trình duyệt khác có thể triển khai việc này theo cách khác).
Quá trình tìm nạp trước diễn ra ở mức độ ưu tiên "Thấp nhất", do đó, tài nguyên được tìm nạp trước không cạnh tranh về băng thông với 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 bộ nhớ (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 các tài nguyên Chrome được lưu giữ trong 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ể giúp 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í làm cho các trang có vẻ như tải ngay lập tức. prefetch được hỗ trợ rộng rãi trong các trình duyệt hiện đại, do đó đây là một kỹ thuật hấp dẫn giúp cải thiện trải nghiệm thao tác 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 dùng đến, vì vậy hãy chú ý khi sử dụng; chỉ thực hiện khi cần thiết và tốt nhất là chỉ thực hiện trên các mạng nhanh.