Trang này được dịch bởi Cloud Translation API.

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

Barry Pollard

Hỗ trợ trình duyệt

Nhóm Chrome đã đưa trở lại chế độ hiển thị trước đầy đủ các trang trong tương lai mà người dùng có khả năng sẽ truy cập.

Lịch sử ngắn về quá trình kết xuất trước

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

Tính năng kết xuất trước cũ bằng cách sử dụng gợi ý rel=prerender của đường liên kết đã ngừng hoạt động và thay vào đó là NoState Prefetch (Tìm nạp trước NoState), tính năng này đã tìm nạp tài nguyên mà trang sau này cần, nhưng không kết xuất trước hoàn toàn trang cũng như không thực thi JavaScript. NoState Prefetch 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 phân phối tải trang tức thì như quá trình kết xuất trước đầy đủ.

Nhóm Chrome hiện đã thêm lại quá trình kết xuất trước đầy đủ trở lại trong Chrome. Để tránh các chức năng phức tạp với hoạt động sử dụng hiện tại và cho phép mở rộng hoạt độ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"...> (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 trong tương lai.

Một 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 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 chắc chắn rằng bạn sẽ truy cập trang đó.
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 giữ con trỏ trên 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 theo hướng dẫn của công cụ tìm kiếm.
Các trang web có thể sử dụng API Quy tắc suy đoán để cho Chrome biết trang nào sẽ kết xuất trước theo phương thức lập trình. Thao tác này sẽ thay thế những việc <link rel="prerender"...> đã dùng để làm 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 quảng cáo này có thể tồn tại tĩnh trên trang hoặc được JavaScript chèn động khi chủ sở hữu trang thấy phù hợp.

Trong mỗi trường hợp này, quá trình kết xuất trước sẽ hoạt động như thể trang đã được mở trong một thẻ nền ẩn, sau đó được "kích hoạt" bằng cách thay thế thẻ 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 được 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, nghĩa là bạn vẫn có thể có một khởi đầu thuận lợi.

Vì trang được kết xuất trước đang mở ở trạng thái ẩn, nên một số API gây ra hành vi xâm nhập (ví dụ: lời nhắc) 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ực hiện được 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ị các lý do huỷ kết xuất trước dưới dạng API, đồng thời cải thiện các chức năng của Công cụ cho nhà phát triển để giúp xác định các trường hợp hiếm gặp này dễ dàng hơn.

Lưu ý: Bạn nên coi các trang được kết xuất trước là gợi ý và tính năng nâng cao tăng dần. Không giống như preload, kết xuất trước là một gợi ý suy đoán và trình duyệt có thể chọn không hành động 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 thông tin phỏng đoán khác.

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

Quá trình kết xuất trước cho phép tải trang gần như ngay lập tức như trong video sau:

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

