Tìm hiểu về gợi ý tài nguyên rel=tìm nạp trước và cách sử dụng gợi ý này.
Nghiên cứu cho thấy thời gian tải nhanh hơn dẫn đến 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 trong 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 xuống cho các trang đó.
Hướng dẫn này giải thích cách đạt được điều đó bằng <link rel=prefetch>. Đây là gợi ý về tài nguyên cho phép bạn triển khai việc tìm nạp trước một cách dễ dàng và hiệu quả.
Cải thiện cách thao tác bằng rel=prefetch
Khi thêm <link rel=prefetch> vào một trang web, trình duyệt sẽ yêu cầu trình duyệt tải toàn bộ trang hoặc một số tài nguyên (như tập lệnh hoặc tệp CSS) mà người dùng có thể cần trong tương lai xuống:
<link rel="prefetch" href="/articles/" as="document">
Gợi ý prefetch tốn thêm byte cho những 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 tin rằng người dùng sẽ cần đến chúng. 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 thông tin đó bằng Network Information API.
Có nhiều cách để xác định đường liên kết nào cần 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ó những thư viện sử dụng các phương pháp tinh vi hơn. Điều này sẽ đượ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 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 nữa — 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 thanh toán trở thành 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 tính năng này có thể cải thiện hầu hết các chỉ số hiệu suất. Thời gian đến 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 bộ nhớ đệm. Vì TTFB sẽ thấp hơn, nên các chỉ số theo thời gian tiếp theo cũng thường thấp hơn, bao gồm cả Nội dung lớn nhất hiển thị (LCP) và Nội dung đầu tiên hiển thị (FCP).
Tìm nạp trước thành phần tĩnh
Tìm nạp trước nội dung tĩnh, như tập lệnh hoặc biểu định kiểu, khi có thể dự đoán được các mục 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 tài sản đó được chia sẻ trên nhiều trang.
Ví dụ: Netflix tận dụng thời gian mà người dùng dành trên các trang đã đăng xuất để tìm nạp trước React (được dùng sau khi người dùng đăng nhập). Nhờ đó, họ đã giảm Thời gian tương tác xuống 30% cho các lần điều hướng trong tương lai.
Tác động của việc tìm nạp trước thành phần tĩnh đối với các chỉ số về hiệu suất sẽ phụ thuộc vào tài nguyên đượ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 của 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 trên 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 chúng có thể 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à một 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 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 khi tập lệnh này được mạng yêu cầu tìm nạp 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 với nội dung hiển thị tiếp theo (INP) của một trang. 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. Đồng thời, quá trình kết xuất 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ữ trên web chưa được trang hiện tại sử dụng có thể giúp loại bỏ việc thay đổi bố cục. Trong trường hợp
font-display: swap;được sử dụng, 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à không còn phải 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ữ trên 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 tải 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 sử dụng kỹ thuật này, bạn có thể áp dụng 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 một hộp thoại chứa bộ chọn biểu tượng cảm xúc, bạn có thể chia trang đó thành ba phần JavaScript: trang chủ, hộp thoại và bộ chọn. Trang chủ và hộp thoại có thể được tải ban đầu nhưng có thể tải bộ chọn 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 những phầ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ì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 ý về tài nguyên, điều này có thể mang lại những cải tiến nhỏ trong một số trường hợp.
Tìm nạp trước mô-đun JavaScript bằng các chú thích kỳ diệu của 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à một số người dùng nhất định 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 qua 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 người dùng "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 này có trong bộ nhớ đệm tại thời điểm người dùng gửi biểu mẫu. webpack cho phép sử dụng các nhận xét kỳ diệu 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ì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ể nhận được phản hồi nhanh hơn cho các tương tác phụ thuộc vào các 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 lượt tương tác, điều này có thể mang lại lợi ích cho INP của trang.
Nhìn chung, quá trình tìm nạp trước cũng tính đến mức độ ưu tiên tài nguyên tổng thể. Khi tìm nạp trước một tài nguyên, quá trình này sẽ diễn ra ở 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 của trang hiện tại.
Tìm nạp trước thông minh bằng đường liên kết nhanh và Answer.js
Bạn cũng có thể triển khai quá trình tìm nạp trước thông minh hơn với các thư viện sử dụng prefetch nâng cao:
- Quicklink (đường liên kết nhanh) sử dụng Intersection Observer API để phát hiện thời điểm đường liên kết xuất hiện trong khung nhìn và tìm nạp trước các tài nguyên được liên kết trong thời gian rảnh. Bật mí thêm cho Quicklink: đường liên kết nhanh chưa đến 1 KB!
- Guess.js sử dụng các báo cáo phân tích để xây dựng mô hình dự đoán dùng để tìm nạp trước thông minh chỉ những thông tin mà người dùng có khả năng cần.
Cả Quicklink và giả tạo đều sử dụng Network Information API (API Thông tin mạng) để tránh tìm nạp 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 nâng cao
Gợi ý về tài nguyên không phải là hướng dẫn bắt buộc. Trình duyệt sẽ quyết định xem có thực thi hay không và khi nào các gợi ý này được thực thi.
Bạn có thể sử dụng phương thức tìm nạp trước nhiều lần trong 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 tài nguyên đó ở trạng thái 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 sẵn, thì tải trong quá trình tải sẽ được trình duyệt chọn làm quá trình đ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 ở 'Thấp nhất' ưu tiên, vì vậy các tài nguyên được tìm nạp trước không cạnh tranh để giành băng thông với các tài nguyên được yêu cầu trong trang hiện tại.
Các tệp đã tìm nạp trước được lưu trữ trong Bộ nhớ đệm HTTP hoặc bộ nhớ đệm của 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 Chrome, các tài nguyên được lưu giữ trong 5 phút, sau đó các quy tắc Cache-Control thông thường đối với 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í làm cho 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, khiến đây là 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 dùng đến, vì vậy hãy lưu ý khi sử dụng kỹ thuật này; chỉ thực hiện việc đó khi cần thiết và tốt nhất là chỉ thực hiện trên các mạng nhanh.