Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Trình kết xuất trước trang trong Chrome để di chuyển trang tức thì

Barry Pollard

Ngày xuất bản: Ngày 2 tháng 12 năm 2022, Lần cập nhật gần đây nhất: Ngày 29 tháng 10 năm 2026

Browser Support

Nhóm Chrome đã khôi phục tính năng kết xuất trước toàn bộ các trang mà người dùng có khả năng sẽ chuyển đến trong tương lai.

Sơ lược về quá trình kết xuất trước

Trước đây, Chrome hỗ trợ gợi ý tài nguyên <link rel="prerender" href="/next-page">, tuy nhiên, gợi ý này không được hỗ trợ rộng rãi ngoài Chrome và không phải là một API có tính biểu đạt cao.

Tính năng kết xuất trước cũ này sử dụng gợi ý liên kết rel=prerender đã ngừng hoạt động để chuyển sang NoState Prefetch. Tính năng này tìm nạp các tài nguyên cần thiết cho trang trong tương lai, nhưng không kết xuất trước hoàn toàn trang cũng như không thực thi JavaScript. Tính năng Tìm nạp trước không có trạng thái giúp cải thiện hiệu suất trang bằng cách cải thiện việc tải tài nguyên, nhưng sẽ không mang lại trải nghiệm tải trang tức thì như khi kết xuất trước toàn bộ.

Nhóm Chrome hiện đã đưa tính năng kết xuất trước hoàn toàn trở lại Chrome. Để tránh các vấn đề phức tạp khi sử dụng hiện tại và cho phép mở rộng tính năng kết xuất trước trong tương lai, cơ chế kết xuất trước mới này sẽ không sử dụng cú pháp <link rel="prerender"...>, cú pháp này vẫn được giữ nguyên cho NoState Prefetch, với mục đích ngừng sử dụng cú pháp này vào một thời điểm nào đó trong tương lai.

Trang được kết xuất trước như thế nào?

Một trang có thể được kết xuất trước theo một trong bốn cách, tất cả đều nhằm mục đích giúp thao tác điều hướng nhanh hơn:

Khi bạn nhập một URL vào thanh địa chỉ của Chrome (còn gọi là "thanh địa chỉ"), Chrome có thể tự động kết xuất trước trang cho bạn nếu Chrome tin chắc rằng bạn sẽ truy cập vào trang đó, dựa trên nhật ký duyệt web trước đây của bạn.
Khi bạn sử dụng thanh dấu trang, Chrome có thể tự động kết xuất trước trang cho bạn khi bạn di chuột qua một trong các nút dấu trang.
Khi bạn nhập một cụm từ tìm kiếm vào thanh địa chỉ của Chrome, Chrome có thể tự động kết xuất trước trang kết quả tìm kiếm khi được công cụ tìm kiếm hướng dẫn làm như vậy.
Các trang web có thể sử dụng Speculation Rules API để cho Chrome biết trang nào cần kết xuất trước theo phương thức lập trình. Thẻ này thay thế chức năng của <link rel="prerender"...> và cho phép các trang web chủ động kết xuất trước một trang dựa trên các quy tắc suy đoán trên trang. Các thẻ này có thể tồn tại tĩnh trên các trang hoặc được chèn động bằng JavaScript khi chủ nhân của trang thấy phù hợp.

Trong mỗi trường hợp này, quá trình kết xuất trước hoạt động như thể trang đã được mở trong một thẻ nền không hiển thị, sau đó được "kích hoạt" bằng cách thay thế thẻ trên nền trước bằng trang được kết xuất trước đó. Nếu một trang được kích hoạt trước khi kết xuất trước hoàn toàn, thì trạng thái hiện tại của trang đó là "được đưa lên nền trước" và tiếp tục tải, tức là bạn vẫn có thể bắt đầu sớm.

Vì trang được kết xuất trước được mở ở trạng thái ẩn, nên một số API gây ra hành vi xâm lấn (ví dụ: lời nhắc) sẽ không được kích hoạt ở trạng thái này mà bị trì hoãn cho đến khi trang được kích hoạt. Trong một số ít trường hợp chưa thể thực hiện việc này, quá trình kết xuất trước sẽ bị huỷ. Nhóm Chrome đang nỗ lực hiển thị lý do hủy kết xuất trước dưới dạng một API, đồng thời nâng cao các chức năng của DevTools để giúp bạn dễ dàng xác định các trường hợp hiếm gặp như vậy.

Lưu ý: Các trang được kết xuất trước nên được coi là một gợi ý và một cải tiến tăng dần. Không giống như preload, kết xuất trước là một gợi ý mang tính suy đoán và trình duyệt có thể chọn không thực hiện theo gợi ý dựa trên chế độ cài đặt của người dùng, mức sử dụng bộ nhớ hiện tại hoặc các phương pháp phỏng đoán khác.

Tác động của việc kết xuất trước

Tính năng kết xuất trước giúp tải trang gần như tức thì, như trong video sau:

Ví dụ về tác động của việc kết xuất trước.

Trang web mẫu đã là một trang web nhanh, nhưng ngay cả khi đó, bạn vẫn có thể thấy cách tính năng kết xuất trước cải thiện trải nghiệm người dùng. Do đó, điều này cũng có thể tác động trực tiếp đến Core Web Vitals của một trang web, với LCP gần bằng 0, CLS giảm (vì mọi CLS tải đều xảy ra trước chế độ xem ban đầu) và INP được cải thiện (vì quá trình tải phải hoàn tất trước khi người dùng tương tác).

Ngay cả khi một trang kích hoạt trước khi tải xong, việc có một khởi đầu thuận lợi cho quá trình tải trang sẽ cải thiện trải nghiệm tải. Khi một đường liên kết được kích hoạt trong khi quá trình kết xuất trước vẫn đang diễn ra, trang kết xuất trước sẽ chuyển sang khung chính và tiếp tục tải.

Tuy nhiên, quá trình kết xuất trước sẽ sử dụng thêm bộ nhớ và băng thông mạng. Hãy cẩn thận để không kết xuất trước quá nhiều, gây tốn tài nguyên của người dùng. Chỉ kết xuất trước khi có nhiều khả năng trang sẽ được chuyển đến.

Hãy xem phần Đo lường hiệu suất để biết thêm thông tin về cách đo lường tác động thực tế đến hiệu suất trong số liệu phân tích của bạn.

Xem cụm từ gợi ý trên thanh địa chỉ của Chrome

Đối với trường hợp sử dụng đầu tiên, bạn có thể xem thông tin dự đoán của Chrome về URL trên trang chrome://predictors:

Trang Chrome Predictors được lọc để hiện các cụm từ gợi ý có mức độ liên quan thấp (màu xám), trung bình (màu hổ phách) và cao (màu xanh lục) dựa trên văn bản đã nhập. — Trang Chrome Predictors.

