Cải thiện hiệu suất tải trang tiếp theo

Tính năng web: Quy tắc suy đoán

Một trong những cách hiệu quả nhất để cải thiện hiệu suất tải trang cho người dùng khi họ di chuyển trên một trang web là bắt đầu tải trang tiếp theo mà họ sắp truy cập trước khi họ truy cập trang đó. Bạn có thể thực hiện việc này thông qua một kỹ thuật gọi là tải suy đoán bằng Speculation Rules API.

Cách hoạt động

Tính năng tải suy đoán hoạt động bằng cách sử dụng các quy tắc suy đoán dựa trên JSON để thông báo cho trình duyệt về các đường liên kết có thể được tìm nạp trước hoặc kết xuất trước, giúp cải thiện hiệu suất tải trang khi người dùng nhấp vào các đường liên kết đó.

Các quy tắc này có thể là một danh sách URL được cố định giá trị trong mã bằng khoá urls (gọi là quy tắc danh sách) hoặc bằng khoá where chứa một tập hợp bộ chọn href và bộ chọn CSS dùng để tìm đường liên kết trên trang (gọi là quy tắc document).

Các quy tắc cũng có thể bao gồm thuộc tính eagerness không bắt buộc, chỉ định thời điểm trang sẽ được tìm nạp trước hoặc kết xuất trước. Bạn có thể đặt thuộc tính eagerness thành immediate, eager, moderate hoặc conservative. immediate suy đoán càng sớm càng tốt, trong khi các chế độ khác chờ tín hiệu của người dùng, chẳng hạn như di chuột trong một khoảng thời gian ngắn, trong một khoảng thời gian dài hơn hoặc bắt đầu nhấp vào trang tương ứng.

Bạn có thể kết hợp các quy tắc với nhiều chế độ cài đặt mức độ ưu tiên để tìm nạp trước một cách nhanh chóng, sau đó kết xuất trước khi người dùng tương tác nhiều hơn.

Trường hợp sử dụng

Tính năng tải suy đoán đặc biệt hữu ích cho các trang tĩnh, nơi nội dung không có khả năng thay đổi thường xuyên và các trang có chi phí sản xuất thấp hơn, đặc biệt là nếu được lưu vào bộ nhớ đệm ở biên. Bạn cũng có thể sử dụng phương pháp này cho các trang động, nhưng cần lưu ý đến khả năng nội dung bị lỗi thời.

Tính năng tải suy đoán thường được dùng cho các đường liên kết cùng nguồn gốc, mặc dù các lựa chọn nâng cao hơn cho phép suy đoán một số đường liên kết khác nguồn gốc. Hướng dẫn này tập trung vào trường hợp sử dụng cùng nguồn gốc phổ biến hơn.

Tải suy đoán tích cực hơn là một lựa chọn phù hợp cho những trang có khả năng được truy cập tiếp theo, chẳng hạn như bài viết tiêu đề hoặc trang tiếp theo trong một quy trình từng bước như học một khoá học.

Tải suy đoán ít chủ động hơn là một lựa chọn phù hợp khi không rõ người dùng sẽ làm gì tiếp theo, khi có nhiều đường liên kết trên trang và mỗi đường liên kết đều có khả năng được truy cập như nhau. Bằng cách chờ thêm tín hiệu (chẳng hạn như di chuột hoặc bắt đầu nhấp vào trang), bạn có thể bắt đầu sớm trên trang tiếp theo và cải thiện trải nghiệm người dùng, ngay cả khi trang đó chưa được tìm nạp trước hoặc kết xuất trước hoàn toàn.

Tương tự, tìm nạp trước là một lựa chọn thận trọng hơn so với kết xuất trước, sử dụng ít tài nguyên hơn (trên cả phía máy khách và máy chủ) nhưng mang lại ít lợi ích hơn cho người dùng. Đây là lựa chọn phù hợp cho quá trình triển khai ban đầu, sau đó mở rộng sang kết xuất trước khi nhà phát triển yêu cầu rõ ràng.

Cách sử dụng

Quy tắc suy đoán có định dạng dựa trên JSON và có thể được đưa vào thẻ <script type="speculationrules">. Bạn có thể đưa các quy tắc vào <head> hoặc <body> của tài liệu hoặc thêm linh động bằng JavaScript.

Bạn cũng có thể sử dụng tag ở cấp độ chung hoặc trên cơ sở từng quy tắc. Khi được đặt, thẻ này sẽ được đưa vào tiêu đề Sec-Speculation-Tags và cho phép bạn xác định phía máy chủ những suy đoán nào đã được đưa ra.