Trang web ví dụ vốn là một trang web có tốc độ nhanh, nhưng ngay cả với điều này, bạn có thể thấy cách 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 Các chỉ số quan trọng về trang web của trang web (với LCP gần như bằng 0), CLS giảm (vì mọi CLS về lượt tải xảy ra trước lượt 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 được kích hoạt trước khi tải hoàn toàn, việc tải trang ngay từ đầu sẽ giúp 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 đến 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á mức sẽ gây tổn hại tài nguyên người dùng. Chỉ kết xuất trước khi có nhiều khả năng trang sẽ được điều hướng tới.

Xem mục Đ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 gợi ý của Chrome trên thanh địa chỉ

Đối với trường hợp sử dụng đầu tiên, bạn có thể xem cụm từ gợi ý của Chrome cho các URL trên trang chrome://predictors:

Trang Công cụ dự đoán của Chrome đã lọc để hiển thị các dự đoán 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 Công cụ dự đoán của Chrome.

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

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

Những công cụ dự đoán này cũng là yếu tố thúc đẩy các tuỳ chọn đề xuất trên thanh địa chỉ mà bạn có thể nhận thấy:

Tính năng "Typeahead" của thanh địa chỉ của Chrome — Tính năng "Typeahead" của thanh địa chỉ.

Chrome sẽ liên tục cập nhật công cụ dự đoán dựa trên thao tác nhập và lựa chọn của bạn.

Đối với độ tin cậy lớn hơn 50% (hiển thị bằng màu hổ phách), Chrome sẽ 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 độ tin cậy lớn hơn 80% (hiện bằng màu xanh lục), Chrome sẽ kết xuất trước URL.

Speculation Rules API (API Quy tắc suy đoán)

Đối với tuỳ chọn kết xuất trước thứ ba, nhà phát triển web có thể chèn hướng dẫn JSON vào các 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:

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

Hoặc theo quy tắc tài liệu (có trong Chrome 121), quá trình này sẽ kết xuất trước 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>

Nhóm Chrome đã chuẩn bị Lớp học lập trình về quy tắc suy đoán để hướng dẫn bạn cách thêm Quy tắc suy đoán vào trang web.

Háo hức

Hỗ trợ trình duyệt

Chế độ cài đặt eagerness 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 đối với các quy tắc tài liệu:

immediate: Giá trị này dùng để suy đoán sớm nhất có thể, tức là ngay khi quan sát được các quy tắc suy đoán.
eager: Chế độ này hoạt động giống hệt với chế độ cài đặt immediate, nhưng trong tương lai, chúng tôi sẽ tìm cách đặt chế độ này ở đâu đó trong khoảng từ immediate đến moderate.
moderate: Hành động này thực hiện 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 trên sự kiện pointerdown nếu sớm hơn và trên thiết bị di động không có sự kiện hover).
conservative: Thao tác này sẽ suy đoán 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 các quy tắc list ở 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. Vì một tài liệu có thể chứa nhiều URL, nên bạn nên thận trọng khi sử dụng immediate hoặc eager cho 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 cầ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 và gọn nhẹ, việc suy đoán nhiều 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 của người dùng nhằm hạn chế lãng phí.

Tuỳ chọn moderate là nền tảng trung gian và nhiều trang web có thể hưởng lợi từ quy tắc suy đ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ỏ qua đường liên kết trong 200 mili giây hoặc trên sự kiện con trỏ xuống dưới dạng cách triển khai các quy tắc suy đoán cơ bản nhưng vẫn mạnh mẽ:

<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 các 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 đầy đủ. Đây thường có thể là bước đầu tiên nên làm trong quá 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ũ vừa được 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 suy đoán được xử lý theo cách tương tự như thao tác điều hướng (nhưng sau đó không hiển thị) và được lưu trong bộ nhớ để trình duyệt truy cập nhanh hơn khi cần. Việc này cũng cho phép tìm nạp trước các tài liệu không thể lưu 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 những tài nguyên này từ giờ trở đi, chỉ dùng <link rel="prefetch"> để tìm nạp trước tài nguyên phụ.

Các giới hạn của Chrome

Chrome có các giới hạn để ngăn việc sử dụng quá mức API quy tắc suy đoán:

sự háo hức	Tìm nạp trước	Kết xuất trước
`immediate`/`eager`	50	10
`moderate`/`conservative`	2 (FIFO)	2 (FIFO)

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