Đường màu xanh lục cho biết mức độ tin cậy đủ để kích hoạt tính năng kết xuất trước. Trong ví dụ này, việc nhập "s" mang lại độ tin cậy hợp lý (màu hổ phách), nhưng khi bạn nhập "sh", Chrome có đủ độ tin cậy rằng bạn gần như luôn chuyển đến https://sheets.google.com.

Ảnh chụp màn hình này được chụp trong một bản cài đặt Chrome tương đối mới và lọc ra các cụm từ gợi ý có độ tin cậy bằng 0. Tuy nhiên, nếu xem các cụm từ gợi ý của riêng mình, bạn có thể sẽ thấy nhiều mục hơn đáng kể và có thể cần nhiều ký tự hơn để đạt được mức độ tin cậy đủ cao.

Những yếu tố dự đoán này cũng là cơ sở để thanh địa chỉ đưa ra các lựa chọn đề xuất mà bạn có thể đã thấy:

Tính năng "Nhập trước" trên thanh địa chỉ của Chrome — Tính năng "Nhập trước" trên thanh địa chỉ.

Chrome sẽ liên tục cập nhật các yếu tố dự đoán dựa trên nội dung bạn nhập và lựa chọn của bạn.

Đối với mức độ tin cậy lớn hơn 30% (hiển thị bằng màu hổ phách), Chrome chủ động kết nối trước với miền nhưng không kết xuất trước trang.
Đối với mức độ tin cậy lớn hơn 50% (hiển thị bằng màu xanh lục), Chrome sẽ kết xuất trước URL.

Speculation Rules API

Đối với lựa chọn kết xuất trước của Speculation Rules API, nhà phát triển web có thể chèn hướng dẫn JSON vào trang của họ để thông báo cho trình duyệt về những URL cần kết xuất trước.

Danh sách URL

Quy tắc suy đoán có thể dựa trên danh sách URL:

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

Quy tắc về tài liệu

Quy tắc suy đoán cũng có thể là "quy tắc tài liệu" sử dụng cú pháp where. Thông số này suy đoán các đường liên kết có trong tài liệu dựa trên bộ chọn href (dựa trên API Mẫu URL) hoặc bộ chọn CSS:

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/wp-admin"}},
        { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
        { "not": {"selector_matches": ".do-not-prerender"}},
        { "not": {"selector_matches": "[rel~=nofollow]"}}
      ]
    }
  }]
}
</script>

Sự háo hức

Browser Support

Source

Chế độ cài đặt eagerness được dùng để cho biết thời điểm kích hoạt suy đoán, điều này đặc biệt hữu ích cho các quy tắc tài liệu:

conservative: Chế độ cài đặt này suy đoán dựa trên sự kiện con trỏ hoặc sự kiện chạm.
moderate: Trên máy tính, chế độ cài đặt này tiến hành suy đoán nếu bạn giữ con trỏ trên một đường liên kết trong 200 mili giây (hoặc trong sự kiện pointerdown nếu sự kiện đó xảy ra sớm hơn và trên thiết bị di động không có sự kiện hover). Trên thiết bị di động, chúng tôi đã chuyển sang dựa vào phương pháp phỏng đoán khung nhìn phức tạp kể từ tháng 8 năm 2025. Heuristic khung nhìn phức tạp kích hoạt 500 mili giây sau khi người dùng ngừng cuộn, đối với các neo trong phạm vi 30% khoảng cách dọc từ con trỏ trước đó xuống, trong đó các neo lớn hơn ít nhất 0,5 lần so với neo lớn nhất trong khung nhìn. Như được mô tả trong tài liệu này.
eager: Mức độ háo hức này từng hoạt động giống hệt với immediate nhưng đã thay đổi kể từ Chrome 143. Trên máy tính, chế độ cài đặt này tiến hành suy đoán nếu bạn giữ con trỏ trên một đường liên kết trong 10 mili giây. Trên thiết bị di động, chúng tôi đã thay đổi để dựa vào phương pháp phỏng đoán khung nhìn đơn giản kể từ tháng 1 năm 2026. Phương pháp phỏng đoán khung nhìn đơn giản sẽ kích hoạt 50 mili giây sau khi neo vào khung nhìn.
immediate: Chế độ cài đặt này dùng để suy đoán càng sớm càng tốt, tức là ngay khi các quy tắc suy đoán được tuân thủ.

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

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

Chế độ cài đặt eagerness nào nên dùng sẽ tuỳ thuộc vào trang web của bạn. Đối với một trang web tĩnh, gọn nhẹ, việc suy đoán tích cực hơn có thể tốn ít chi phí và mang lại lợi ích cho người dùng. Các trang web có cấu trúc phức tạp hơn và tải trọng trang nặng 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 của người dùng để hạn chế lãng phí.

Lựa chọn moderate là một lựa chọn trung gian và nhiều trang web có thể hưởng lợi từ quy tắc phỏng đoán sau đây. Quy tắc này sẽ kết xuất trước một đường liên kết khi giữ con trỏ trên đường liên kết đó trong 200 mili giây hoặc khi sự kiện pointerdown xảy ra, đây là một cách triển khai cơ bản nhưng hiệu quả của quy tắc phỏng đoán:

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

Tìm nạp trước

Bạn cũng có thể sử dụng quy tắc suy đoán để chỉ tìm nạp trước các trang mà không cần kết xuất trước toàn bộ. Đây thường là bước đầu tiên phù hợp trên lộ trình kết xuất trước:

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

Lưu ý: Không giống như gợi ý tài nguyên <link rel="prefetch"> cũ chỉ tìm nạp trước vào bộ nhớ đệm HTTP, các tài liệu được tải bằng quy tắc phỏng đoán sẽ được xử lý theo cách tương tự như khi điều hướng (nhưng sau đó không được kết xuất) và được lưu giữ trong bộ nhớ để trình duyệt có thể sử dụng nhanh hơn khi cần. Điều này cũng cho phép tìm nạp trước các tài liệu không thể lưu vào bộ nhớ đệm trong bộ nhớ đệm HTTP.

Do vấn đề khi tìm nạp trước tài liệu bằng <link rel="prefetch">, bạn nên sử dụng quy tắc suy đoán cho các thao tác điều hướng trong tương lai, trong đó <link rel="prefetch"> chỉ được dùng để tìm nạp trước tài nguyên phụ. Ngược lại, bạn nên sử dụng quy tắc suy đoán cho các suy đoán điều hướng tài liệu chứ không phải cho các hoạt động tìm nạp trước tài nguyên phụ, đặc biệt là khi có các quy định hạn chế về khác nguồn gốc của API Quy tắc suy đoán.

Prerender until script

Nhóm Chrome cũng đang nỗ lực thêm prerender_until_script vào API Quy tắc suy đoán (Xem: lỗi triển khai). Đây sẽ là một bước giữa tìm nạp trước và kết xuất trước, đồng thời sẽ được sử dụng theo cách tương tự:

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

