Nếu site WordPress của bạn tải nhanh ở lần đầu nhưng vẫn có độ trễ khi khách chuyển sang trang khác, bạn đang bỏ trống một tính năng mạnh nhất: Speculative Loading. Đây là cơ chế trình duyệt tải trước (thậm chí render trước) trang tiếp theo trước khi visitor click, giúp chuyển trang gần như tức thì. WordPress 6.8 đã tích hợp sẵn, và WordPress 7.1 thì tăng cường mặc định mạnh hơn.
Trong bài này, mình sẽ hướng dẫn bạn từ A đến Z: Speculative Loading là gì, eagerness hoạt động ra sao, WP 7.1 thay đổi gì, cách tùy chỉnh bằng filter, và cách loại trừ URL nhạy cảm như giỏ hàng, nút thanh toán. Mọi config đều có code cụ thể, dùng được ngay trên site WordPress 6.8 đến 7.1.
Speculative Loading La Gi Va Vi Sao No Quan Trong?
Speculative Loading là cơ chế trình duyệt dự đoán trang tiếp theo mà visitor sẽ mở, rồi tải trước trang đó ở background trước khi click xảy ra. Khi visitor thực sự click, trang đã sẵn sàng nên hiển thị gần như tức thì. Có hai cấp độ: prefetch chỉ tải HTML trước, còn prerender render toàn bộ trang luôn, kể cả CSS, JS, font.
Đây là tính năng dựa trên Speculation Rules API của trình duyệt, được Chrome, Edge, Opera hỗ trợ. WordPress 6.8 tích hợp sẵn từ tháng 3/2025, và hiện đã có trên hơn 8% navigation Chrome. Không cần cài thêm plugin, không cần config phức tạp, chỉ cần hiểu và tinh chỉnh.
WordPress 7.1 Thay Doi Gi Trong Speculative Loading?
Đây là phần đáng chú ý nhất. WordPress 6.8 mặc định prefetch với eagerness conservative, tức chỉ tải trước khi visitor bắt đầu click. An toàn nhưng lợi ích hạn chế. WordPress 7.1 (ra mắt 19/8/2026) thay đổi: khi phát hiện site có cache, eagerness tự động chuyển sang moderate, tức tải trước khi visitor hover vào link.
Lý do rất hợp lý: site đã có cache thì mỗi speculative request rất rẻ (serve từ cache, không query database), nên có thể speculative nhiều hơn mà không quá tải server. Nếu site chưa có cache, WP 7.1 giữ nguyên conservative để tránh tạo thêm tải. Đây là lần hiếm hoi WordPress tăng tốc mặc định mà không cần site owner làm gì.
Eagerness La Gi? 4 Muc Ban Can Biet
Eagerness là thông số quan trọng nhất, quyết định trình duyệt sẽ speculative sớm đến đâu. Có 4 mức từ thấp đến cao: conservative chỉ khi bắt đầu click, moderate khi hover link, eager ngay khi link xuất hiện trên page, và immediate tức thì không chờ đợi. Mỗi bước lên cao hơn nghĩa là nhiều trang được tải trước hơn, nhưng cũng tốn bandwidth và CPU client hơn.
Mức moderate là điểm cân bằng tốt nhất cho đa số site: signal đủ mạnh (visitor hover = có ý định click), nhưng không speculative quá sớm. WP 7.1 chọn đúng mức này khi có cache. Nếu bạn muốn aggressive tối đa, có thể đổi sang eager, nhưng mình khuyên test kỹ trước.
Buoc 1: Kiem Tra Speculative Loading Dang Bat Tren Site
Trước khi tinh chỉnh, hãy kiểm tra xem site đã có Speculative Loading chưa. Mở bất kỳ trang nào trên site, F12 mở DevTools, vào tab Application, tìm Speculation Rules trong sidebar. Hoặc chạy lệnh sau trong Console:
// Kiem tra Speculation Rules API co hoat dong khong
console.log(
HTMLScriptElement.supports('speculationrules')
);
// xem rules hien tai
document.querySelectorAll('script[type="speculationrules"]')
.forEach(s => console.log(JSON.parse(s.textContent)));Kết quả mong đợi: true cho lệnh đầu, và một JSON object cho lệnh thứ hai chứa "mode": "prefetch" hoặc "prerender". Nếu false, trình duyệt không hỗ trợ (Firefox, Safari chưa hỗ trợ), nhưng không sao, nó là progressive enhancement.
Ngoài ra, vào Chrome DevTools tab Network, filter Speculative, bạn sẽ thấy các request prefetch xuất hiện khi hover link. Nếu không thấy gì, Speculative Loading đang bị tắt hoặc bị plugin conflict.
Buoc 2: Chuyen Tu Prefetch Sang Prerender De Tang Toc Toi Da
Theo mặc định, WordPress dùng prefetch (chỉ tải HTML). Nếu bạn muốn aggressive hơn, chuyển sang prerender (render toàn bộ trang). Khác biệt rất lớn: prefetch giảm 200-400ms, prerender có thể giảm 500ms-2s vì trang đã render xong.
Thêm code sau vào functions.php của theme con hoặc vào mu-plugin:
add_filter( 'wp_speculation_rules_configuration', function() {
return array(
'mode' => 'prerender',
'eagerness' => 'moderate',
);
} );Một số lưu ý quan trọng: prerender chạy JavaScript ở trang được render trước, nên nếu site có logic nhạy cảm với page view (analytics, counter, popups), cần test kỹ. Google Analytics 4 và Google Tag Manager đã xử lý prerender đúng mặc định, nhưng các script tracking cũ có thể double-count.
Buoc 3: Loai Tru URL Nhay Cam Khoi Speculative Loading
Đây là bước quan trọng nhất. Nếu site có WooCommerce, membership, hoặc bất kỳ URL nào thay đổi trạng thái khi truy cập, bạn phải loại trừ chúng. Mặc định WP đã exclude URL có query parameter, nhưng các URL rewrite đẹp như /cart/ thì không.
add_filter( 'wp_speculation_rules_href_exclude_paths', function( $exclude_paths ) {
// WooCommerce
$exclude_paths[] = '/cart/*';
$exclude_paths[] = '/checkout/*';
$exclude_paths[] = '/my-account/*';
// Membership, e-learning
$exclude_paths[] = '/login/*';
$exclude_paths[] = '/register/*';
$exclude_paths[] = '/dashboard/*';
// Custom action URLs (add to cart, wishlist)
$exclude_paths[] = '/add-to-cart/*';
$exclude_paths[] = '/wishlist/*';
return $exclude_paths;
} );Nguyên tắc: bất kỳ URL nào mà GET request có thể thay đổi dữ liệu (thêm vào giỏ hàng, đánh dấu yêu thích, reset password) đều phải exclude. Đây là best practice web: GET phải idempotent, nhưng thực tế nhiều plugin WooCommerce vi phạm quy tắc này.
Buoc 4: Cau Hinh Cho Hosting Provider Bang Environment Variable
Nếu bạn là hosting provider hoặc quản lý nhiều site WordPress, WordPress 7.1 thêm cơ chế mới: environment variable WP_SPECULATION_RULES_EAGERNESS và constant trong wp-config.php. Cho phép set eagerness mặc định cho toàn bộ site mà không cần mu-plugin:
// wp-config.php - dat truoc WP_DEBUG
define( 'WP_SPECULATION_RULES_EAGERNESS', 'moderate' );
define( 'WP_SPECULATION_RULES_MODE', 'prerender' );Cách này hữu ích khi bạn không quản lý code WordPress (managed hosting, platform) nhưng vẫn muốn kiểm soát speculative loading. Hosting provider có thể set default an toàn cho toàn bộ khách hàng, rồi từng site tự override bằng filter nếu muốn.
Buoc 5: Ket Hop Voi Page Cache De Hieu Qua Toi Da
Speculative Loading chỉ tải trước, nó không thay thế page cache. Kết hợp cả hai mới tối ưu. Khi visitor hover link, trình duyệt gửi GET request, nếu server có cache (Nginx FastCGI Cache, Redis, LiteSpeed Cache), response trả về trong 10-30ms. Prerender hoàn tất trước khi visitor click. Kết quả: chuyển trang tức thì.
Nếu bạn đã cấu hình Redis Object Cache hoặc Nginx FastCGI Cache, Speculative Loading sẽ tận dụng trực tiếp. Không cần config thêm gì cả. WP 7.1 tự phát hiện site có cache qua constant WP_CACHE hoặc наличия cache page và nâng eagerness lên moderate.
Speculative Loading Anh Huong Nhuong Nao Den Analytics?
Đây là câu hỏi nhiều người lo nhất. Khi trình duyệt prerender trang, JavaScript trên trang đó chạy, bao gồm cả Google Analytics. Tuy nhiên, GA4 và gtag.js đã xử lý: chúng chờ cho đến khi trang thực sự hiển thị (visibility change) mới count page view. Tức là prerender không gây double-count.
Tuy nhiên, nếu site dùng script tracking tự viết hoặc plugin analytics cũ, cần kiểm tra. Cách xử lý: trang đang prerender có document.prerendering = true. Script nên chờ event prerenderingchange trước khi fire:
if ( document.prerendering ) {
document.addEventListener( 'prerenderingchange', function() {
// Fire analytics, tracking o day
}, { once: true } );
} else {
// Binh thuong, trang da hien thi
}Cach Debug Speculative Loading Trên Chrome
Để chắc chắn config hoạt động, dùng Chrome DevTools. Vào chrome://webdiscovery hoặc chrome://speculation-rules (Chrome 130+), bạn sẽ thấy danh sách URL đã bị speculative load và trạng thái (prefetched, prerendered, discarded). Đây là cách nhanh nhất để biết Speculative Loading đang chạy hay không.
Ngoài ra, mở DevTools Network tab, check “Show Speculative loads” filter. Khi hover link, bạn sẽ thấy request mới xuất hiện với type Speculative. Nếu không thấy, kiểm tra lại filter wp_speculation_rules_href_exclude_paths có đang exclude quá rộng không.
Nen Dung Prefetch Hay Prerender Cho Site Cua Ban?
Quyết định phụ thuộc vào loại site. Mình tóm tắt: dùng prefetch mặc định nếu site có nhiều trang động, nội dung cá nhân hóa, membership. Dùng prerender nếu site chủ yếu là nội dung tĩnh (blog, landing page, documentation), đã có page cache, và analytics hỗ trợ prerender. WP 7.1 tự chọn prefetch + moderate cho site có cache, đây là điểm khởi đầu an toàn.
Nếu sau khi đọc xong bài này bạn chỉ nhớ một điều, hãy nhớ: Speculative Loading là progressive enhancement, không bao giờ làm site chậm hơn, chỉ làm nhanh hơn hoặc giữ nguyên. Không có lý do gì để tắt nó đi.
Tong Ket
Speculative Loading là một trong những tính năng performance đáng giá nhất mà WordPress tích hợp sẵn trong 2 năm qua. Không cần plugin, không cần CDN config, chỉ cần một vài dòng filter để tối ưu cho từng loại site. Với WP 7.1 tăng eagerness mặc định khi phát hiện cache, nhiều site sẽ tự động nhanh hơn mà không cần làm gì.
Nếu bạn đang chạy WordPress 6.8 trở lên, Speculative Loading đã bật sẵn. Hãy kiểm tra theo Bước 1, loại trừ URL nhạy cảm theo Bước 3, và cân nhắc upgrade sang prerender nếu site phù hợp. Mọi cấu hình mình hướng dẫn đều test trên WordPress 7.1 Beta 1, sẵn sàng cho bản chính thức ra mắt 19/8/2026.
