Các điểm cải tiến cho Speculation Rules API (API Quy tắc suy đoán)

Barry Pollard

Nhóm Chrome đang nghiên cứu một số bản cập nhật thú vị cho API Quy tắc suy đoán dùng để cải thiện hiệu suất điều hướng bằng cách tìm nạp trước hoặc thậm chí kết xuất trước các yêu cầu điều hướng trong tương lai. Những điểm cải tiến bổ sung này hiện đều có trong Chrome 122 (với một số tính năng có trong các phiên bản cũ).

Những thay đổi này giúp việc triển khai trước và kết xuất trước các trang tìm nạp trước trở nên dễ dàng hơn đáng kể và bớt lãng phí. Chúng tôi hy vọng điều này sẽ khuyến khích người dùng áp dụng nhiều hơn nữa.

Các tính năng khác

Đầu tiên là phần giải thích về những bổ sung mới mà chúng tôi đã thêm vào API Quy tắc suy đoán và cách sử dụng chúng. Sau đó, chúng tôi sẽ cung cấp cho bạn bản minh hoạ để bạn xem cách chúng hoạt động.

Quy tắc tài liệu

Trước đây, API Quy tắc suy đoán hoạt động bằng cách chỉ định một danh sách URL để tìm nạp trước hoặc kết xuất trước:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

Các quy tắc suy đoán là bán động, trong đó các tập lệnh quy tắc suy đoán mới có thể được thêm vào và các tập lệnh cũ sẽ bị loại bỏ để loại bỏ các suy đoán đó (lưu ý rằng việc cập nhật danh sách urls của tập lệnh quy tắc suy đoán hiện có sẽ không kích hoạt thay đổi trong suy đoán). Tuy nhiên, trang web vẫn cho phép lựa chọn URL bằng cách gửi chúng từ máy chủ vào thời điểm yêu cầu trang hoặc tạo danh sách này theo cách linh động thông qua JavaScript phía máy khách.

Quy tắc danh sách vẫn là một lựa chọn cho những trường hợp sử dụng đơn giản hơn (trong đó thao tác điều hướng tiếp theo là từ một số ít các thao tác rõ ràng) hoặc các trường hợp sử dụng nâng cao hơn (trong đó danh sách các URL được tính toán một cách linh động dựa trên bất cứ suy đoán nào mà chủ sở hữu trang web muốn sử dụng rồi chèn vào trang).