Tương tự như NoState prefetch, thao tác này sẽ tìm nạp trước cả tài liệu HTML và các tài nguyên phụ có trong HTML đó. Tuy nhiên, trình duyệt sẽ tiến xa hơn thế và cũng bắt đầu kết xuất trước trang, dừng lại khi gặp tập lệnh đầu tiên.

Điều này có nghĩa là đối với những trang không có JavaScript hoặc chỉ có JavaScript ở chân trang, trang đó có thể được kết xuất trước gần như hoàn toàn. Các trang có tập lệnh trong <head> sẽ không thể kết xuất trước nhưng vẫn được hưởng lợi từ việc tìm nạp tài nguyên phụ.

Điều này sẽ tránh được rủi ro về các tác dụng phụ ngoài ý muốn khi thực thi JavaScript, nhưng mang lại hiệu suất cao hơn nhiều so với chỉ prefetch.

Giới hạn của Chrome

Chrome có các giới hạn để ngăn chặn việc lạm dụng Speculation Rules API:

sự háo hức	Tìm nạp trước	Kết xuất trước
`immediate`	50	10
`eager`/`moderate` trên thiết bị di động	6 (FIFO)	2 (FIFO)
`eager`/`moderate` trên máy tính	2 (FIFO)	2 (FIFO)
`conservative`	2 (FIFO)	2 (FIFO)

Giới hạn suy đoán trong Chrome.

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

Bạn có thể kích hoạt lại một suy đoán đã huỷ (ví dụ: bằng cách di chuột qua đường liên kết đó một lần nữa). Thao tác này sẽ khiến URL đó được suy đoán lại, đẩy suy đoán cũ nhất ra ngoài. Trong trường hợp này, hoạt động suy đoán trước đó sẽ lưu mọi tài nguyên có thể lưu vào bộ nhớ đệm trong Bộ nhớ đệm HTTP cho URL đó, vì vậy, hoạt động suy đoán thêm một lần nữa sẽ giảm chi phí. Đây là lý do tại sao giới hạn được đặt thành ngưỡng khiêm tốn là 2 theo mặc định. Chúng tôi sử dụng ngưỡng cao hơn là 6 cho hoạt động tìm nạp trước trên thiết bị di động vì không có thao tác "di chuột", phương pháp phỏng đoán khung nhìn thay thế trên thiết bị di động kém chính xác hơn và hoạt động tìm nạp trước ít tốn kém hơn so với hoạt động kết xuất trước (chúng tôi giữ giới hạn là 2 cho hoạt động kết xuất trước trên thiết bị di động).

Các quy tắc danh sách tĩnh không được kích hoạt bởi hành động của người dùng, vì vậy, các quy tắc này có giới hạn cao hơn vì trình duyệt không thể biết quy tắc nào là cần thiết và khi nào cần thiết.

Chrome cũng đang cân nhắc tăng giới hạn lên 5 trên thiết bị di động cho eager và moderate ít nhất là cho tính năng tìm nạp trước, vì đây là một phương pháp phỏng đoán ít chính xác hơn. Nhà phát triển sử dụng eager nên cân nhắc sử dụng thêm quy tắc conservative khi có nhiều đường liên kết trong khung nhìn để vẫn suy đoán ngay cả khi không được chọn làm một trong hai đường liên kết đầu tiên.

Giới hạn immediate cũng linh động, vì vậy, việc xoá một phần tử tập lệnh URL list sẽ tạo ra dung lượng bằng cách huỷ những suy đoán đã xoá đó.

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

Save-Data.
Trình tiết kiệm pin khi được bật và khi pin yếu.
Các quy tắc ràng buộc về bộ nhớ.
Khi chế độ cài đặt "Tải trước trang" bị tắt (chế độ này cũng bị các tiện ích Chrome như uBlock Origin tắt một cách rõ ràng).
Các trang được mở trong thẻ nền.

Chrome cũng không hiển thị iframe khác nguồn gốc trên các trang được kết xuất trước cho đến khi kích hoạt.

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

Cách đưa quy tắc suy đoán vào một trang

Bạn có thể thêm quy tắc phỏng đoán vào HTML của trang theo cách tĩnh hoặc chèn động vào trang bằng JavaScript:

Quy tắc phỏng đoán được đưa vào tĩnh: Ví dụ: một trang web tin tức hoặc blog có thể kết xuất trước bài viết mới nhất, nếu đó thường là thao tác điều hướng tiếp theo của một tỷ lệ lớn người dùng. Ngoài ra, bạn có thể sử dụng quy tắc tài liệu có moderate hoặc conservative để phỏng đoán khi người dùng tương tác với đường liên kết.
Quy tắc suy đoán được chèn linh động: Quy tắc này có thể dựa trên logic ứng dụng, được cá nhân hoá cho người dùng hoặc dựa trên các phương pháp phỏng đoán khác.

Những người ủng hộ việc chèn động dựa trên các hành động như di chuột qua hoặc nhấp vào một đường liên kết (như nhiều thư viện đã làm trước đây với <link rel=prefetch>) nên xem xét các quy tắc tài liệu, vì các quy tắc này cho phép trình duyệt xử lý nhiều trường hợp sử dụng của bạn.

Bạn có thể thêm quy tắc phỏng đoán vào <head> hoặc <body> của khung chính. Các quy tắc suy đoán trong khung phụ không được thực hiện và các quy tắc suy đoán trong trang được kết xuất trước chỉ được thực hiện sau khi trang đó được kích hoạt.

Tiêu đề HTTP `Speculation-Rules`

Browser Support

Source

Bạn cũng có thể phân phối quy tắc phỏng đ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 đó vào HTML của tài liệu. Điều này giúp CDN dễ dàng triển khai 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 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 và nếu là tài nguyên khác nguồn gốc, thì tài nguyên này phải 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 có thể thêm khoá "relative_to": "document" vào quy tắc phỏng đoán. Nếu không, URL tương đối sẽ tương ứng với 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ùng nguồn gốc.

Trường thẻ quy tắc suy đoán

Browser Support

Source

Bạn cũng có thể thêm "thẻ" trong cú pháp JSON của quy tắc suy đoán ở cấp tổng thể cho tất cả quy tắc suy đoán trong một bộ quy tắc:

{
  "tag": "my-rules",
  "prefetch": [{
      "urls": ["next.html"]
  }],
  "prerender": [{
      "urls": ["next2.html"]
  }]
}

Hoặc ở cấp quy tắc riêng lẻ:

{
  "prefetch": [{
    "tag": "my-prefetch-rules",
    "urls": ["next.html"]
  }],
  "prerender": [{
    "tag": "my-prerender-rules",
    "urls": ["next2.html"]
  }]
}

Sau đó, thẻ này sẽ được phản ánh trong tiêu đề HTTP Sec-Speculation-Tags. Bạn có thể dùng thẻ này để lọc các quy tắc phỏng đoán tại máy chủ. Tiêu đề HTTP Sec-Speculation-Tags có thể bao gồm nhiều thẻ nếu suy đoán được nhiều quy tắc bao gồm, như ví dụ sau:

Sec-Speculation-Tags: null
Sec-Speculation-Tags: null, "cdn-prefetch"
Sec-Speculation-Tags: "my-prefetch-rules"
Sec-Speculation-Tags: "my-prefetch-rules", "my-rules", "cdn-prefetch"

Một số CDN tự động chèn quy tắc suy đoán nhưng chặn suy đoán cho các trang không được lưu vào bộ nhớ đệm biên để tránh tính năng này làm tăng mức sử dụng máy chủ gốc. Thẻ cho phép họ xác định các suy đoán do bộ quy tắc mặc định của họ khởi tạo, nhưng vẫn cho phép mọi quy tắc do trang web thêm vào được chuyển đến nguồn gốc.

Thẻ của nhóm quy tắc cũng xuất hiện trong Chrome DevTools.

Trường `target_hint` của quy tắc suy đoán

Browser Support

Source

Quy tắc suy đoán cũng có thể bao gồm trường target_hint, chứa tên hoặc từ khoá bối cảnh duyệt web hợp lệ cho biết nơi trang dự kiến nội dung được kết xuất trước sẽ được kích hoạt:

<script type=speculationrules>
{
  "prerender": [{
    "target_hint": "_blank",
    "urls": ["next.html"]
  }]
}
</script>

Gợi ý này cho phép xử lý các phỏng đoán kết xuất trước cho các đường liên kết target="_blank":

<a target="_blank" href="next.html">Open this link in a new tab</a>

Hiện tại, Chrome chỉ hỗ trợ "target_hint": "_blank" và "target_hint": "_self" (mặc định nếu không được chỉ định) và chỉ hỗ trợ kết xuất trước, không hỗ trợ tìm nạp trước.

target_hint chỉ cần thiết cho các quy tắc suy đoán urls, vì đối với các quy tắc tài liệu, target được biết từ chính đường liên kết.

Quy tắc suy đoán và SPA

Quy tắc suy đoán chỉ được hỗ trợ cho các thao tác điều hướng toàn trang do trình duyệt quản lý, chứ không được hỗ trợ cho Ứng dụng trang đơn (SPA) hoặc trang vỏ ứng dụng. Những cấu trúc này không sử dụng lệnh tìm nạp tài liệu mà thay vào đó, thực hiện lệnh tìm nạp một phần hoặc API của dữ liệu hoặc trang. Sau đó, dữ liệu hoặc trang này sẽ được xử lý và hiển thị trong trang hiện tại. Dữ liệu cần thiết cho các thao tác "điều hướng mềm" này có thể được ứng dụng tìm nạp trước bên ngoài quy tắc suy đoán, nhưng không thể kết xuất trước.

Bạn có thể dùng Quy tắc suy đoán để kết xuất trước chính ứng dụng từ một trang trước đó. Điều này có thể giúp bù đắp một số chi phí tải ban đầu mà một số SPA phải chịu. Tuy nhiên, bạn không thể kết xuất trước các thay đổi về tuyến đường trong ứng dụng.

Gỡ lỗi các quy tắc suy đoán

Xem bài đăng riêng về quy tắc suy đoán gỡ lỗi để biết các tính năng mới của Chrome DevTools nhằm hỗ trợ xem và gỡ lỗi API mới này.

Nhiều quy tắc suy đoán

Bạn cũng có thể thêm nhiều quy tắc suy đoán vào cùng một trang và các quy tắc này sẽ được thêm vào các quy tắc hiện có. Do đó, các cách khác nhau sau đây đều dẫn đến việc kết xuất trước cả one.html và two.html:

Danh sách URL:

<script type="speculationrules">
{
  "prerender": [{
    "urls": ["one.html", "two.html"]
  }]
}
</script>

Nhiều tập lệnh speculationrules:

<script type="speculationrules">
{
  "prerender": [{
    "urls": ["one.html"]
  }]
}
</script>
<script type="speculationrules">
{
  "prerender": [{
    "urls": ["two.html"]
  }]
}
</script>

Nhiều danh sách trong một nhóm speculationrules

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["one.html"]
    },
    {
      "urls": ["two.html"]
    }
  ]
}
</script>

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

Browser Support

Source

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

Ví dụ: Google Analytics sử dụng tham số UTM để đo lường chiến dịch, nhưng thường không dẫn đến việc máy chủ phân phối các trang khác nhau. Đ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, bạn có thể sử dụng lại cùng một trang từ bộ nhớ đệm.

Tương tự, các ứ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 đã lưu vào bộ nhớ đệm trước đó của một tài liệu chỉ khác nhau theo các tham số này. Chrome (và các trình duyệt dựa trên Chromium) hỗ trợ tính năng này cho các suy đoán điều hướng cho cả quá trình tìm nạp trước và kết xuất trước.

Thận trọng: Khi sử dụng tính năng kết xuất trước với No-Vary-Search, trang có thể được kết xuất trước bằng một tham số tìm kiếm khác (hoặc không có tham số tìm kiếm nào). Ban đầu, URL (ví dụ: do location.href trả về) sẽ là URL được kết xuất trước, nhưng khi người dùng nhấp vào một đường liên kết có các tham số tìm kiếm khác nhau thuộc phạm vi của No-Vary-Search, trình duyệt sẽ sử dụng trang được kết xuất trước đó và thay thế URL bằng URL cuối cùng (bao gồm cả các tham số tìm kiếm chính xác).

Do đó, mọi JavaScript phụ thuộc vào tham số tìm kiếm chỉ nên được thực thi sau khi trang được kích hoạt. Đối với các tham số UTM, đây có thể không phải là vấn đề nếu mã phân tích không chạy cho đến sau khi kích hoạt, nhưng đối với các trang được kết xuất phía máy khách kết xuất nội dung khác nhau dựa trên tham số tìm kiếm, thì đây có thể là vấn đề và bạn nên thận trọng để đảm bảo nội dung được kết xuất phía máy khách được cập nhật khi kích hoạt.

Quy tắc phỏng đoán hỗ trợ việc sử dụng expects_no_vary_search để cho biết vị trí dự kiến trả về tiêu đề HTTP No-Vary-Search. Việc này có thể giúp tránh tải xuống những nội dung không cần thiết trước khi người dùng nhìn thấy câu trả lời.

<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, /products HTML trang ban đầu giống nhau cho cả mã sản phẩm 123 và 124. Tuy nhiên, nội dung trang cuối cùng sẽ khác nhau dựa trên hoạt động kết xuất 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 tôi sẽ tìm nạp trước URL đó và URL đó sẽ trả về tiêu đề HTTP No-Vary-Search cho biết trang có thể được dùng cho mọi tham số tìm kiếm id.

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 trang có chứa tiêu đề HTTP No-Vary-Search hay không. Sau đó, trình duyệt có thể chọn tìm nạp lại đường liên kết hoặc đợi quá trình tìm nạp trước hoàn tất để xem đường liên kế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 rằng phản hồi của trang dự kiến sẽ chứa tiêu đề HTTP No-Vary-Search và chờ quá trình tìm nạp trước đó hoàn tất.