Chế độ cài đặt moderate và conservative (tuỳ 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, 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à thay thế bằng suy đoán mới hơn để tiết kiệm bộ nhớ. Việc suy đoán đã bị huỷ bỏ có thể được kích hoạt lại (ví dụ: bằng cách di chuột qua đường 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, đưa ra suy đoán cũ nhất. Trong trường hợp này, 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 đó, do đó việc suy đoán thêm thời gian sẽ giảm chi phí. Do đó, giới hạn này được đặt ở ngưỡng tương đối là 2. Quy tắc tĩnh danh sách không được kích hoạt bởi hành động của người dùng, do đó sẽ có giới hạn cao hơn vì trình duyệt không thể biết được quy tắc nào cần và khi nào cần chúng.

Các giới hạn immediate và eager cũng có giá trị linh động, vì vậy, việc xoá phần tử tập lệnh URL list sẽ tạo ra hạn mức bằng cách huỷ bỏ những suy đoán đã được 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:

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

Chrome cũng không hiển thị các iframe nhiều 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 mục đích giảm tác động của việc đầu cơ quá mức có thể gây bất lợi cho người dùng.

Cách thêm các quy tắc suy đoán trên trang

Quy tắc suy đoán có thể được đưa vào HTML của trang theo cách tĩnh hoặc được chèn động vào trang bằng JavaScript:

Quy tắc suy đoán được bao gồm tĩnh: Ví dụ: trang web truyền thông 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à điều hướng tiếp theo cho nhiều người dùng. Ngoài ra, bạn có thể sử dụng các quy tắc tài liệu có moderate hoặc conservative để suy đoán khi người dùng tương tác với các đường liên kết.
Các quy tắc suy đoán được chèn một cách linh hoạt: 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 thông tin phỏng đoán khác.

Bạn 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 đối với những quy tắc ưu tiên áp dụng tính năng chèn động dựa trên các thao tác như di chuột qua hoặc nhấp xuống một đường liên kết (như nhiều thư viện đã làm trước đây với <link rel=prefetch>).

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

Tiêu đề HTTP `Speculation-Rules`

Hỗ trợ trình duyệt

Nguồn

Bạn cũng có thể phân phối các 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 chúng vào HTML của tài liệu. Nhờ đó, các CDN 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 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 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 các quy tắc suy đoán của mình. Nếu không, URL tương đối sẽ tương ứng với URL của tệp JSON theo 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ả các đường liên kết có cùng nguồn gốc.

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 hỗ trợ cho các trang Ứng dụng trang đơn (SPA) hoặc màn hình ứng dụng. Những cấu trúc này không sử dụng tính năng tìm nạp tài liệu mà thay vào đó thực hiện tìm nạp API hoặc tìm nạp một phần dữ liệu hoặc trang. Sau đó, dữ liệu này sẽ được xử lý và trình bày trên trang hiện tại. Ứng dụng có thể tìm nạp trước dữ liệu cần thiết cho những sự kiện này được gọi là "điều hướng mềm" ngoài các quy tắc suy đoán, nhưng không thể kết xuất trước.

Bạn có thể sử 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 phát sinh của một số SPA. Tuy nhiên, không thể kết xuất trước những thay đổi về tuyến đường trong ứng dụng.

Quy tắc suy đoán

Xem bài đăng chuyên biệt về quy tắc suy đoán gỡ lỗi để biết các tính năng mới của Công cụ của Chrome cho nhà phát triển 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 quy tắc hiện tại. Do đó, tất cả các cách sau đây đều dẫn đến cả việc kết xuất trướ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 tập hợp speculationrules

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

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

Hỗ trợ trình duyệt

Nguồn

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à tham 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ụ: tham số UTM được Google Analytics sử dụng để đo lường chiến dịch, nhưng thường không dẫn đến việc các trang khác nhau đang đượ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ủ, nê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 với tài nguyên được phân phối và do đó, 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 tài liệu, vốn chỉ khác nhau ở các tham số này. Tính năng này được hỗ trợ trong Chrome (và các trình duyệt dựa trên Chromium) đối với suy đoán điều hướng tìm nạp trước (mặc dù chúng tôi cũng đang tìm cách hỗ trợ tính năng này để kết xuất trước).

Các quy tắc suy đoán hỗ trợ việc sử dụng expects_no_vary_search để cho biết vị trí dự kiến tiêu đề HTTP No-Vary-Search sẽ được trả về. 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 là giống nhau cho cả hai mã sản phẩm 123 và 124. Tuy nhiên, nội dung trang rốt cuộc sẽ khác nhau dựa trên việc 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 thông số tìm kiếm id. Vì vậy, chúng tôi đã tìm nạp trước URL đó một cách nghiêm ngặt và sẽ trả về một tiêu đề HTTP No-Vary-Search cho thấy trang có thể dùng được cho bất kỳ tham 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ì có thể trình duyệt chưa nhận được trang /products. Trong trường hợp này, trình duyệt không biết liệu mình có chứa tiêu đề HTTP No-Vary-Search hay không. Sau đó, trình duyệt sẽ đưa ra lựa chọn tìm nạp lại đường liên kết hoặc đợi hoàn tất quá trình tìm nạp trước để 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 phản hồi 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.

Các hạn chế đối với quy tắc suy đoán và các tính năng nâng cao trong tương lai

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

Theo mặc định, suy đoán chỉ được đưa vào các trang có cùng nguồn gốc. Suy đoán các trang nhiều nguồn gốc cùng 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 quy trình này, trang được suy đoán (trong ví dụ này là https://b.example.com) cần chọn tham gia bằng cách thêm tiêu đề HTTP Supports-Loading-Mode: credentialed-prerender, nếu không, Chrome sẽ huỷ suy đ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ông phải cùng trang web và nhiều nguồn gốc, miễn là trang được kết xuất trước không tồn tại cookie và trang được kết xuất trước chọn tham gia với tiêu đề HTTP Supports-Loading-Mode: uncredentialed-prerender tương tự.

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

Với các hạn chế hiện tại đó, một mẫu có thể cải thiện trải nghiệm người dùng cho cả liên kết nội bộ và liên kết ngoài (nếu có thể) là kết xuất trước các URL cùng nguồn gốc và thử 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>

Quy định hạn chế này nhằm ngăn chặn việc suy đoán nhiều nguồn gốc đối với các đường liên kết nhiều nguồn gốc theo mặc định là cần thiết vì lý do bảo mật. Đây là một sự cải tiến so với <link rel="prefetch"> đối với các đích đến nhiều nguồn gốc, vốn 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í và 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 hỗ trợ Speculation Rules API (API Quy tắc suy đoán)

Bạn có thể hỗ trợ tính năng phát hiện Speculation Rules API bằng các bước 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 các quy tắc suy đoán một cách linh động thông qua JavaScript

Dưới đây là ví dụ về cách thêm quy tắc suy đ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 API quy tắc suy đoán bằng cách sử dụng tính năng chèn JavaScript trên trang minh hoạ kết xuất trước này.

Việc chèn trực tiếp một phần tử <script type = "speculationrules"> vào DOM sẽ không đăng ký các quy tắc suy đoán vì phần tử này phải được thêm như đã trình bày trước đó. Ví dụ: việc chỉnh sửa trực tiếp bảng điều khiển 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ý các quy tắc suy đoán. Thay vào đó, tập lệnh để tự động thêm phần tử này vào DOM phải chạy trên 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 các quy tắc suy đ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 phải 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ì các lý do 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 suy đoán thông qua Trình quản lý thẻ của Google.

Xin 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á quy tắc suy đoán sẽ khiến quá trình kết xuất trước bị huỷ. Tuy nhiên, vào thời điểm xảy ra quá trình này, tài nguyên có thể đã được dùng để bắt đầu quá trình kết xuất trước. Vì vậy, bạn không nên kết xuất trước nếu có khả năng cần phải huỷ quá trình kết xuất trước.

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

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

Bạn có thể thêm inline-speculation-rules mới vào script-src để cho phép 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 không chuyển đổi. Tệp 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 phải đượ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

Trình 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ì phương pháp này cho phép hiển thị trang nhanh — thường là tức thì. Đ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 tốt hơn cho người dùng.

Tuy nhiên, có thể có những trường hợp bạn không muốn xảy ra quá trình hiển thị trước trang, 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 các trang" trong chrome://settings/performance/. Ngoài ra, tính năng kết xuất trước cũng sẽ 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 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 cùng với tiêu đề HTTP Sec-Purpose:

Sec-Purpose: prefetch;prerender

Những trang được tìm nạp trước bằng Speculation Rules API (API Quy tắc suy đoán) sẽ có tiêu đề này được đặt thành chỉ prefetch:

Sec-Purpose: prefetch

Các 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 quá trình kết xuất trước diễn ra. Nếu mã phản hồi không thành công được trả về (nghĩa là không phải mã 200 hoặc 304), 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ỏ.

Nếu bạn không muốn một trang cụ thể được kết xuất trước, thì đây là cách tốt nhất để đảm bảo trang đó sẽ 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 cách sử dụng JavaScript.

Phát hiện 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 tính năng 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 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 thời gian khác 0, biểu thị thời gian từ khi bắt đầu kết xuất trước đến khi tài liệu thực sự được kích hoạt.

Bạn có thể có hàm để kiểm tra việc kết xuất trước và kết xuất trước các trang như sau:

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

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

Bảng điều khiển trong Công cụ của Chrome cho nhà phát triển cho thấy lượt kích hoạt tích cựcBắt đầu cho thấy trang đã được kết xuất trước — Thử nghiệm kết xuất trước trong bảng điều khiển.

Khi người dùng xem trang kích hoạt trang, sự kiện prerenderingchange sẽ được gửi đi trên document. Sau đó, sự kiện này có thể được dùng để bật các hoạt động trước đó sẽ 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 những API này, JavaScript ngoài 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 dành cho loại điều hướng <link rel="prerender"...> cũ, cũ. Điều này có thể thay đổi trong tương lai, nhưng hiện tại, ứng dụng khách nên sử dụng API document.prerendering để xác định các trang kết xuất trước và 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ừ đó.

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

Analytics đượ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 lượt xem trang và các sự kiện. Hoặc bằng cách đo lường chỉ số hiệu suất của các trang bằng tính năng Giám sát người dùng thực (rum).

Trang chỉ nên được kết xuất trước khi người dùng có khả năng cao sẽ tải trang. Đây là lý do tại sao các tùy 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 (lớn hơn 80% thời gian).

Tuy nhiên, đặc biệt là khi sử dụng Speculation Rules API (API Quy tắc suy đoán), các trang được kết xuất trước có thể ảnh hưởng đến việc phân tích và chủ sở hữu trang web có thể cần phải thêm mã bổ sung để chỉ bật tính năng 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 tất cả các nhà cung cấp dịch vụ phân tích đều có thể làm điều này theo mặc định.

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

// 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 cho đến khi trang hiển thị lần đầu tiên. Điều này sẽ bao gồm cả trường hợp kết xuất trước và cả khi các thẻ được mở trong nền (ví dụ: khi 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 whenActivated = new Promise((resolve) => {
  if (document.hidden) {
    document.addEventListener('visibilitychange', resolve, {once: true});
  } else {
    resolve();
  }
});

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

initAnalytics();

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

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

Để đo lường các chỉ số hiệu suất, Analytics cần cân nhắc xem 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à các API trình duyệt sẽ báo cáo hay không.

Đối với Các chỉ số quan trọng về trang web, đượ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 mục đích đo lường trải nghiệm người dùng. Vì vậy, những chỉ số này được đo lường dựa trên thời gian kích hoạt. Việc này thường sẽ dẫn đến tình trạng LCP là 0 giây, ví dụ: việc cho thấy đây là cách hiệu quả để cải thiện Các chỉ số quan trọng về trang web.

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 giống như cách Chrome đo lường Các chỉ số quan trọng về trang web. 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 lượt kết xuất trước

Liệu một trang được kết xuất trước có thể xem được với mục nhập activationStart khác 0 của PerformanceNavigationTiming hay không. Sau đó, bạn có thể ghi nhật ký dữ liệu này bằng một Phương diện tuỳ chỉnh hoặc một phương diện tương tự khi ghi nhật ký lượt xem trang (ví dụ: sử dụng hàm pagePrerendered đã 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');

Nhờ đó, số liệu phân tích của bạn có thể cho biết số lượng thành phần điều hướng được kết xuất trước so với các hình thức điều hướng khác, đồng thời cho phép bạn liên hệ bất kỳ chỉ số hiệu suất hoặc chỉ số kinh doanh nào với các kiểu điều hướng này. Trang tải nhanh hơn nghĩa là người dùng hài lòng hơn. Điều này thường tác động thực tế đến các kết quả đo lường 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 kinh doanh của trang kết xuất trước cho điều hướng tức thì, bạn có thể quyết định xem có đáng đầu tư thêm nỗ lực vào việc sử dụng công nghệ này để cho phép nhiều điều hướng hơn được kết xuất trước hay để điều tra lý do trang không được kết xuất trước.

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

Ngoài việc đo lường tác động của các trang được truy cập sau khi kết xuất trước, bạn cũng cần đo lường các trang được kết xuất trước và không 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 có giá trị của người dùng mà không mang lại lợi ích gì.

Điều này có thể được đo lường bằng cách kích hoạt một sự kiện phân tích khi các quy tắc suy đoán được chèn (sau khi kiểm tra để trình duyệt hỗ trợ kết xuất trước bằng HTMLScriptElement.supports('speculationrules')) để cho biết rằng kết xuất trước đã được yêu cầu. (Lưu ý rằng chỉ vì quá trình kết xuất trước đã được yêu cầu nên không cho biết rằng quá trình kết xuất trước đã được bắt đầu hoặc hoàn tất, như đã lưu ý trước đó, quá trình 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 trong 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ễ dàng so sánh hơn.

Sau đó, có thể ước chừng "tỷ lệ lượt truy cập thành công" bằng cách xem xét 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 để hiển thị trước các trang, bạn có thể điều chỉnh các quy tắc một cách phù hợp nhằm đảm bảo duy trì tỷ lệ truy cập cao nhằm duy trì sự cân bằng giữa việc sử dụng hết tài nguyên người dùng để giúp họ so với 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ố kết xuất trước có thể diễn ra do kết xuất trước trên thanh địa chỉ chứ không chỉ do các quy tắc suy đoán của bạn. Bạn có thể kiểm tra document.referrer (sẽ được để trống để điều hướng trên thanh địa chỉ, bao gồm cả các thành phần đ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 thành phần này.

Ngoài ra, hãy nhớ xem các trang không có kết xuất trước vì điều đó có thể cho biết các trang này không đủ điều kiện để kết xuất trước, ngay cả từ thanh địa chỉ. Điều đó có nghĩa là bạn có thể 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 tính đủ điều kiện của quá trình kết xuất trước, có thể tương tự như công cụ kiểm tra bfcache và cũng có thể thêm API để cho biết lý do quá trình kết xuất trước không thành công.

Tác động đến tiện ích

Xem bài đăng riêng về Tiện ích của Chrome: API Mở rộng để hỗ trợ tính năng Điều hướng tức thì, trong đó nêu 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 cân nhắc đối với các trang được kết xuất trước.

Ý kiến 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à chúng tôi có nhiều kế hoạch mở rộng phạm vi nội dung đượ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 sử dụng công cụ theo dõi lỗi của chúng tôi. Chúng tôi rất mong nhận được phản hồi 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ì

Lịch sử ngắn về quá trình kết xuất trước

Một 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 gợi ý của Chrome trên thanh địa chỉ

Speculation Rules API (API Quy tắc suy đoán)

Háo hức

Tìm nạp trước

Các giới hạn của Chrome

Cách thêm các quy tắc suy đoán trên trang

Tiêu đề HTTP Speculation-Rules

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

Quy tắc suy đoán

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

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

Các hạn chế đối với quy tắc suy đoán và các tính năng nâng cao trong tương lai

Phát hiện hỗ trợ Speculation Rules API (API Quy tắc suy đoán)

Thêm các 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 suy đ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 kết xuất trước phía máy chủ

Phát hiện kết xuất trước trong JavaScript

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

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

Đo lường lượt kết xuất trước

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

Tác động đến tiện ích

Ý kiến phản hồi

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

Xác nhận

Tiêu đề HTTP `Speculation-Rules`

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