Speculation Rules API: Tự động Pre-render trang tiếp theo trong 0ms nâng chỉ số Interaction to Next Paint (INP) & LCP
Trong cuộc đua tối ưu hóa tốc độ nạp trang web (Performance Engineering), mục tiêu tối thượng của các kỹ sư lập trình là làm sao để thời gian chuyển trang khi người dùng bấm vào một đường liên kết đạt mức 0 millisecond (Instant Page Navigation).
Trước đây, các thư viện như Quicklink hay Instant.page sử dụng kỹ thuật Pre-fetch (chỉ tải về file HTML/JS ngầm). Tuy nhiên, Pre-fetch vẫn bắt trình duyệt phải tốn thời gian parse và render giao diện khi người dùng thực sự click. Sự xuất hiện của tiêu chuẩn W3C mới mang tên Speculation Rules API đã nâng tầm công nghệ: Nó cho phép trình duyệt tự động biên dịch ngầm trọn vẹn (Full Pre-render) trang tiếp theo trong một luồng nền ẩn, giúp trang web xuất hiện tức thì 0ms ngay khi ngón tay người dùng chạm vào nút bấm!
Bài viết này sẽ hướng dẫn bạn tích hợp Speculation Rules API vào Next.js để bùng nổ điểm Core Web Vitals INP và LCP.
1. Speculation Rules API là gì và Khác biệt gì với Pre-fetch / Pre-connect cũ?
Speculation Rules API là một cú pháp khai báo định dạng JSON giúp nhà phát triển đưa ra các quy tắc dự đoán (Rules) cho trình duyệt biết đường dẫn nào nên được Prefetch (Tải trước tài nguyên) hoặc Prerender (Biên dịch tĩnh hoàn chỉnh giao diện ngầm) dựa trên hành vi di chuột (Hover) hoặc cuộn trang (Scroll) của người dùng.
| Kỹ thuật Tối ưu | Cơ chế hoạt động | Thời gian hiển thị (Navigation Time) | Tác động tới Core Web Vitals |
|---|---|---|---|
Pre-connect (<link rel="preconnect">) |
Mở sẵn kết nối TCP/TLS handshake tới Server đích. | Tiết kiệm 50ms - 100ms. Trình duyệt vẫn phải tải và render trang từ đầu. | Cải thiện nhẹ chỉ số TTFB. Read Tối ưu điểm Core Web Vitals. |
Pre-fetch (<link rel="prefetch">) |
Tải trước file HTML/JS của trang đích vào bộ nhớ Cache trình duyệt. | Thời gian chuyển trang khoảng 200ms - 400ms (vẫn tốn CPU render). | Giảm thời gian nạp file, nhưng vẫn có Input Delay. |
| Speculation Rules (Prerender) | Trình duyệt tự tạo 1 luồng Invisible Tab ẩn, nạp HTML/JS/CSS và vẽ hoàn chỉnh cây DOM sẵn trong RAM! | 0 millisecond! (Instant Display tức thì ngay khi click) | Đỉnh cao tuyệt đối: Điểm INP và LCP đạt mức mượt mà 100/100 tuyệt đối! Read Tối ưu chỉ số INP với LoAF API. |
2. Cấu hình Speculation Rules API bằng JSON Script trong Next.js
Bạn có thể dễ dàng nhúng đoạn script Speculation Rules vào thẻ <head> của file app/layout.jsx:
export default function RootLayout({ children }) {
// Đoạn mã quy tắc dự đoán Speculation Rules
const speculationRules = {
prerender: [
{
source: 'document',
// Tự động Prerender các liên kết khi người dùng di chuột (hover) trên 200ms
eagerness: 'moderate',
where: {
and: [
// Chỉ Prerender các đường link nội bộ thuộc domain chính
{ href_matches: '/*' },
// Bỏ qua các trang checkout, admin và file media
{ not: { href_matches: '/checkout/*' } },
{ not: { href_matches: '/admin/*' } },
{ not: { href_matches: '/*\.(png|jpg|pdf|zip)' } },
],
},
},
],
};
return (
<html lang="vi">
<head>
<script
type="speculationrules"
dangerouslySetInnerHTML={{ __html: JSON.stringify(speculationRules) }}
/>
</head>
<body>{children}</body>
</html>
);
}
3. Phân tích 3 Cấp độ Hào hứng (Eagerness Levels) trong Speculation Rules
Thuộc tính eagerness quy định mức độ chủ động của trình duyệt trong việc kích hoạt luồng Prerender ngầm:
eagerness: "immediate": Trình duyệt lập tức Prerender TẤT CẢ các đường link nhìn thấy trên màn hình ngay khi trang nạp xong. (Chỉ dùng cho các trang có ít link để tránh quá tải RAM).eagerness: "eager": Kích hoạt Prerender ngay khi đường link xuất hiện trong vùng nhìn (Viewport) của người dùng.eagerness: "moderate"(Khuyên dùng nhất): Kích hoạt Prerender khi người dùng di chuột (Hover) lên đường link quá 200ms hoặc bấm giữ ngón tay trên màn hình di động. Đây là thời điểm vàng chuẩn bị click!eagerness: "conservative": Chỉ Kích hoạt Prerender khi người dùng nhấn chuột xuống (mousedown) trước khi nhả chuột (mouseup).
4. Kiểm tra Luồng Prerender 0ms qua Chrome DevTools
- Mở Chrome DevTools (F12) ➔ Chuyển sang tab Application ➔ Chọn mục Background Services ➔ Speculative Loads.
- Xem bảng Speculation Rules: Trình duyệt sẽ liệt kê danh sách các URL đang nằm trong hàng chờ Prerender.
- Bấm vào một đường link bài viết: Bạn sẽ thấy chỉ số Page Load Time = 0 ms và thẻ Status báo *prerendered* rực rỡ!
Kết luận
Speculation Rules API đại diện cho bước nhảy vọt công nghệ về trải nghiệm chuyển trang instant 0ms. Việc tích hợp Speculation Rules API vào website sẽ giúp triệt tiêu hoàn toàn độ trễ giao diện, mang lại điểm Core Web Vitals INP và LCP hoàn hảo để bứt phá dẫn đầu trên kết quả tìm kiếm Google.
Câu hỏi thường gặp
Bạn cần giải pháp phần mềm chuyên nghiệp?
Uwmee Software cung cấp dịch vụ 12 tester Google Play & thiết kế website cao cấp giúp nâng tầm thương hiệu của bạn.