Lưu ý: Chỉ sử dụng expects_no_vary_search là chưa đủ để đảm bảo một trang có tham số tìm kiếm khác được sử dụng lại. Đây chỉ là gợi ý cho trình duyệt về những gì cần dự kiến. Máy chủ cũng phải trả về một tiêu đề HTTP No-Vary-Search để trình duyệt biết rằng trình duyệt có thể sử dụng trang từ bộ nhớ đệm ngay cả khi tham số tìm kiếm không khớp.

Bạn cũng có thể thêm nhiều tham số vào expects_no_vary_search bằng cách phân tách chúng bằng dấu cách (vì No-Vary-Search là tiêu đề có cấu trúc HTTP):

    "expects_no_vary_search": "params=(\"param1\" \"param2\" \"param3\")"

Các quy định hạn chế và điểm cải tiến trong tương lai đối với quy tắc suy đoán

Quy tắc suy đoán chỉ áp dụng cho các trang được mở trong cùng một thẻ, nhưng chúng tôi đang nỗ lực giảm bớt quy định hạn chế đó.

Theo mặc định, quá trình kết xuất trước chỉ áp dụng cho các trang có cùng nguồn gốc. Bạn có thể bật tính năng kết xuất trước các trang khác nguồn gốc, của cùng một trang web (ví dụ: https://a.example.com có thể kết xuất trước một trang trên https://b.example.com). Để sử dụng tính năng này, trang dự đoán (https://b.example.com trong ví dụ này) cần chọn sử dụng bằng cách thêm tiêu đề HTTP Supports-Loading-Mode: credentialed-prerender, nếu không Chrome sẽ huỷ dự đoán.

Các phiên bản trong tương lai cũng có thể cho phép kết xuất trước cho các trang khác nguồn gốc, không cùng trang web, miễn là không có cookie cho trang được kết xuất trước và trang được kết xuất trước chọn sử dụng tiêu đề HTTP Supports-Loading-Mode: uncredentialed-prerender tương tự.

Quy tắc suy đoán đã hỗ trợ tính năng tìm nạp trước khác nguồn gốc. Đối với tính năng tìm nạp trước khác nguồn gốc, cùng trang web, không có quy định hạn chế nào. Tính năng tìm nạp trước trên nhiều trang web, khác nguồn gốc chỉ được hỗ trợ khi không có cookie cho miền khác nguồn gốc. Nếu có cookie từ người dùng đã truy cập vào trang web đó trước đây, thì suy đoán sẽ không được sử dụng và sẽ cho thấy lỗi trong Công cụ cho nhà phát triển.

Do những hạn chế hiện tại, một mẫu có thể cải thiện trải nghiệm của người dùng cho cả đường liên kết nội bộ và đường liên kết bên ngoài (nếu có thể) là kết xuất trước URL cùng nguồn gốc và cố gắng tìm nạp trước URL nhiều nguồn gốc:

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

Theo mặc định, việc hạn chế suy đoán khác nguồn gốc cho các đường liên kết khác nguồn gốc là cần thiết để đảm bảo tính bảo mật. Đây là một điểm cải tiến so với <link rel="prefetch"> cho các đích đến khác nguồn gốc. Các đích đến này cũng sẽ không gửi cookie nhưng vẫn cố gắng tìm nạp trước. Điều này sẽ dẫn đến việc tìm nạp trước bị lãng phí cần được gửi lại hoặc tệ hơn là tải trang không chính xác.

Phát hiện khả năng hỗ trợ Speculation Rules API

Bạn có thể phát hiện tính năng hỗ trợ Speculation Rules API bằng các quy trình kiểm tra HTML tiêu chuẩn:

if (HTMLScriptElement.supports && HTMLScriptElement.supports('speculationrules')) {
  console.log('Your browser supports the Speculation Rules API.');
}

Thêm quy tắc suy đoán một cách linh động thông qua JavaScript

Sau đây là ví dụ về cách thêm quy tắc phỏng đoán prerender bằng JavaScript:

if (HTMLScriptElement.supports &&
    HTMLScriptElement.supports('speculationrules')) {
  const specScript = document.createElement('script');
  specScript.type = 'speculationrules';
  specRules = {
    prerender: [
      {
        urls: ['/next.html'],
      },
    ],
  };
  specScript.textContent = JSON.stringify(specRules);
  console.log('added speculation rules to: next.html');
  document.body.append(specScript);
}

Bạn có thể xem bản minh hoạ về quá trình kết xuất trước của Speculation Rules API (sử dụng tính năng chèn JavaScript) trên trang minh hoạ về quá trình kết xuất trước này.

Việc chèn trực tiếp phần tử <script type = "speculationrules"> vào DOM bằng innerHTML sẽ không đăng ký quy tắc phỏng đoán vì lý do bảo mật và bạn phải thêm quy tắc này như đã trình bày trước đó. Tuy nhiên, nội dung được chèn linh động bằng innerHTML có chứa đường liên kết mới sẽ được các quy tắc hiện có trên trang chọn.

Tương tự, việc chỉnh sửa trực tiếp bảng điều khiển Elements (Phần tử) trong Công cụ của Chrome cho nhà phát triển để thêm phần tử <script type = "speculationrules"> sẽ không đăng ký quy tắc suy đoán. Thay vào đó, bạn phải chạy tập lệnh để thêm phần tử này vào DOM một cách linh động từ Bảng điều khiển để chèn quy tắc.

Thêm quy tắc suy đoán thông qua trình quản lý thẻ

Để thêm quy tắc phỏng đoán bằng một trình quản lý thẻ như Trình quản lý thẻ của Google (GTM), bạn cần chèn các quy tắc này thông qua JavaScript, thay vì thêm trực tiếp phần tử <script type = "speculationrules"> thông qua GTM vì những lý do tương tự như đã đề cập trước đó:

Cấu hình thẻ HTML tuỳ chỉnh trong Trình quản lý thẻ của Google — Thêm Quy tắc phỏng đoán thông qua Trình quản lý thẻ của Google.

Lưu ý rằng ví dụ này sử dụng var vì GTM không hỗ trợ const.

Huỷ quy tắc suy đoán

Việc xoá các quy tắc suy đoán sẽ khiến quá trình kết xuất trước bị huỷ. Tuy nhiên, khi điều này xảy ra, tài nguyên có thể đã được dùng để bắt đầu quá trình kết xuất trước. Do đó, bạn không nên kết xuất trước nếu có khả năng cần huỷ quá trình kết xuất trước. Mặt khác, tài nguyên được lưu vào bộ nhớ đệm vẫn có thể được sử dụng lại, vì vậy, việc huỷ có thể không hoàn toàn lãng phí và vẫn có thể mang lại lợi ích cho các hoạt động suy đoán và điều hướng trong tương lai.

Browser Support

Source

Bạn cũng có thể huỷ suy đoán bằng tiêu đề HTTP Clear-Site-Data với các lệnh prefetchCache và prerenderCache.

Điều này có thể hữu ích khi trạng thái thay đổi trên máy chủ. Ví dụ: khi gọi API "thêm vào giỏ hàng" hoặc API đăng nhập/đăng xuất.

Tốt nhất là những nội dung cập nhật trạng thái này nên được truyền đến các trang được kết xuất trước bằng các API như API Broadcast Channel. Tuy nhiên, nếu không thể thực hiện việc này hoặc cho đến khi logic đó được triển khai, thì việc huỷ suy đoán có thể dễ dàng hơn.

Quy tắc phỏng đoán và Chính sách bảo mật nội dung

Vì quy tắc phỏng đoán sử dụng phần tử <script>, nên mặc dù chỉ chứa JSON, nhưng các quy tắc này cần được đưa vào script-src Content-Security-Policy nếu trang web sử dụng chính sách này (bằng cách sử dụng hàm băm hoặc số chỉ dùng một lần).

Bạn có thể thêm một inline-speculation-rules mới vào script-src để hỗ trợ các phần tử <script type="speculationrules"> được chèn từ tập lệnh băm hoặc tập lệnh dùng số chỉ dùng một lần. Điều này không hỗ trợ các quy tắc có trong HTML ban đầu, vì vậy, các quy tắc cần được chèn bằng JavaScript cho những trang web sử dụng CSP nghiêm ngặt.

Phát hiện và tắt tính năng kết xuất trước

Tính năng kết xuất trước thường mang lại trải nghiệm tích cực cho người dùng vì tính năng này giúp kết xuất trang nhanh chóng, thường là ngay lập tức. Điều này mang lại lợi ích cho cả người dùng và chủ sở hữu trang web, vì các trang được kết xuất trước mang lại trải nghiệm người dùng tốt hơn mà có thể khó đạt được nếu không có tính năng này.

Tuy nhiên, có thể có những trường hợp bạn không muốn trang được kết xuất trước, chẳng hạn như khi trang thay đổi trạng thái – dựa trên yêu cầu ban đầu hoặc dựa trên JavaScript thực thi trên trang.

Bật và tắt tính năng kết xuất trước trong Chrome

Tính năng kết xuất trước chỉ được bật cho những người dùng Chrome có chế độ cài đặt "Tải trước trang" trong chrome://settings/performance/. Ngoài ra, tính năng kết xuất trước cũng bị tắt trên các thiết bị có bộ nhớ thấp hoặc nếu hệ điều hành đang ở chế độ Tiết kiệm dữ liệu hoặc Tiết kiệm năng lượng. Xem phần Giới hạn của Chrome.

Phát hiện và tắt tính năng kết xuất trước phía máy chủ

Các trang được kết xuất trước sẽ được gửi kèm theo tiêu đề HTTP Sec-Purpose:

Sec-Purpose: prefetch;prerender

Các trang được tìm nạp trước bằng Speculation Rules API sẽ có tiêu đề này được đặt thành prefetch:

Sec-Purpose: prefetch

Máy chủ có thể phản hồi dựa trên tiêu đề này để ghi lại các yêu cầu suy đoán, trả về nội dung khác hoặc ngăn chặn quá trình kết xuất trước. Nếu mã phản hồi cuối cùng không phải là mã thành công (tức là không nằm trong khoảng từ 200 đến 299 sau khi chuyển hướng), thì trang sẽ không được kết xuất trước và mọi trang tìm nạp trước sẽ bị loại bỏ. Cũng xin lưu ý rằng phản hồi 204 và 205 cũng không hợp lệ cho việc kết xuất trước, nhưng hợp lệ cho việc tìm nạp trước.

Nếu bạn không muốn một trang cụ thể được kết xuất trước, thì việc trả về mã phản hồi không phải 2XX (chẳng hạn như 503) là cách tốt nhất để đảm bảo điều đó không xảy ra. Tuy nhiên, để mang lại trải nghiệm tốt nhất, bạn nên cho phép kết xuất trước nhưng trì hoãn mọi hành động chỉ nên xảy ra khi trang thực sự được xem bằng JavaScript.

Phát hiện hoạt động kết xuất trước trong JavaScript

API document.prerendering sẽ trả về true trong khi trang đang kết xuất trước. Các trang có thể sử dụng API này để ngăn chặn hoặc trì hoãn một số hoạt động nhất định trong quá trình kết xuất trước cho đến khi trang thực sự được kích hoạt.

Sau khi một tài liệu được kết xuất trước được kích hoạt, activationStart của PerformanceNavigationTiming cũng sẽ được đặt thành một thời gian khác 0, thể hiện thời gian giữa thời điểm bắt đầu kết xuất trước và thời điểm tài liệu thực sự được kích hoạt.

Bạn có thể dùng một hàm để kiểm tra các trang đang kết xuất trước và đã kết xuất trước như sau:

function pagePrerendered() {
  return (
    document.prerendering ||
    self.performance?.getEntriesByType?.('navigation')[0]?.activationStart > 0
  );
}

Cách dễ nhất để xem một trang có được kết xuất trước (toàn bộ hoặc một phần) hay không là mở Công cụ cho nhà phát triển sau khi trang được kích hoạt rồi nhập performance.getEntriesByType('navigation')[0].activationStart vào bảng điều khiển. Nếu hàm trả về một giá trị khác 0, thì bạn biết rằng trang đã được kết xuất trước:

Bảng điều khiển trong Chrome DevTools cho thấy activationStart dương, cho biết trang đã được kết xuất trước — Kiểm thử tính năng kết xuất trước trong bảng điều khiển.

Khi người dùng kích hoạt trang bằng cách xem trang, sự kiện prerenderingchange sẽ được gửi trên document. Sau đó, bạn có thể dùng sự kiện này để bật các hoạt động mà trước đây sẽ được bắt đầu theo mặc định khi tải trang, nhưng bạn muốn trì hoãn cho đến khi người dùng thực sự xem trang.

Khi sử dụng các API này, JavaScript giao diện người dùng có thể phát hiện và hành động trên các trang được kết xuất trước một cách thích hợp.

Cảnh báo: PerformanceNavigationTiming.type không sử dụng giá trị prerender, giá trị này dành cho kiểu điều hướng <link rel="prerender"...> cũ hơn, ban đầu. Điều này có thể thay đổi trong tương lai, nhưng hiện tại, ứng dụng nên sử dụng API document.prerendering để xác định các trang đang kết xuất trước và một trường PerformanceNavigationTiming.activationStart khác 0 để xác định các trang đã kết xuất trước đã được kích hoạt.

Tác động đến số liệu phân tích

Dữ liệu phân tích được dùng để đo lường mức sử dụng trang web, chẳng hạn như sử dụng Google Analytics để đo lường số lượt xem trang và sự kiện. Hoặc bằng cách đo lường các chỉ số hiệu suất của trang bằng tính năng Giám sát người dùng thực (RUM).

Bạn chỉ nên kết xuất trước trang khi có nhiều khả năng người dùng sẽ tải trang đó. Đây là lý do các lựa chọn kết xuất trước trên thanh địa chỉ của Chrome chỉ xảy ra khi có xác suất cao như vậy (hơn 80% thời gian).

Tuy nhiên, đặc biệt là khi sử dụng API Quy tắc suy đoán, các trang được kết xuất trước có thể ảnh hưởng đến số liệu phân tích và chủ sở hữu trang web có thể cần thêm mã để chỉ bật số liệu phân tích cho các trang được kết xuất trước khi kích hoạt, vì không phải nhà cung cấp dịch vụ phân tích nào cũng làm việc này theo mặc định.

Bạn có thể thực hiện việc này bằng cách sử dụng Promise để chờ sự kiện prerenderingchange nếu tài liệu đang kết xuất trước hoặc phân giải ngay lập tức nếu tài liệu hiện đang:

// Set up a promise for when the page is activated,
// which is needed for prerendered pages.
const whenActivated = new Promise((resolve) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve, {once: true});
  } else {
    resolve();
  }
});

