Bạn có thể sử dụng quy tắc suy đoán để tìm nạp trước và kết xuất trước các thao tác điều hướng trang tiếp theo như đã nêu chi tiết trong bài đăng trước. Điều này có thể cho phép tải trang nhanh hơn nhiều (hoặc thậm chí là ngay lập tức), cải thiện đáng kể Các chỉ số quan trọng về trang web cho những thao tác điều hướng trang bổ sung này.
Việc gỡ lỗi các quy tắc suy đoán có thể khó khăn. Điều này đặc biệt đúng với các trang được kết xuất trước, vì các trang này được hiển thị trong một trình kết xuất riêng biệt – giống như một thẻ nền ẩn thay thế cho thẻ hiện tại khi được kích hoạt. Do đó, không phải lúc nào bạn cũng dùng các tuỳ chọn Công cụ cho nhà phát triển thông thường để gỡ lỗi.
Nhóm Chrome đã và đang nỗ lực để tăng cường hỗ trợ Công cụ cho nhà phát triển nhằm gỡ lỗi cho các quy tắc suy đoán. Trong bài đăng này, bạn sẽ thấy tất cả các cách sử dụng các công cụ này để hiểu các quy tắc suy đoán của trang, lý do tại sao chúng có thể không hoạt động và thời điểm nhà phát triển có thể sử dụng các tùy chọn Công cụ cho nhà phát triển quen thuộc hơn — và trường hợp nào không.
Giải thích về các thuật ngữ "pre-"
Có rất nhiều thuật ngữ "trước" dễ bị nhầm lẫn, vì vậy, hãy bắt đầu với việc giải thích về các thuật ngữ này:
- Tìm nạp trước: tìm nạp trước tài nguyên hoặc tài liệu để cải thiện hiệu suất trong tương lai. Bài đăng này đề cập đến việc tìm nạp trước tài liệu bằng Speculation Rules API (API Quy tắc suy đoán), thay vì tuỳ chọn tương tự nhưng
<link rel="prefetch">cũ hơn thường được dùng để tìm nạp trước tài nguyên phụ. - Kết xuất trước: quá trình này vượt xa việc tìm nạp trước và thực sự hiển thị toàn bộ trang như thể người dùng đã điều hướng đến trang đó, nhưng vẫn giữ cho quá trình này ở quy trình kết xuất nền ẩn sẵn sàng để sử dụng nếu người dùng thực sự điều hướng đến đó. Xin nhắc lại, tài liệu này liên quan đến phiên bản mới hơn của Speculation Rules API (API Quy tắc suy đoán) thay vì tuỳ chọn
<link rel="prerender">cũ (không còn kết xuất trước đầy đủ). - Suy đoán điều hướng: thuật ngữ chung cho các tuỳ chọn tìm nạp trước và kết xuất trước mới được kích hoạt bởi các quy tắc suy đoán.
- Tải trước: một thuật ngữ về tình trạng quá tải có thể đề cập đến một số công nghệ và quy trình, bao gồm cả
<link rel="preload">, trình quét tải trước và tải trước điều hướng của trình chạy dịch vụ. Những mục này không được đề cập ở đây, nhưng thuật ngữ này sẽ được đưa vào để phân biệt rõ ràng với thuật ngữ "suy đoán điều hướng".
Quy tắc suy đoán cho prefetch
Quy tắc suy đoán có thể dùng để tìm nạp trước tài liệu của hoạt động điều hướng tiếp theo. Ví dụ: khi chèn tệp JSON sau đây vào một trang, next.html và next2.html sẽ được tìm nạp trước:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Việc sử dụng quy tắc suy đoán cho hoạt động tìm nạp trước điều hướng có một số ưu điểm so với cú pháp <link rel="prefetch"> cũ, chẳng hạn như API có tính biểu đạt cao hơn và kết quả được lưu trữ trong bộ nhớ đệm của bộ nhớ thay vì bộ nhớ đệm của ổ đĩa HTTP.
Gỡ lỗi quy tắc suy đoán prefetch
Bạn có thể xem các nội dung tìm nạp trước được kích hoạt bởi các quy tắc suy đoán trong bảng điều khiển Network (Mạng), theo cách tương tự như các lần tìm nạp khác:
Hai yêu cầu được đánh dấu màu đỏ là các tài nguyên được tìm nạp trước, có thể hiển thị trong cột Type (Loại). Các trang này được tìm nạp ở mức độ ưu tiên Lowest vì chúng sẽ được ưu tiên điều hướng trong tương lai, đồng thời Chrome sẽ ưu tiên tài nguyên của trang hiện tại.
Khi nhấp vào một trong các hàng, bạn cũng sẽ thấy tiêu đề HTTP Sec-Purpose: prefetch. Đây là cách có thể xác định các yêu cầu này ở phía máy chủ:
Gỡ lỗi prefetch bằng các thẻ Tải theo suy đoán
Một phần Tải theo suy đoán mới đã được thêm vào bảng điều khiển Ứng dụng của Công cụ của Chrome cho nhà phát triển, trong phần Dịch vụ nền, để hỗ trợ gỡ lỗi các quy tắc suy đoán:
Có 3 thẻ trong phần này:
- Tải theo suy đoán liệt kê trạng thái được kết xuất trước của trang hiện tại.
- Quy tắc liệt kê tất cả các bộ quy tắc được tìm thấy trên trang hiện tại.
- Suy đoán liệt kê tất cả URL được tìm nạp trước và URL được kết xuất trước từ các bộ quy tắc.
Thẻ Suy đoán được hiển thị trong ảnh chụp màn hình trước đó, và chúng ta có thể thấy trang ví dụ này có một bộ quy tắc suy đoán để tìm nạp trước 3 trang. 2 trong số những lượt tìm nạp trước đó thành công và 1 lần không thành công. Bạn có thể nhấp vào biểu tượng bên cạnh Bộ quy tắc để chuyển đến nguồn của bộ quy tắc trong bảng điều khiển Phần tử. Ngoài ra, bạn có thể nhấp vào liên kết Trạng thái để đưa đến thẻ Suy đoán đã lọc theo bộ quy tắc đó.
Thẻ Suy đoán liệt kê tất cả URL mục tiêu cùng với hành động (tìm nạp trước hoặc kết xuất trước), bộ quy tắc đến từ đó (vì có thể có nhiều URL trên một trang) và trạng thái của mỗi suy đoán:
Phía trên URL, bạn có thể sử dụng trình đơn thả xuống để hiển thị URL từ tất cả các bộ quy tắc hoặc chỉ URL từ một bộ quy tắc cụ thể. Bên dưới là tất cả URL. Khi nhấp vào một URL, bạn sẽ nhận được thông tin chi tiết hơn.
Trong ảnh chụp màn hình này, chúng ta có thể thấy lý do xảy ra lỗi cho trang next3.html (không tồn tại và do đó trả về 404, đây là mã trạng thái HTTP không phải 2xx).
Thẻ tóm tắt Tải theo suy đoán cho thấy báo cáo Trạng thái tải theo suy đoán cho trang này để cho biết liệu quá trình tìm nạp trước hoặc kết xuất trước đã được sử dụng cho trang này hay chưa.
Đối với trang được tìm nạp trước, bạn sẽ thấy thông báo thành công khi trang đó được điều hướng đến:
Suy đoán không trùng khớp
Khi quá trình điều hướng diễn ra từ một trang có quy tắc suy đoán không dẫn đến việc tìm nạp trước hoặc kết xuất trước đang được sử dụng, một phần bổ sung của thẻ sẽ hiển thị thêm thông tin chi tiết về lý do URL không khớp với bất kỳ URL suy đoán nào. Điều này rất hữu ích cho việc phát hiện lỗi chính tả trong các quy tắc suy đoán của bạn.
Ví dụ: ở đây chúng ta chuyển đến next4.html, nhưng chỉ next.html, next2.html hoặc next3.html là giá trị tìm nạp trước, do đó có thể thấy rằng quy tắc này không hoàn toàn khớp với bất kỳ quy tắc nào trong số 3 quy tắc đó.
Thẻ Tải theo suy đoán rất hữu ích khi gỡ lỗi chính các quy tắc suy đoán và tìm mọi lỗi cú pháp trong JSON.
Đối với bản thân quá trình tìm nạp trước, bảng điều khiển Network (Mạng) có thể là nơi quen thuộc hơn. Đối với ví dụ về lỗi tìm nạp trước, bạn có thể xem lỗi 404 cho quá trình tìm nạp trước tại đây:
Tuy nhiên, thẻ Tải theo suy đoán hữu ích hơn nhiều trong việc kết xuất trước các quy tắc suy đoán. Các quy tắc này sẽ được đề cập trong phần tiếp theo.
Quy tắc suy đoán cho prerender
Quy tắc suy đoán kết xuất trước tuân theo cú pháp giống như quy tắc suy đoán tìm nạp trước. Ví dụ:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Bộ quy tắc này kích hoạt việc tải và hiển thị các trang được chỉ định (tuân theo một số hạn chế nhất định). Điều này có thể mang lại trải nghiệm tải ngay lập tức, mặc dù có thêm chi phí tài nguyên.
Tuy nhiên, không giống như các lượt tìm nạp trước, bạn sẽ không thấy những lượt tìm nạp trước này trong bảng điều khiển Network (Mạng) vì những lượt tìm nạp này được tìm nạp và hiển thị trong một quá trình hiển thị riêng biệt trên Chrome. Điều này khiến thẻ Tải theo suy đoán trở nên quan trọng hơn trong việc gỡ lỗi các quy tắc suy đoán kết xuất trước.
Gỡ lỗi prerender bằng các thẻ Tải theo suy đoán
Bạn có thể sử dụng cùng một màn hình Tải theo suy đoán cho các quy tắc suy đoán kết xuất trước như được minh hoạ với một trang minh hoạ tương tự sẽ cố gắng kết xuất trước, thay vì tìm nạp trước 3 trang:
Ở đây, chúng ta lại thấy rằng một trong ba URL không thể kết xuất trước và nhà phát triển có thể nhận thông tin chi tiết cho mỗi URL trong tab Suy đoán bằng cách nhấp vào liên kết 2 Sẵn sàng, 1 không thành công.
Trong Chrome 121, chúng tôi đã ra mắt tính năng hỗ trợ các quy tắc tài liệu. Điều này cho phép trình duyệt chọn các URL này từ cùng các liên kết gốc trên trang, thay vì liệt kê một nhóm URL cụ thể:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
Ví dụ này chọn tất cả đường liên kết gốc giống nhau, ngoại trừ những đường liên kết bắt đầu bằng /not-safe-to-prerender làm kết quả kết xuất trước.
Thao tác này cũng đặt kết xuất trước eagerness thành moderate, nghĩa là các thao tác điều hướng sẽ được kết xuất trước khi di chuột hoặc nhấp vào đường liên kết.
Trang web minh hoạ này có các quy tắc tương tự như sau. Việc sử dụng phần Tải theo suy đoán mới trên trang web này sẽ cho thấy tính hữu ích của thẻ mới này vì tất cả URL đủ điều kiện mà trình duyệt tìm thấy trên trang đều được liệt kê:
Trạng thái là Không được kích hoạt vì quá trình kết xuất trước cho các mục này chưa bắt đầu. Tuy nhiên, khi di chuột qua các đường liên kết, chúng ta thấy trạng thái thay đổi khi mỗi URL được kết xuất trước:
Chrome đã đặt giới hạn đối với số lượt kết xuất trước, bao gồm cả tối đa 2 lượt kết xuất trước đối với mức độ mong muốn moderate. Vì vậy, sau khi di chuột qua đường liên kết thứ 3, chúng tôi thấy lý do không thành công đối với URL đó:
Gỡ lỗi prerender bằng các bảng điều khiển Công cụ cho nhà phát triển khác
Không giống như tìm nạp trước, các trang được kết xuất trước sẽ không xuất hiện trong quy trình hiển thị hiện tại trong bảng điều khiển Công cụ cho nhà phát triển như bảng điều khiển Mạng vì các trang này được hiển thị trong trình kết xuất hậu trường của riêng chúng.
Tuy nhiên, giờ đây, bạn có thể chuyển đổi trình kết xuất mà bảng điều khiển Công cụ cho nhà phát triển sử dụng bằng trình đơn thả xuống trong trình đơn thả xuống ở trên cùng bên phải hoặc bằng cách chọn một URL ở phần trên cùng của bảng điều khiển rồi chọn Kiểm tra:
Trình đơn thả xuống này (và giá trị đã chọn) cũng sẽ được chia sẻ trên tất cả các bảng điều khiển khác, chẳng hạn như bảng điều khiển Network (Mạng), nơi bạn có thể thấy trang đang được yêu cầu là trang được kết xuất trước:
Nhìn vào tiêu đề HTTP của các tài nguyên này, chúng ta có thể thấy tất cả đều được đặt bằng tiêu đề Sec-Purpose: prefetch;prerender:
Hoặc bảng điều khiển Elements (Phần tử), nơi bạn có thể xem nội dung trang, như trong ảnh chụp màn hình sau đây, trong đó chúng ta thấy phần tử <h1> là dành cho trang được kết xuất trước:
Hoặc bảng điều khiển, nơi bạn có thể thấy nhật ký bảng điều khiển do trang được kết xuất trước đưa ra:
Gỡ lỗi các quy tắc suy đoán trên trang được kết xuất trước
Các phần trước thảo luận về cách gỡ lỗi các trang được kết xuất trước trên trang bắt đầu quá trình kết xuất trước. Tuy nhiên, các trang được kết xuất trước cũng có thể cung cấp thông tin gỡ lỗi bằng cách thực hiện lệnh gọi phân tích hoặc ghi nhật ký vào bảng điều khiển (bạn có thể xem thông tin này như mô tả trong phần trước).
Ngoài ra, sau khi một trang được kết xuất trước được kích hoạt khi người dùng chuyển đến trang đó, thẻ Tải theo suy đoán sẽ cho thấy trạng thái này và liệu trang đó có được kết xuất trước thành công hay không. Nếu không thể kết xuất trước, hãy giải thích lý do tại sao đó lại được cung cấp:
Ngoài ra, như trường hợp tìm nạp trước, việc di chuyển từ một trang có quy tắc suy đoán không khớp với trang hiện tại sẽ cố gắng cho bạn biết lý do các URL không khớp với các URL được đề cập trong quy tắc suy đoán của trang trước trong thẻ Tải theo suy đoán:
Kết luận
Trong bài đăng này, chúng tôi đã hướng dẫn bạn nhiều cách để nhà phát triển có thể gỡ lỗi cho quá trình tìm nạp trước và kết xuất trước các quy tắc suy đoán. Nhóm vẫn đang tiếp tục xây dựng công cụ cho các quy tắc suy đoán và chúng tôi muốn nghe đề xuất từ các nhà phát triển về những cách khác sẽ hữu ích để gỡ lỗi API mới thú vị này. Nhà phát triển nên nêu vấn đề trên công cụ theo dõi lỗi của Chrome đối với mọi yêu cầu về tính năng hoặc lỗi phát hiện được.
Xác nhận
Hình ảnh Thumbail của Nubelson Fernandes trên Unsplash.