Ví dụ về quy tắc danh sách URL đơn giản để tìm nạp trước các URL được xác định trước

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

Ví dụ về một quy tắc tài liệu đơn giản để kết xuất trước tất cả các đường liên kết cùng nguồn gốc trên một trang

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "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>

Ví dụ về một nhóm quy tắc kết hợp

Ví dụ này cho thấy một nhóm quy tắc tìm nạp trước tất cả các đường liên kết một cách nhanh chóng, sau đó tiếp tục kết xuất trước các đường liên kết đó khi nhận được nhiều tín hiệu hơn với mức độ nhanh chóng moderate.

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

Các phương pháp hay nhất

  • NÊN sử dụng quy tắc suy đoán để tìm nạp trước và kết xuất trước những trang mà người dùng có khả năng sẽ truy cập tiếp theo.
  • NÊN sử dụng quy tắc suy đoán cho các trang web tĩnh, nơi nội dung không có khả năng thay đổi thường xuyên và nơi các trang có chi phí tạo thấp hơn, đặc biệt là nếu được lưu vào bộ nhớ đệm ở biên.
  • NÊN cẩn thận hơn khi sử dụng quy tắc phỏng đoán cho các trang động, nơi nội dung có nhiều khả năng thay đổi thường xuyên, có thể trở nên lỗi thời và nơi các trang tốn kém hơn để tạo.
  • NÊN ưu tiên quy tắc tài liệu hơn quy tắc danh sách vì quy tắc tài liệu linh hoạt hơn, cho phép chia sẻ cùng một quy tắc trên nhiều trang và có thể dùng để tìm nạp trước cũng như kết xuất trước các trang chưa được xác định trước.
  • NÊN cân nhắc những điểm được và mất giữa tìm nạp trước và kết xuất trước, đồng thời chọn phương án phù hợp cho trường hợp sử dụng của bạn. Tính năng kết xuất trước tốn nhiều tài nguyên hơn so với tìm nạp trước và có thể gây ra nhiều tác dụng phụ ngoài ý muốn hơn trong các ứng dụng phức tạp hiển thị trạng thái động, nhưng mang lại trải nghiệm tốt hơn cho người dùng. Hãy hỏi nhà phát triển về lựa chọn ưu tiên của họ nếu bạn không chắc chắn.
  • NÊN cân nhắc sự đánh đổi giữa các cấp eagerness khác nhau và chọn cấp phù hợp cho trường hợp sử dụng của bạn. Việc suy đoán càng sớm càng mang lại trải nghiệm tốt hơn cho người dùng, nhưng lại sử dụng nhiều tài nguyên hơn và có thể gây ra nhiều tác dụng phụ ngoài ý muốn hơn trong các ứng dụng phức tạp hiển thị trạng thái động. Hãy hỏi nhà phát triển về lựa chọn ưu tiên của họ nếu bạn không chắc chắn.
  • KHÔNG lạm dụng quy tắc suy đoán, chẳng hạn như suy đoán mọi đường liên kết trên trang. Trình duyệt có giới hạn (2 suy đoán cho suy đoán không háo hức). Bạn chỉ nên sử dụng immediate cho một số rất ít đường liên kết.
  • KHÔNG suy đoán những URL có khả năng kích hoạt thay đổi trạng thái, chẳng hạn như /logout hoặc /add-to-cart, và loại trừ rõ ràng những URL đó khỏi quy tắc suy đoán nếu chúng có khả năng được đưa vào quy tắc tài liệu.
  • KHÔNG sử dụng quy tắc phỏng đoán trên Ứng dụng trang đơn (SPA). Quy tắc suy đoán được thiết kế cho các ứng dụng nhiều trang (MPA), trong đó trình duyệt chuyển đến một tài liệu mới trên mỗi lần điều hướng. Trong SPA, trình duyệt không chuyển đến một tài liệu mới trong mỗi lần điều hướng, vì vậy, các quy tắc phỏng đoán sẽ không hoạt động như mong đợi.

Hỗ trợ trình duyệt và chiến lược dự phòng

Tuy nhiên, tải suy đoán là một cải tiến tăng dần. Bạn hoàn toàn có thể sử dụng tính năng này để cải thiện hiệu suất và nên sử dụng vì tính năng này có thể mang lại lợi ích về hiệu suất. Nếu không hỗ trợ các quy tắc suy đoán, trình duyệt sẽ bỏ qua các quy tắc đó.