async function initAnalytics() {
  await whenActivated;
  // Initialise your analytics
}

initAnalytics();

Một phương pháp thay thế là trì hoãn các hoạt động phân tích cho đến khi trang hiển thị lần đầu tiên. Phương pháp này sẽ bao gồm cả trường hợp kết xuất trước và khi các thẻ được mở ở chế độ nền (ví dụ: bằng cách nhấp chuột phải và mở trong thẻ mới):

// Set up a promise for when the page is first made visible
const whenFirstVisible = new Promise((resolve) => {
  if (document.hidden) {
    document.addEventListener('visibilitychange', resolve, {once: true});
  } else {
    resolve();
  }
});

async function initAnalytics() {
  await whenFirstVisible;
  // Initialise your analytics
}

initAnalytics();

Mặc dù điều này có thể phù hợp với số liệu phân tích và các trường hợp sử dụng tương tự, nhưng trong các trường hợp khác, bạn có thể muốn tải thêm nội dung cho các trường hợp đó, vì vậy, bạn nên sử dụng document.prerendering và prerenderingchange để nhắm đến cụ thể các trang kết xuất trước.

Giữ lại nội dung khác trong quá trình kết xuất trước

Bạn có thể sử dụng các API tương tự đã thảo luận trước đó để giữ lại nội dung khác trong giai đoạn kết xuất trước. Đây có thể là các phần cụ thể của JavaScript hoặc toàn bộ phần tử tập lệnh mà bạn không muốn chạy trong giai đoạn kết xuất trước.

