Tối ưu tốc độ tải trang với Speculation Rules API: Tự động prerender link trước khi người dùng click

Đưa độ trễ tải trang về 0 mili-giây (Instant Navigation)#

Người dùng thời hiện đại rất thiếu kiên nhẫn: Mỗi 100ms trang web tải chậm có thể làm giảm 7% tỷ lệ chuyển đổi.

Sẽ ra sao nếu ngay khi người dùng vừa rê chuột (hover) vào một liên kết bài viết, trình duyệt đã âm thầm tải và dựng sẵn (prerender) toàn bộ trang đó trong bộ nhớ ngầm? Đến khi người dùng thực sự click chuột, trang mới sẽ xuất hiện ngay lập tức trong 0.0 giây!

Đó chính là sức mạnh của Speculation Rules API – chuẩn web mới của Chrome và Edge.

Cấu hình Speculation Rules qua JSON Script#

Chỉ cần chèn đoạn script sau vào trang web của bạn:

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

Giải thích các cấp độ sẵn sàng (eagerness)#

• conservative: Chỉ bắt đầu nạp ngầm khi người dùng bấm chuột xuống (mousedown hoặc touchstart), tiết kiệm băng thông.
• moderate (Khuyến nghị): Bắt đầu nạp khi người dùng rê chuột lên link trong khoảng 200ms (chứng tỏ có ý định click thực sự).
• immediate: Tải ngay lập tức toàn bộ link tìm thấy (chỉ nên dùng cho trang quan trọng).

Hiệu quả đo lường thực tế#

• Chỉ số LCP của trang tiếp theo giảm từ 1.4s xuống chỉ còn 80ms!
• Không gây tốn RAM vô ích vì trình duyệt có cơ chế tự hủy trang prerender nếu người dùng không bấm vào.

Góc thảo luận#

Bạn đã thử nghiệm Speculation Rules API trên website của mình chưa? Bạn kiểm soát việc lãng phí tài nguyên server backend ra sao khi người dùng hover nhiều link?

Xem thêm nội dung liên quan:

• Học Tối ưu Trải nghiệm Web
• Review công cụ lập trình web