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