Ví dụ: với tập lệnh này:

<script src="https://example.com/app/script.js" async></script>

Bạn có thể thay đổi thành phần này thành một thành phần tập lệnh được chèn động, chỉ chèn dựa trên hàm whenActivated trước đó:

async function addScript(scriptUrl) {
  await whenActivated;
  const script = document.createElement('script');
  script.src = 'scriptUrl';
  document.body.appendChild(script);
}

addScript('https://example.com/app/script.js');

Điều này có thể hữu ích trong việc giữ lại các tập lệnh riêng biệt bao gồm số liệu phân tích hoặc hiển thị nội dung dựa trên trạng thái hoặc các biến khác có thể thay đổi trong khoảng thời gian của một lượt truy cập. Ví dụ: các đề xuất, trạng thái đăng nhập hoặc biểu tượng giỏ hàng đều có thể được giữ lại để đảm bảo thông tin đã cập nhật được hiển thị.

Mặc dù điều này có thể xảy ra thường xuyên hơn khi sử dụng tính năng kết xuất trước, nhưng những điều kiện này cũng đúng với các trang được tải trong thẻ nền đã đề cập trước đó (vì vậy, bạn có thể sử dụng hàm whenFirstVisible thay cho whenActivated).

Trong nhiều trường hợp, trạng thái cũng nên được kiểm tra khi có các thay đổi chung về visibilitychange. Ví dụ: khi quay lại một trang đã được đưa vào nền, mọi bộ đếm giỏ hàng đều phải được cập nhật số lượng mặt hàng mới nhất trong giỏ hàng. Vì vậy, đây không phải là vấn đề riêng của tính năng kết xuất trước, mà tính năng kết xuất trước chỉ làm cho vấn đề hiện có trở nên rõ ràng hơn.

Một cách mà Chrome giảm thiểu một số nhu cầu về việc gói tập lệnh hoặc hàm theo cách thủ công là một số API nhất định sẽ bị giữ lại như đã đề cập trước đó, đồng thời các iframe của bên thứ ba cũng không được hiển thị, vì vậy, chỉ có nội dung trên đó mới cần được giữ lại theo cách thủ công.

Đo lường hiệu suất

Để đo lường các chỉ số hiệu suất, công cụ phân tích nên xem xét liệu có nên đo lường các chỉ số này dựa trên thời gian kích hoạt thay vì thời gian tải trang mà API trình duyệt sẽ báo cáo hay không.

Đối với Core Web Vitals, được Chrome đo lường thông qua Báo cáo trải nghiệm người dùng trên Chrome, các chỉ số này nhằm đo lường trải nghiệm người dùng. Vì vậy, các chỉ số này được đo lường dựa trên thời gian kích hoạt. Điều này thường dẫn đến LCP 0 giây, cho thấy đây là một cách hiệu quả để cải thiện Core Web Vitals.

Kể từ phiên bản 3.1.0, thư viện web-vitals đã được cập nhật để xử lý các thao tác điều hướng được kết xuất trước theo cách Chrome đo lường Core Web Vitals. Phiên bản này cũng gắn cờ các thao tác điều hướng được kết xuất trước cho những chỉ số đó trong thuộc tính Metric.navigationType nếu trang được kết xuất trước toàn bộ hoặc một phần.

Đo lường hoạt động kết xuất trước

Bạn có thể biết một trang có được kết xuất trước hay không thông qua mục nhập activationStart khác 0 của PerformanceNavigationTiming. Sau đó, bạn có thể ghi lại thông tin này bằng Phương diện tuỳ chỉnh hoặc tương tự khi ghi lại lượt xem trang, ví dụ: sử dụng hàm pagePrerendered được mô tả trước đó:

// Set Custom Dimension for Prerender status
gtag('set', { 'dimension1': pagePrerendered() });
// Initialise GA - including sending page view by default
gtag('config', 'G-12345678-1');

