Tìm hiểu về Speculative Loading trong WordPress 6.8
Sơ đồ trang
- Speculative Loading là gì?
- Lợi ích thực tế về hiệu suất
- Hỗ trợ trình duyệt và tính năng cải tiến tiến bộ
- Cách WordPress triển khai Speculative Loading
- Các tùy chọn tùy chỉnh
- Phân biệt giữa Prefetch và Prerender
- Các mức độ dự đoán (Eagerness)
- Cách kiểm tra Speculative Loading
- Cách tắt Speculative Loading
- Sử dụng Speculative Loading trên các trang quan trọng
- Tác động đến các trang web
- Kết luận
Bạn đã bao giờ mơ ước website WordPress của mình có thể tải trang gần như ngay lập tức, như thể có thể đọc được suy nghĩ của người dùng? Trước đây thì có nhiều plugin tối ưu web hỗ trợ tính năng tải suy đoán hay tương tự là Link preloading trong WP-Rocket, hay trong Litespeed là Instant Click, trong Perfmatters là Enable Instant Page
Với WordPress 6.8 tính năng Speculative Loading (Tải dự đoán) mới được tích hợp vào WordPress Core sẽ mang lại trải nghiệm duyệt web mượt mà và nhanh chóng cho người dùng của bạn.
Speculative Loading là gì?
Speculative Loading là một kỹ thuật tối ưu hóa hiệu suất cho phép WordPress bắt đầu tải các URL trước khi người dùng nhấp vào chúng. Tính năng này sử dụng Speculation Rules API, một khả năng của nền tảng web cho phép xác định quy tắc về việc nên tải trước (prefetch) hoặc hiển thị trước (prerender) URL nào và tải dự đoán nên diễn ra sớm đến mức nào.
Ý tưởng rất đơn giản nhưng mạnh mẽ: bằng cách dự đoán nơi người dùng có thể điều hướng tiếp theo và bắt đầu quá trình tải trước, các trang sẽ xuất hiện gần như ngay lập tức khi người dùng nhấp vào liên kết.
Lợi ích thực tế về hiệu suất
Trước khi được tích hợp vào WordPress Core, tính năng này đã được thử nghiệm thành công trên hơn 50.000 trang web WordPress thông qua plugin Speculative Loading. Theo dữ liệu từ HTTP Archive và Chrome User Experience Report (CrUX):
- Các trang web đã bật Speculative Loading cải thiện tỷ lệ đạt chỉ số Largest Contentful Paint (LCP) khoảng 1,9% ở mức trung bình
- Mặc dù 1,9% có vẻ nhỏ, nhưng đây là con số rất đáng kể đối với một tính năng đơn lẻ, đặc biệt khi xét đến sự đa dạng của các trang web với nhiều đặc điểm hiệu suất khác nhau
Hiện nay, hơn 8% lượt điều hướng Chrome dựa vào Speculation Rules, cho thấy sự phổ biến ngày càng tăng của công nghệ này.
Bài viết liên quan
Hỗ trợ trình duyệt và tính năng cải tiến tiến bộ
Speculation Rules API hiện được hỗ trợ bởi Chrome, Edge và Opera, điều này có nghĩa là hầu hết người dùng web có thể hưởng lợi từ khả năng của nó. Không có tác động tiêu cực đối với người dùng trên các trình duyệt không hỗ trợ API vì tính năng này hoạt động như một cải tiến tiến bộ. Các trình duyệt không hỗ trợ đơn giản là bỏ qua tính năng này, duy trì hoạt động tương tự như trước đây.
Cách WordPress triển khai Speculative Loading
WordPress 6.8 mặc định bật Speculative Loading ở giao diện người dùng của tất cả các trang web, với hai ngoại lệ:
- Khi người dùng đã đăng nhập
- Khi trang web không sử dụng pretty permalinks (đường dẫn thân thiện)
Cấu hình mặc định sử dụng prefetching với “conservative eagerness” (mức độ dự đoán thận trọng). Điều này có nghĩa là việc tải trước được kích hoạt khi người dùng bắt đầu nhấp vào liên kết—chỉ một phần giây trước khi điều hướng thực tế diễn ra, nhưng đủ để mang lại cải thiện hiệu suất đáng kể.
Các tùy chọn tùy chỉnh
Các nhà phát triển WordPress có nhiều cách để tùy chỉnh hành vi Speculative Loading:
1. Loại trừ mẫu URL
Một số URL không nên được tải trước hoặc hiển thị trước, đặc biệt là những URL có thể kích hoạt thay đổi trạng thái (như thêm sản phẩm vào giỏ hàng). Mặc định, bất kỳ URL nào có tham số truy vấn đều tự động bị loại trừ. Nhà phát triển có thể sử dụng filter wp_speculation_rules_href_exclude_paths để loại trừ thêm các mẫu URL.
Ví dụ để loại trừ các URL chứa “/cart/”:
add_filter(
'wp_speculation_rules_href_exclude_paths',
function ( $href_exclude_paths ) {
$href_exclude_paths[] = '/cart/*';
return $href_exclude_paths;
}
);
2. Tùy chỉnh cấu hình mặc định
Chủ sở hữu trang web có thể sửa đổi cấu hình mặc định thông qua filter wp_speculation_rules_configuration. Các tùy chọn bao gồm:
- Mode (Chế độ): auto (mặc định), prefetch, hoặc prerender
- Eagerness (Mức độ dự đoán): auto (mặc định), conservative, moderate, hoặc eager
Ví dụ để thay đổi sang prerender với mức độ dự đoán vừa phải (moderate):
add_filter(
'wp_speculation_rules_configuration',
function ( $config ) {
if ( is_array( $config ) ) {
$config['mode'] = 'prerender';
$config['eagerness'] = 'moderate';
}
return $config;
}
);
3. Tùy chỉnh qua giao diện người dùng
WordPress Core hỗ trợ sẵn các class CSS no-prefetch và no-prerender. Bạn có thể thêm chúng vào bất kỳ block nào thông qua trường “Additional CSS class(es)” trong bảng điều khiển “Advanced”, cho phép kiểm soát chi tiết về liên kết nào cần loại trừ khỏi Speculative Loading.
Phân biệt giữa Prefetch và Prerender
Prefetch
Prefetch tải xuống các tài nguyên (ví dụ: HTML, CSS, JavaScript) trong nền mà có thể cần cho trang trong tương lai, lưu trữ chúng trong bộ nhớ cache của trình duyệt. Các tài nguyên không được xử lý cho đến khi người dùng điều hướng đến trang, giảm thời gian tải bằng cách tìm nạp tài sản sớm.
WordPress 6.8 trở lên mặc định sử dụng prefetch.
Prerender
Prerender tiến xa hơn prefetch bằng cách cũng hiển thị toàn bộ trang (hoặc các phần của nó) trong nền, bao gồm thực thi JavaScript và hiển thị DOM. Trang được hiển thị trước được lưu trong bộ nhớ, vì vậy nếu người dùng điều hướng đến nó, trang xuất hiện ngay lập tức.
Prefetch nhẹ hơn về CPU/bộ nhớ vì nó không hiển thị. Và prerender tiêu tốn nhiều tài nguyên hơn. Tuy nhiên, prerender sẽ mang lại thời gian tải nhanh hơn.
Các mức độ dự đoán (Eagerness)
Tùy chọn eagerness xác định mức độ quyết đoán của trình duyệt khi tải trước các trang:
- Conservative (thận trọng): Chỉ tải với độ tin cậy cao, như khi người dùng bắt đầu nhấp chuột.
- Moderate (vừa phải): Tải với độ tin cậy vừa phải, như khi di chuột trên liên kết khoảng 200ms.
- Eager (tích cực): Tải sớm nhất có thể, ngay cả khi chỉ có ít tín hiệu về ý định của người dùng.
Cách kiểm tra Speculative Loading
Speculative Loading hoạt động ở cấp độ trình duyệt, điều này có nghĩa là bạn sẽ không thấy kết quả trong các công cụ kiểm tra tốc độ thông thường. Tuy nhiên, nó giúp giảm LCP, INP và TTFB cho dữ liệu người dùng thực tế của bạn theo thời gian. Và nó sẽ giúp cải thiện hiệu suất cảm nhận (mức độ nhanh của trang web của bạn).
Bạn có thể kiểm tra xem Speculative Loading có đang chạy/hoạt động trên trang web của mình hay không bằng Chrome DevTools. Trong tab “Application”, nhấp vào “Background services → Speculative Loads”. Bạn có thể theo dõi URL nào đang được prefetch hoặc prerender, những URL không được kích hoạt, v.v.
Cách tắt Speculative Loading
Mặc dù Speculative Loading mang lại lợi ích đáng kể về hiệu suất, nhưng nếu bạn dùng các plugin đã có tính năng này hoặc một vài lý do nào đó bạn có thể muốn tắt tính năng này hoàn toàn tính năng này có thể áp dụng cde dưới đây. Để tắt hoàn toàn tính năng Speculative Loading, bạn có thể thêm đoạn code sau vào file functions.php của theme:
add_filter(
'wp_speculation_rules_configuration',
function ( $config ) {
return null; // Trả về null để tắt hoàn toàn Speculative Loading
}
);
Sử dụng Speculative Loading trên các trang quan trọng
Nếu bạn muốn tận dụng tối đa sức mạnh của Speculative Loading, bạn có thể cấu hình tính năng này để prerender một cách chủ động các URL quan trọng nhất. Ví dụ, bạn có thể muốn prerender trang chủ khi người dùng đang ở trang bài viết đơn lẻ:
add_action(
'wp_load_speculation_rules',
function ( WP_Speculation_Rules $rules ): void {
if ( ! is_singular() ) {
return;
}
$rules->add_rule(
'prerender',
'prerender-homepage-from-singular-template',
array(
'source' => 'document',
'where' => array(
'selector_matches' => 'a[rel="home"]',
),
'eagerness' => 'eager',
)
);
}
);
Tác động đến các trang web
Đối với các trang web WordPress tại Việt Nam, Speculative Loading mang lại những lợi ích đặc biệt quan trọng:
- Cải thiện trải nghiệm trên mạng di động: Với tỷ lệ người dùng di động cao ở Việt Nam, việc cải thiện tốc độ tải trang trên thiết bị di động là rất quan trọng. Speculative Loading giúp giảm đáng kể thời gian chờ đợi, ngay cả trên kết nối mạng chậm.
- Giảm tỷ lệ thoát: Người dùng thường ít kiên nhẫn chờ đợi trang web tải chậm. Với Speculative Loading, trang của bạn sẽ tải nhanh hơn, giúp giữ chân người dùng và giảm tỷ lệ thoát.
- Tối ưu SEO cho thị trường Việt Nam: Google đánh giá cao tốc độ tải trang khi xếp hạng kết quả tìm kiếm. Tận dụng Speculative Loading sẽ giúp trang web của bạn có lợi thế cạnh tranh trong kết quả tìm kiếm tại Việt Nam.
- Tiết kiệm băng thông và dữ liệu: Đối với người dùng có gói cước di động hạn chế về dữ liệu, Speculative Loading có thể được cấu hình để chỉ prefetch các trang quan trọng nhất, giúp tiết kiệm băng thông cho người dùng.
Kết luận
Tính năng Speculative Loading trong WordPress 6.8 là một bước tiến lớn về hiệu suất của WordPress và web nói chung, bằng cách bắt đầu quá trình tải trang ngay cả trước khi người dùng điều hướng. Bằng cách tinh chỉnh dựa trên nhu cầu cụ thể của trang web, bạn có thể đạt được những cải thiện hiệu suất thậm chí còn lớn hơn so với cấu hình mặc định.
Đối với website WordPress tại Việt Nam, đây là cơ hội tuyệt vời để nâng cao trải nghiệm người dùng và tối ưu hóa hiệu suất trang web mà không cần đầu tư vào phần cứng máy chủ đắt tiền. Hãy bắt đầu tận dụng Speculative Loading ngay hôm nay để mang lại trải nghiệm duyệt web nhanh chóng và mượt mà cho người dùng của bạn.
Bài viết liên quan
