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 lần đ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à tức thì –, giúp cải thiện đáng kể Chỉ số quan trọng chính của 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ể phức tạp. Điều này đặc biệt đúng với các trang được kết xuất trước, vì những 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 sẽ 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 sử 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 sự cố.
Nhóm Chrome đã và đang nỗ lực làm việc để tăng cường hỗ trợ Công cụ cho nhà phát triển đối với việc gỡ lỗi theo quy tắc suy đoán. Trong bài đăng này, bạn sẽ tìm hiểu 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 một 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 tuỳ chọn quen thuộc hơn trong Công cụ cho nhà phát triển (và khi nào thì không).
Giải thích về trạng thái "trước" điều khoản
Có rất nhiều cụm từ "trước" khó hiểu, nên chúng tôi sẽ bắt đầu bằng việc giải thích những điều sau:
- 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 các tài liệu bằng API Quy tắc suy đoán thay vì tuỳ chọn
<link rel="prefetch">tương tự nhưng cũ hơn thường dùng để tìm nạp trước các tài nguyên phụ. - Kết xuất trước: đây là một bước tiến xa hơn 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 giữ trang này trong quy trình kết xuất đồ hoạ 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 rằng tài liệu này liên quan đến phiên bản API Quy tắc suy đoán mới hơn của phiên bản này, thay vì tuỳ chọn
<link rel="prerender">cũ (không còn thực hiện quá trình kết xuất trước đầy đủ). - Thông tin 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ằng các quy tắc suy đoán.
- Tải trước: 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 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 các mục này với "các suy đoán điều hướng" cụm từ tìm kiếm.
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"]
}
]
}
</script>
Việc sử dụng các quy tắc suy đoán cho việc 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 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 quá trình tìm nạp trước do các 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ầ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 và có thể được nhìn thấy qua cột Type (Loại). Những trang này được tìm nạp ở mức độ ưu tiên Lowest vì chúng dành cho các thao tác sau này và Chrome sẽ ưu tiên tài nguyên của trang hiện tại.
Thao tác nhấp vào một trong các hàng cũng sẽ hiển thị tiêu đề HTTP Sec-Purpose: prefetch, đây là cách xác định những 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
Chúng tôi đã thêm một mục mới có tên là Tải theo suy đoán vào bảng điều khiển Ứng dụng của Chrome Công cụ cho nhà phát triển, trong mục Dịch vụ nền, để hỗ trợ các quy tắc suy đoán gỡ lỗi:
Có ba thẻ trong phần này:
- Tải 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ó trên trang hiện tại.
- Thông tin 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 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 duy nhất để tìm nạp trước 3 trang. Hai trong số những 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ạnh Bộ quy tắc, bạn có thể nhấp vào biểu tượng để đưa bạ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 Trạng thái để chuyển đến thẻ Dự đ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ắt nguồn của tập hợp quy tắc nào (vì có thể có nhiều URL trên một trang) và trạng thái của từng 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ỉ các URL từ bộ quy tắc cụ thể. Bên dưới phần đó, tất cả URL đều được liệt kê. 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 trang next3.html không tồn tại (không tồn tại và do đó trả về mã 404 – mã trạng thái HTTP không phải 2xx).
Thẻ tóm tắt, Tải theo suy đoán, hiển thị báo cáo Trạng thái tải theo suy đoán cho trang này để cho biết liệu có sử dụng quá trình tìm nạp trước hoặc kết xuất trước cho trang này hay không.
Đối với trang được tìm nạp trước, bạn sẽ thấy một thông báo thành công khi trang đó được điều hướng tới:
Những suy đoán chưa thể hiện được
Khi quá trình điều hướng xảy ra trên một trang có các quy tắc suy đoán không dẫn đến việc sử dụng quá trình tìm nạp trước hoặc kết xuất trước, 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 để phát hiện lỗi chính tả trong quy tắc suy đoán của bạ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à giá trị tìm nạp trước. Vì vậy, chúng ta có thể thấy quy tắc này không khớp với bất kỳ quy tắc nào trong 3 quy tắc đó.
Các thẻ Tải theo suy đoán rất hữu ích trong việc tự gỡ lỗi các quy tắc suy đoán và tìm mọi lỗi cú pháp trong tệp JSON.
Đối với các lượt 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. Để xem ví dụ về lỗi tìm nạp trước không thành công, bạn có thể thấy mã 404 cho quá trình tìm nạp trước tại đây:
Tuy nhiên, các thẻ Tải theo suy đoán trở nên 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 quy tắc này sẽ được đề cập trong phần tiếp theo.
Quy tắc suy đoán cho prerender
Các 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 quá trình tải đầy đủ 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 tức thì – mặc dù sẽ tốn thêm chi phí tài nguyên.
Tuy nhiên, không giống như tìm nạp trước, bạn không thể nhìn 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à kết xuất trong một quy trình kết xuất riêng trên Chrome. Điều này khiến các thẻ Tải theo suy đoán trở nên quan trọng hơn để 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 các 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ạ trên trang minh hoạ tương tự khi cố gắng kết xuất trước thay vì tìm nạp trước 3 trang:
Ở đây, chúng ta 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ể lấy thông tin chi tiết về từng URL trong thẻ 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 trong tài liệu. Cách này cho phép trình duyệt chọn những đường liên kết này từ cùng một đường liên kết gốc trên trang, thay vì liệt kê một tập hợp 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 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à đề xuất kết xuất trước.
Thao tác này cũng đặt quá trình kết xuất trước eagerness thành moderate, có nghĩa là các mục điều hướng được kết xuất trước khi di chuột hoặc nhấp vào đường liên kết.
Có các quy tắc tương tự như thế này trên trang web minh hoạ về các quy tắc suy đoán. Việc sử dụng phần Tải theo suy đoán (mới) trên trang web này 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ó trong danh sách:
Trạng thái là Chưa được kích hoạt vì quá trình kết xuất trước cho những nội dung này chưa bắt đầu. Tuy nhiên, khi giữ con trỏ trên các đường liên kết, chúng ta thấy trạng thái thay đổi khi từng URL được kết xuất trước:
Chrome đã đặt giới hạn về số lượt kết xuất trước, trong đó 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 sẽ thấy nguyên nhân không thực hiện được của URL đó:
Gỡ lỗi prerender bằng các bảng điều khiển khác trong Công cụ cho nhà phát triển
Không giống như các lượt 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 kết xuất hiện tại trong các bảng điều khiển của 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 hậu trường của chính chúng.
Tuy nhiên, bạn hiệ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 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 những tài nguyên này, chúng ta có thể thấy tất cả tiêu đề đều được thiết lập bằng tiêu đề Sec-Purpose: prefetch;prerender:
Hoặc bảng điều khiển Phần tử, nơi bạn có thể xem nội dung trang, như trong ảnh chụp màn hình dưới đâ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, 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 tạo 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 như được mô tả trong phần trước).
Ngoài ra, sau khi người dùng kích hoạt trang được kết xuất trước, thẻ Tải theo suy đoán sẽ hiển thị trạng thái này, cũng như trạng thái đó 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 cung cấp nội dung giải thích lý do dẫn đến trường hợp này:
Ngoài ra, trong trường hợp tìm nạp trước, khi bạn điều hướng từ một trang có quy tắc suy đoán không khớp với trang hiện tại, hệ thống sẽ tìm cách cho bạn biết lý do tại sao 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 đã chỉ ra nhiều cách mà nhà phát triển có thể gỡ lỗi quy tắc suy đoán tìm nạp trước và kết xuất trước. Nhóm đang tiếp tục nỗ lự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 của nhà phát triển về những cách khác có thể hữu ích để gỡ lỗi API mới thú vị này. Các nhà phát triển nên báo cáo vấn đề trên Công cụ theo dõi lỗi của Chrome nếu phát hiện thấy lỗi hoặc yêu cầu về tính năng.
Xác nhận
Hình ảnh Thumbail của Nubelson Fernandes trên Unsplash.