Bạn có thể 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ư được trình bày chi tiết trong bài đăng trước. Điều này có thể giúp trang tải nhanh hơn nhiều, thậm chí là ngay lập tức, nhờ đó cải thiện đáng kể Core Web Vitals 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ể rất 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 kết xuất trong một trình kết xuất riêng biệt – giống như một thẻ nền ẩn thay thế thẻ hiện tại khi được kích hoạt. Do đó, không phải lúc nào bạn cũng có thể dùng các tuỳ chọn thông thường của Công cụ cho nhà phát triển để gỡ lỗi.
Nhóm Chrome đã nỗ lực cải thiện khả năng hỗ trợ của Công cụ cho nhà phát triển trong việc gỡ lỗi 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 những công cụ này để hiểu quy tắc phỏng đoán của một trang, lý do các quy tắc đó có thể không hoạt động và thời điểm nhà phát triển có thể sử dụng các lựa chọn quen thuộc hơn trong Công cụ cho nhà phát triển và thời điểm không thể.
Giải thích về các thuật ngữ có tiền tố "trước"
Có rất nhiều thuật ngữ "trước" gây nhầm lẫn, vì vậy, chúng tôi sẽ bắt đầu bằng việc giải thích các thuật ngữ sau:
- Tìm nạp trước: tìm nạp trước một 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, thay vì lựa chọn
<link rel="prefetch">tương tự nhưng 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: bước này vượt xa hơn việc tìm nạp trước và thực sự kết xuất toàn bộ trang như thể người dùng đã chuyển đến trang đó, nhưng giữ trang đó trong một tiến 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ự chuyển đến đó. Xin nhắc lại, tài liệu này liên quan đến phiên bản Speculation Rules API mới hơn, thay vì tuỳ chọn
<link rel="prerender">cũ (không còn thực hiện kết xuất trước toàn bộ). - Thao tác điều hướng suy đoán: 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 theo quy tắc suy đoán.
- Tải trước: một thuật ngữ quá tải có thể đề cập đến một số công nghệ và quy trình, bao gồm
<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 sẽ không được đề cập ở đây, nhưng thuật ngữ này được đưa vào để phân biệt rõ ràng với thuật ngữ "điều hướng suy đoán".
Quy tắc suy đoán cho prefetch
Bạn có thể dùng quy tắc suy đoán để tìm nạp trước tài liệu của thao tác điều hướng tiếp theo. Ví dụ: khi chèn 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"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Việc sử dụng quy tắc phỏng đoán để tìm nạp trước hoạt động điều hướng có một số lợi thế so với cú pháp <link rel="prefetch"> cũ, chẳng hạn như API biểu cảm 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 prefetch quy tắc suy đoán
Bạn có thể xem các lượt tìm nạp trước do quy tắc suy đoán kích hoạt trong bảng điều khiển Mạng theo cách tương tự như các lượt 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, như có thể thấy trong cột Type (Loại). Các tài nguyên này được tìm nạp ở mức độ ưu tiên Lowest vì chúng dành cho các thao tác điều hướng trong tương lai và Chrome ư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 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 suy đoán
Một mục Tải suy đoán mới đã được thêm vào bảng điều khiển Ứng dụng của Chrome DevTools, trong mục 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 suy đoán, trong đó liệt kê trạng thái kết xuất trước của trang hiện tại.
- Quy tắc liệt kê tất cả các nhóm quy tắc được tìm thấy trên trang hiện tại, được chỉ định dưới dạng URL hoặc thẻ quy tắc (nếu có).
- Suy đoán liệt kê tất cả URL được tìm nạp trước và kết xuất trước từ các nhóm quy tắc.
Thẻ Speculations (Suy đoán) xuất hiện trong ảnh chụp màn hình trước đó và chúng ta có thể thấy trang mẫu này có một bộ quy tắc suy đoán duy nhất để tìm nạp trước 3 trang. Hai trong số các lần tìm nạp trước đó đã thành công và một 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 đường liên kết Status (Trạng thái) để chuyển đến thẻ Speculations (Suy đoán) được lọc theo nhóm quy tắc đó.
Thẻ Speculations (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), nhóm quy tắc mà các URL đó bắt nguồn (vì có thể có nhiều nhóm quy tắc trên một trang) và trạng thái của từng suy đoán:
Phía trên các URL, bạn có thể sử dụng trình đơn thả xuống để hiển thị URL từ tất cả các nhóm quy tắc hoặc chỉ hiển thị URL từ một nhóm quy tắc cụ thể. Bên dưới là danh sách tất cả URL. Khi nhấp vào một URL, bạn sẽ thấy 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 không thành công của trang next3.html (trang này không tồn tại nên trả về mã 404, tức là mã trạng thái HTTP không phải 2xx).
Thẻ tóm tắt Lượt tải suy đoán cho thấy báo cáo Trạng thái tải suy đoán cho trang này để cho biết liệu trang này có sử dụng tính năng tìm nạp trước hoặc kết xuất trước hay không.
Đố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 chuyển đến trang đó:
Suy đoán không khớp
Khi quá trình điều hướng xảy ra từ một trang có quy tắc suy đoán không dẫn đến việc sử dụng tính năng tìm nạp trước hoặc kết xuất trước, một phần bổ sung của thẻ sẽ cho thấy 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.
Ví dụ: ở đây, chúng ta đã chuyển đến next4.html, nhưng chỉ có next.html, next2.html hoặc next3.html là được tìm nạp trước, vì vậy, chúng ta có thể thấy rằng URL 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 suy đoán rất hữu ích để gỡ lỗi chính các quy tắc suy đoán và tìm lỗi cú pháp trong JSON.
Đối với các yêu cầu tìm nạp trước, bảng điều khiển Mạng có thể là một 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ể thấy lỗi 404 cho quá trình tìm nạp trước tại đây:
Tuy nhiên, thẻ Tải suy đoán sẽ hữu ích hơn nhiều đối với các quy tắc suy đoán kết xuất trước, được đề cập 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"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Tập hợp quy tắc này kích hoạt quá trình tải và hiển thị đầy đủ các trang được chỉ định (tuân theo một số quy định hạn chế nhất định). Điều này có thể mang lại trải nghiệm tải tức thì, mặc dù tốn thêm tài nguyên.
Tuy nhiên, không giống như các yêu cầu tìm nạp trước, bạn không thể xem các yêu cầu này trong bảng điều khiển Mạng vì chúng được tìm nạp và kết xuất trong một tiến trình kết xuất riêng biệt trong Chrome. Điều này khiến thẻ Tải 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 thẻ Tải suy đoán
Bạn có thể dùng chính màn hình Tải suy đoán cho các quy tắc suy đoán kết xuất trước, như minh hoạ trong một trang minh hoạ tương tự cố gắng kết xuất trước thay vì tìm nạp trước 3 trang:
Tại đây, chúng ta lại thấy một trong ba URL không thể kết xuất trước và nhà phát triển có thể xem thông tin chi tiết cho từng URL trong thẻ Speculations (Suy đoán) bằng cách nhấp vào đường liên kết 2 Ready, 1 Failure (2 URL đã sẵn sàng, 1 URL không thành công).
Trong Chrome 121, chúng tôi đã ra mắt tính năng hỗ trợ 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ác đường liên kết cùng nguồn 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ả các đường liên kết có cùng nguồn gốc, ngoại trừ những đường liên kết bắt đầu bằng /not-safe-to-prerender làm đề xuất kết xuất trước.
Thao tác này cũng đặt prerender eagerness thành moderate, tức là các thao tác điều hướng sẽ được kết xuất trước khi người dùng di chuột qua đường liên kết (trên máy tính), dựa trên khung nhìn (trên thiết bị di động) hoặc được nhấp vào.
Có các quy tắc tương tự như quy tắc này trên trang web minh hoạ quy tắc suy đoán. Việc sử dụng mục Tải suy đoán mới trên trang web này cho thấy mức độ 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à Chưa được kích hoạt vì quy trình kết xuất trước cho các trang 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 sẽ 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 về việc kết xuất trước, bao gồm tối đa 2 lần kết xuất trước cho mức độ háo hức moderate, vì vậy, sau khi di chuột qua đường liên kết thứ 3, chúng ta sẽ thấy lý do không thành công cho URL đó:
Gỡ lỗi prerender bằng các bảng điều khiển khác của Công cụ cho nhà phát triển
Không giống như các trang được tìm nạp trước, các trang đã được kết xuất trước sẽ không xuất hiện trong các quy trình kết xuất 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 kết xuất trong trình kết xuất ngầm 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 ở 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 đượ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 Mạng, nơi bạn có thể thấy trang được yêu cầu là trang được kết xuất trước:
Khi xem tiêu đề HTTP cho các tài nguyên này, chúng ta có thể thấy tất cả các tài nguyên này đề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, nơi chúng ta thấy phần tử <h1> dành cho trang được kết xuất trước:
Hoặc bảng điều khiển Console, nơi bạn có thể xem nhật ký bảng điều khiển do trang được kết xuất trước phát 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 (có thể xem được như mô tả trong phần trước).
Ngoài ra, sau khi người dùng kích hoạt một trang được kết xuất trước bằng cách chuyển đến trang đó, thẻ Tải suy đoán sẽ cho biết 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, thì bạn sẽ nhận được nội dung giải thích về lý do:
Ngoài ra, giống như trường hợp tìm nạp trước, khi bạn 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, công cụ này sẽ cố gắng cho bạn biết lý do URL không khớp với những URL được đề cập trong quy tắc suy đoán của trang trước đó trong thẻ Tải suy đoán:
Kết luận
Trong bài đăng này, chúng tôi đã trình bày nhiều cách mà nhà phát triển có thể gỡ lỗi các quy tắc suy đoán tìm nạp trước và kết xuất trước. Nhóm vẫn đang tiếp tục phát triển công cụ cho các quy tắc phỏng đoán và chúng tôi rất mong nhận được đề xuất của nhà phát triển về những cách khác có thể giúp gỡ lỗi API mới thú vị này. Chúng tôi khuyến khích nhà phát triển báo cáo sự cố trên Trình theo dõi sự cố 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 thu nhỏ của Nubelson Fernandes trên Unsplash.