Thay vào đó, chúng tôi rất vui được cung cấp một lựa chọn mới để tự động tìm đường liên kết bằng quy tắc tài liệu. Việc này hoạt động bằng cách tìm nguồn URL từ chính tài liệu đó dựa trên điều kiện where. Điều này có thể dựa vào chính các liên kết:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/logout/*"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Bạn cũng có thể sử dụng bộ chọn CSS để thay thế hoặc sử dụng kết hợp với href để tìm các đường liên kết trong trang hiện tại:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Điều này cho phép sử dụng một bộ quy tắc suy đoán duy nhất trên toàn bộ trang web, thay vì có các bộ quy tắc cụ thể trên mỗi trang, giúp các trang web triển khai các quy tắc suy đoán một cách dễ dàng hơn.

Tất nhiên, việc kết xuất trước tất cả đường liên kết trên một trang chắc chắn sẽ là việc lãng phí, vì vậy với tính năng mới này, chúng tôi đã giới thiệu một cài đặt eagerness.

Háo hức

Bất kỳ kiểu suy đoán nào cũng đều có sự cân bằng giữa độ chính xác và mức độ thu hồi cũng như thời gian thực hiện. Hiển thị trước tất cả các liên kết khi tải trang có nghĩa là bạn gần như chắc chắn sẽ kết xuất trước một liên kết mà người dùng nhấp vào (giả sử họ nhấp vào một liên kết cùng một trang web trên trang) và tốn nhiều thời gian thực hiện nhất có thể, nhưng có thể lãng phí băng thông rất lớn.

Mặt khác, việc chỉ hiển thị trước khi người dùng đã nhấp vào liên kết sẽ tránh lãng phí, nhưng đổi lại nó sẽ làm giảm đáng kể thời gian thực hiện. Điều này có nghĩa là không thể hoàn tất quá trình kết xuất trước trước khi trình duyệt chuyển sang trang đó.

Chế độ cài đặt eagerness cho phép bạn xác định thời điểm chạy nội dung suy đoán, tách riêng thời điểm để suy đoán URL nào sẽ thực hiện suy đoán. Chế độ cài đặt eagerness dùng được cho cả quy tắc nguồn list và document, đồng thời có 4 chế độ cài đặt mà Chrome có các phương pháp phỏng đoán sau đây:

• immediate: Thuộc tính này dùng để suy đoán càng sớm càng tốt, tức là ngay khi quan sát được các quy tắc suy đoán.
• eager: Phương thức này hiện hoạt động giống với chế độ cài đặt immediate, nhưng trong tương lai, chúng ta sẽ tìm cách đặt thuộc tính này ở đâu đó trong khoảng từ immediate đến moderate.
• moderate: Thao tác này sẽ thực hiện suy đoán nếu bạn di chuột qua một đường liên kết trong 200 mili giây (hoặc trên sự kiện pointerdown nếu thời gian đó sớm hơn và trên thiết bị di động không có sự kiện hover).
• conservative: Tham số này suy đoán bằng con trỏ hoặc thao tác chạm xuống.

eagerness mặc định cho các quy tắc list là immediate. Bạn có thể sử dụng các tuỳ chọn moderate và conservative để giới hạn quy tắc list cho những URL mà người dùng tương tác với một danh sách cụ thể. Mặc dù trong nhiều trường hợp, các quy tắc document có điều kiện where thích hợp có thể phù hợp hơn.

eagerness mặc định cho các quy tắc document là conservative. Do một tài liệu có thể chứa nhiều URL, bạn nên thận trọng khi sử dụng immediate hoặc eager cho các quy tắc document (xem thêm phần Giới hạn của Chrome ở phần tiếp theo).

Chế độ cài đặt eagerness mà bạn sử dụng sẽ tuỳ thuộc vào trang web của bạn. Đối với một trang web tĩnh rất đơn giản, việc suy đoán háo hức hơn có thể tốn ít chi phí và có lợi cho người dùng. Các trang web có kiến trúc phức tạp hơn và tải trọng trang lớn hơn có thể muốn giảm lãng phí bằng cách suy đoán ít thường xuyên hơn cho đến khi bạn nhận được tín hiệu tích cực hơn về ý định từ người dùng để hạn chế lãng phí.

Tuỳ chọn moderate là trung gian và nhiều trang web có thể hưởng lợi từ quy tắc suy đoán đơn giản sau. Quy tắc này sẽ kết xuất trước tất cả đường liên kết khi di chuột hoặc con trỏ xuống dưới dạng cách triển khai cơ bản nhưng hiệu quả cho các quy tắc suy đoán:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "href_matches": "/*"
    },
    "eagerness": "moderate"
  }]
}
</script>

Giới hạn của Chrome

Ngay cả khi bạn chọn eagerness, Chrome vẫn có các giới hạn để ngăn việc sử dụng quá mức API này:

Các chế độ cài đặt moderate và conservative (tuỳ thuộc vào tương tác của người dùng) hoạt động theo cách vào trước, ra trước (FIFO). Sau khi đạt đến giới hạn, suy đoán mới sẽ khiến suy đoán cũ nhất bị huỷ và được thay thế bằng suy đoán mới hơn để tiết kiệm bộ nhớ.

Trên thực tế, việc người dùng kích hoạt các suy đoán moderate và conservative cho phép chúng ta sử dụng ngưỡng 2 khiêm tốn hơn để tiết kiệm bộ nhớ. Chế độ cài đặt immediate và eager không được kích hoạt bởi một hành động của người dùng. Vì vậy, chế độ cài đặt này có giới hạn cao hơn vì trình duyệt không thể biết được thông tin nào cần thiết và thời điểm cần sử dụng.

Một suy đoán bị huỷ do bị đẩy ra khỏi hàng đợi FIFO có thể được kích hoạt lại — ví dụ như bằng cách di chuột qua liên kết đó một lần nữa — điều này sẽ dẫn đến việc URL đó được suy đoán lại. Trong trường hợp đó, suy đoán trước đó có thể đã làm cho trình duyệt lưu vào bộ nhớ đệm một số tài nguyên trong Bộ nhớ đệm HTTP cho URL đó, do đó lặp lại suy đoán sẽ giúp giảm nhiều chi phí mạng và chi phí thời gian.

Các giới hạn immediate và eager cũng có thể thay đổi. Việc xoá phần tử tập lệnh của quy tắc suy đoán bằng cách sử dụng các mức độ mong muốn này sẽ tạo ra năng lực bằng cách huỷ bỏ những suy đoán đã bị loại bỏ đó. Các URL này cũng có thể được suy đoán lại nếu được đưa vào một tập lệnh URL mới và chưa đạt đến giới hạn.

Chrome cũng sẽ ngăn chặn hoạt động suy đoán được sử dụng trong một số điều kiện nhất định, bao gồm:

• Lưu dữ liệu.
• Trình tiết kiệm pin.
• Các hạn chế về bộ nhớ.
• Khi lỗi "Tải trước các trang" cài đặt bị tắt (chế độ này cũng bị tắt rõ ràng bởi các tiện ích của Chrome như uBlock Origin).
• Các trang được mở trong thẻ nền.

Tất cả những điều kiện này đều nhằm giảm tác động của việc suy đoán quá mức có thể gây bất lợi cho người dùng.

source không bắt buộc

Chrome 122 không bắt buộc sử dụng khoá source vì khoá này có thể được suy ra dựa trên sự hiện diện của khoá url hoặc where. Do đó, hai quy tắc suy đoán này giống hệt nhau:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

Tiêu đề HTTP Speculation-Rules

Bạn cũng có thể gửi quy tắc suy đoán bằng cách sử dụng tiêu đề HTTP Speculation-Rules, thay vì đưa trực tiếp các quy tắc này vào HTML của tài liệu. Nhờ vậy, các CDN có thể triển khai dễ dàng hơn mà không cần phải tự thay đổi nội dung tài liệu.

Tiêu đề HTTP Speculation-Rules được trả về cùng với tài liệu và trỏ đến một vị trí của tệp JSON chứa các quy tắc suy đoán:

Speculation-Rules: "/speculationrules.json"

Tài nguyên này phải sử dụng đúng loại MIME. Nếu là tài nguyên nhiều nguồn gốc, hãy vượt qua quy trình kiểm tra CORS.

Content-Type: application/speculationrules+json
Access-Control-Allow-Origin: *

Nếu muốn sử dụng URL tương đối, bạn nên đưa khoá "relative_to": "document" vào quy tắc suy đoán của mình. Nếu không, các URL tương đối sẽ là URL của tệp JSON chứa quy tắc suy đoán. Điều này có thể đặc biệt hữu ích nếu bạn cần chọn một số (hoặc tất cả) đường liên kết có cùng nguồn gốc.

Tái sử dụng bộ nhớ đệm hiệu quả hơn

Chúng tôi đã thực hiện một số cải tiến đối với việc lưu vào bộ nhớ đệm trong Chrome để việc tìm nạp trước (hoặc thậm chí là kết xuất trước) một tài liệu sẽ lưu trữ và sử dụng lại các tài nguyên trong bộ nhớ đệm HTTP. Điều này có nghĩa là hoạt động đầu cơ vẫn có thể mang lại lợi ích trong tương lai, ngay cả khi suy đoán đó không được sử dụng.

Nhờ vậy, hoạt động suy đoán lại (ví dụ: đối với các quy tắc tài liệu có chế độ cài đặt mức độ mong muốn moderate) cũng sẽ rẻ hơn đáng kể, vì Chrome sẽ sử dụng bộ nhớ đệm HTTP cho các tài nguyên có thể lưu vào bộ nhớ đệm.

Chúng tôi cũng hỗ trợ đề xuất No-Vary-Search mới để cải thiện hơn nữa khả năng sử dụng lại bộ nhớ đệm.

Hỗ trợ của No-Vary-Search

Khi tìm nạp trước hoặc hiển thị trước một trang, một số tham số URL nhất định (về mặt kỹ thuật được gọi là thông số tìm kiếm) có thể không quan trọng đối với trang thực sự do máy chủ phân phối và chỉ được JavaScript phía máy khách sử dụng.

Ví dụ: Google Analytics sử dụng thông số UTM để đo lường chiến dịch, nhưng thường không dẫn đến các trang khác nhau được phân phối từ máy chủ. Điều này có nghĩa là page1.html?utm_content=123 và page1.html?utm_content=456 sẽ phân phối cùng một trang từ máy chủ, vì vậy, có thể sử dụng lại chính trang đó từ bộ nhớ đệm.

Tương tự, ứng dụng có thể sử dụng các tham số URL khác chỉ được xử lý phía máy khách.

Đề xuất No-Vary-Search cho phép máy chủ chỉ định các tham số không dẫn đến sự khác biệt đối với tài nguyên được phân phối, từ đó cho phép trình duyệt sử dụng lại các phiên bản tài liệu đã được lưu vào bộ nhớ đệm trước đó, vốn chỉ khác các tham số này. Lưu ý: hiện tại, tính năng này chỉ được hỗ trợ trong Chrome (và các trình duyệt dựa trên Chromium) đối với các suy đoán điều hướng tìm nạp trước.

Hỗ trợ các quy tắc suy đoán bằng cách sử dụng expects_no_vary_search để cho biết vị trí dự kiến sẽ trả về tiêu đề HTTP No-Vary-Search. Việc này có thể giúp bạn tránh được những tệp tải xuống không cần thiết.

<script type="speculationrules">
{
  "prefetch": [{
    "urls": ["/products*"],
    "expects_no_vary_search": "params=(\"id\")"
  }]
}
</script>

<a href="/products?id=123">Product 123</a>
<a href="/products?id=124">Product 124</a>

Trong ví dụ này, HTML của trang ban đầu /products giống nhau cho cả mã sản phẩm 123 và 124. Tuy nhiên, nội dung trang rồi sẽ khác nhau tuỳ theo chế độ hiển thị phía máy khách bằng JavaScript để tìm nạp dữ liệu sản phẩm bằng tham số tìm kiếm id. Vì vậy, chúng ta nhanh chóng tìm nạp trước URL đó và URL đó sẽ trả về tiêu đề HTTP No-Vary-Search cho thấy trang có thể được dùng cho bất kỳ thông số tìm kiếm id nào.

Tuy nhiên, nếu người dùng nhấp vào bất kỳ đường liên kết nào trước khi quá trình tìm nạp trước hoàn tất, thì trình duyệt có thể chưa nhận được trang /products. Trong trường hợp này, trình duyệt không biết liệu có chứa tiêu đề HTTP No-Vary-Search hay không. Sau đó, trình duyệt sẽ có lựa chọn tìm nạp lại đường liên kết hay chờ quá trình tìm nạp trước hoàn tất để xem liệu trình duyệt có chứa tiêu đề HTTP No-Vary-Search hay không. Chế độ cài đặt expects_no_vary_search cho phép trình duyệt biết dự kiến phản hồi trang sẽ chứa tiêu đề HTTP No-Vary-Search và chờ quá trình tìm nạp trước hoàn tất.

Bản minh hoạ

Chúng tôi đã tạo một bản minh hoạ tại https://speculative-rules.glitch.me/common-fruits.html để bạn xem các quy tắc tài liệu với chế độ cài đặt mức độ sẵn sàng moderate trong thực tế:

Mở Công cụ cho nhà phát triển, nhấp vào bảng điều khiển Ứng dụng. Sau đó, trong mục Dịch vụ nền, hãy nhấp vào Tải theo suy đoán, sau đó nhấp vào ngăn Dự đoán và sắp xếp theo cột Trạng thái.

Khi bạn di chuột qua các trái cây, bạn sẽ thấy các trang kết xuất trước. Nhấp vào chúng sẽ hiển thị thời gian LCP nhanh hơn nhiều so với một trong các công thức không được kết xuất trước. Bản minh hoạ này cũng được giải thích trong video sau:

Bạn cũng có thể xem bài đăng trước về các quy tắc suy đoán gỡ lỗi trên blog để biết thêm thông tin về cách sử dụng Công cụ cho nhà phát triển để gỡ lỗi cho các quy tắc suy đoán.

Hỗ trợ nền tảng cho các quy tắc đầu cơ

Mặc dù việc triển khai các quy tắc suy đoán tương đối đơn giản bằng cách chèn các quy tắc vào phần tử <script type="speculationrules">, nhưng sự hỗ trợ của nền tảng có thể biến việc này thành công việc chỉ bằng một lần nhấp. Chúng tôi đã làm việc với nhiều nền tảng và đối tác để giúp việc ra mắt các quy tắc đầu cơ trở nên dễ dàng hơn.

Chúng tôi cũng đang nỗ lực chuẩn hoá API thông qua Nhóm cộng đồng vườn ươm web (WICG) để cho phép các trình duyệt khác cũng triển khai API thú vị này nếu muốn.

WordPress

Nhóm Hiệu suất cốt lõi WordPress (bao gồm cả các nhà phát triển của Google) đã tạo một trình bổ trợ Quy tắc suy đoán. Plugin này cho phép thêm hỗ trợ quy tắc tài liệu vào bất kỳ trang web WordPress nào chỉ bằng một cú nhấp chuột. Bạn cũng có thể cài đặt trình bổ trợ này thông qua trình bổ trợ WordPress Performance Lab. Bạn cũng nên cân nhắc việc cài đặt trình bổ trợ này vì trình bổ trợ này sẽ giúp bạn nắm được thông tin mới nhất về các trình bổ trợ hiệu suất có liên quan của nhóm.

Có 2 nhóm chế độ cài đặt: Chế độ suy đoán và chế độ cài đặt Eagerness:

Đối với những cách thiết lập phức tạp hơn (ví dụ: để loại trừ một số URL khỏi quá trình tìm nạp trước hoặc kết xuất trước), hãy đọc tài liệu.

Akamai

Zagat là một trong những nhà cung cấp CDN hàng đầu thế giới và hiện tại, họ đã tích cực thử nghiệm với Speculation Rules API. AVD đã phát hành tài liệu về cách khách hàng có thể bật API này trong chế độ cài đặt CDN của họ. Trước đây, họ cũng đã chia sẻ các kết quả ấn tượng có thể đạt được với API mới này.

NitroPack

NitroPack là một giải pháp tối ưu hoá hiệu suất. Giải pháp này sử dụng AI điều hướng tuỳ chỉnh để dự đoán những trang cần thêm vào quy tắc suy đoán. Giải pháp này giúp kéo dài thời gian thực hiện so với việc di chuột qua một đường liên kết, nhưng không lãng phí việc suy đoán không cần thiết về tất cả các đường liên kết được ghi nhận. Hãy xem tài liệu về API Quy tắc suy đoán Nitropack để biết thêm thông tin. Giải pháp đổi mới này cho thấy vẫn còn nhiều quy tắc danh sách cũ hơn có thể cung cấp khi kết hợp với thông tin chi tiết theo trang web cụ thể.

Nhóm Chrome cũng đã làm việc với NitroPack trong một hội thảo trên web về Speculation Rules API cho những người đang tìm kiếm thêm thông tin, bao gồm cả cuộc thảo luận hay về những yếu tố cần cân nhắc khi đầu cơ sớm và thường xuyên, cũng như việc suy đoán muộn và ít thường xuyên hơn.

Astro

Astro đã thêm tính năng kết xuất trước các trang bằng API Quy tắc suy đoán trong phiên bản 4.2 trên cơ sở thử nghiệm, cho phép các nhà phát triển đang sử dụng Astro dễ dàng bật tính năng này, đồng thời quay lại phương thức tìm nạp trước tiêu chuẩn đối với các trình duyệt không hỗ trợ Speculation Rules API. Hãy đọc tài liệu về quá trình kết xuất trước của ứng dụng để biết thêm thông tin.

Kết luận

Những nội dung bổ sung này cho Speculation Rules API cho phép bạn sử dụng tính năng hiệu suất mới và thú vị này một cách đơn giản hơn cho các trang web, đồng thời ít có nguy cơ lãng phí tài nguyên vì những suy đoán không được sử dụng. Thật vui khi thấy các nền tảng đã khai thác API này. Chúng tôi hy vọng có thể mở rộng phạm vi sử dụng API này vào năm 2024, từ đó mang lại hiệu suất tốt hơn cho người dùng cuối.

Ngoài việc đạt được hiệu suất mà API Quy tắc suy đoán mang lại, chúng tôi cũng rất muốn xem điều này mở ra những cơ hội mới nào. Lượt chuyển đổi khung hiển thị là một API mới cho phép nhà phát triển chỉ định các lượt chuyển đổi giữa các thao tác một cách dễ dàng hơn. Tính năng này hiện có cho Ứng dụng trang đơn (SPA) nhưng phiên bản nhiều trang đang trong quá trình phát triển (và có sẵn sau một cờ trong Chrome). Kết xuất trước là một tiện ích bổ sung tự nhiên cho tính năng đó nhằm đảm bảo không có độ trễ, điều này sẽ ngăn việc cải thiện trải nghiệm người dùng mà hiệu ứng chuyển đổi mang lại. Chúng tôi đã thấy các trang web thử nghiệm với sự kết hợp này.

Chúng tôi rất mong được áp dụng Speculation Rules API (API Quy tắc suy đoán) trong suốt năm 2024 và sẽ thông báo cho bạn mọi điểm cải tiến hơn nữa mà chúng tôi thực hiện đối với API này.

Xác nhận

Hình thu nhỏ của Robbie Down trên Unsplash