Điều này sẽ cho phép số liệu phân tích của bạn cho biết số lượng thao tác điều hướng được kết xuất trước so với các loại thao tác điều hướng khác, đồng thời cho phép bạn liên kết mọi chỉ số hiệu suất hoặc chỉ số kinh doanh với các loại thao tác điều hướng khác nhau này. Trang tải nhanh hơn đồng nghĩa với việc người dùng hài lòng hơn, điều này thường có thể tác động thực sự đến các chỉ số kinh doanh như nghiên cứu điển hình của chúng tôi cho thấy.

Khi đo lường tác động của việc kết xuất trước trang đối với hoạt động kinh doanh để điều hướng tức thì, bạn có thể quyết định xem có nên đầu tư thêm công sức vào việc sử dụng công nghệ này để cho phép kết xuất trước nhiều thao tác điều hướng hơn hay không, hoặc tìm hiểu lý do khiến các trang không được kết xuất trước.

Đo lường tỷ lệ truy cập

Ngoài việc đo lường tác động của những trang được truy cập sau khi kết xuất trước, bạn cũng cần đo lường những trang được kết xuất trước và không được truy cập sau đó. Điều này có thể cho thấy bạn đang kết xuất trước quá nhiều và sử dụng hết tài nguyên quý giá của người dùng mà không mang lại nhiều lợi ích.

Bạn có thể đo lường điều này bằng cách kích hoạt một sự kiện phân tích khi quy tắc phỏng đoán được chèn (sau khi kiểm tra trình duyệt có hỗ trợ tính năng kết xuất trước bằng HTMLScriptElement.supports('speculationrules')) để cho biết rằng tính năng kết xuất trước đã được yêu cầu. (Xin lưu ý rằng việc yêu cầu kết xuất trước không có nghĩa là quá trình kết xuất trước đã bắt đầu hoặc hoàn tất. Như đã lưu ý trước đó, kết xuất trước là một gợi ý cho trình duyệt và trình duyệt có thể chọn không kết xuất trước các trang dựa trên chế độ cài đặt của người dùng, mức sử dụng bộ nhớ hiện tại hoặc các phương pháp phỏng đoán khác.)

Sau đó, bạn có thể so sánh số lượng sự kiện này với số lượt xem trang kết xuất trước thực tế. Hoặc kích hoạt một sự kiện khác khi kích hoạt nếu việc đó giúp bạn dễ so sánh hơn.

Sau đó, bạn có thể ước tính "tỷ lệ lượt truy cập thành công" bằng cách xem sự khác biệt giữa hai con số này. Đối với những trang mà bạn đang sử dụng Speculation Rules API để kết xuất trước, bạn có thể điều chỉnh các quy tắc một cách phù hợp để đảm bảo duy trì tỷ lệ truy cập cao nhằm cân bằng giữa việc sử dụng tài nguyên của người dùng để giúp họ và việc sử dụng tài nguyên một cách không cần thiết.

Xin lưu ý rằng một số hoạt động kết xuất trước có thể đang diễn ra do thanh địa chỉ kết xuất trước chứ không chỉ do quy tắc suy đoán của bạn. Bạn có thể kiểm tra document.referrer (sẽ trống đối với thao tác điều hướng trên thanh địa chỉ, bao gồm cả thao tác điều hướng trên thanh địa chỉ được kết xuất trước) nếu muốn phân biệt các thao tác này.

Bạn cũng nên xem xét những trang không có hoạt động kết xuất trước, vì điều đó có thể cho thấy những trang này không đủ điều kiện để kết xuất trước, ngay cả từ thanh địa chỉ. Điều đó có thể đồng nghĩa với việc bạn không được hưởng lợi từ tính năng nâng cao hiệu suất này. Nhóm Chrome đang tìm cách bổ sung thêm công cụ để kiểm tra điều kiện sử dụng tính năng Kết xuất trước, có thể tương tự như công cụ kiểm thử bfcache, đồng thời có thể thêm một API để cho biết lý do khiến quá trình kết xuất trước không thành công.

Tác động đối với tiện ích

Hãy xem bài đăng chuyên biệt về Tiện ích của Chrome: Mở rộng API để hỗ trợ tính năng Điều hướng tức thì, trong đó trình bày chi tiết một số điểm cần cân nhắc khác mà tác giả tiện ích có thể cần suy nghĩ về các trang được kết xuất trước.

Phản hồi

Nhóm Chrome đang tích cực phát triển tính năng kết xuất trước và có nhiều kế hoạch mở rộng phạm vi của những tính năng đã được cung cấp trong bản phát hành Chrome 108. Chúng tôi hoan nghênh mọi ý kiến phản hồi về kho lưu trữ GitHub hoặc thông qua trình theo dõi sự cố của chúng tôi, đồng thời mong được lắng nghe và chia sẻ các nghiên cứu điển hình về API mới thú vị này.

Đường liên kết có liên quan

Xác nhận

Hình thu nhỏ của Marc-Olivier Jodoin trên Unsplash

Trình kết xuất trước trang trong Chrome để di chuyển trang tức thì Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Sơ lược về quá trình kết xuất trước

Trang được kết xuất trước như thế nào?

Tác động của việc kết xuất trước

Xem cụm từ gợi ý trên thanh địa chỉ của Chrome

Speculation Rules API

Danh sách URL

Quy tắc về tài liệu

Sự háo hức

Tìm nạp trước

Prerender until script

Giới hạn của Chrome

Cách đưa quy tắc suy đoán vào một trang

Tiêu đề HTTP Speculation-Rules

Trường thẻ quy tắc suy đoán

Trường target_hint của quy tắc suy đoán

Quy tắc suy đoán và SPA

Gỡ lỗi các quy tắc suy đoán

Nhiều quy tắc suy đoán

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

Các quy định hạn chế và điểm cải tiến trong tương lai đối với quy tắc suy đoán

Phát hiện khả năng hỗ trợ Speculation Rules API

Thêm quy tắc suy đoán một cách linh động thông qua JavaScript

Thêm quy tắc suy đoán thông qua trình quản lý thẻ

Huỷ quy tắc suy đoán

Quy tắc phỏng đoán và Chính sách bảo mật nội dung

Phát hiện và tắt tính năng kết xuất trước

Bật và tắt tính năng kết xuất trước trong Chrome

Phát hiện và tắt tính năng kết xuất trước phía máy chủ

Phát hiện hoạt động kết xuất trước trong JavaScript

Tác động đến số liệu phân tích

Giữ lại nội dung khác trong quá trình kết xuất trước

Đo lường hiệu suất

Đo lường hoạt động kết xuất trước

Đo lường tỷ lệ truy cập

Tác động đối với tiện ích

Phản hồi

Đường liên kết có liên quan

Xác nhận

Trình kết xuất trước trang trong Chrome để di chuyển trang tức thì

Tiêu đề HTTP `Speculation-Rules`

Trường `target_hint` của quy tắc suy đoán

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