Đạt 100 điểm PageSpeed với WordPress không cần plugin

3 phút đọc

Tối ưu PageSpeed WordPress không nhất thiết phải cài thêm plugin. Phần lớn điểm số đến từ việc trang tải ít tài nguyên, hiển thị nội dung chính thật nhanh và không bị xô lệch bố cục. Bài này tổng hợp những thay đổi T11N Blog đã áp dụng để đạt 100 điểm trên cả mobile lẫn desktop.

PageSpeed Insights đo những gì?

Điểm hiệu năng của PageSpeed Insights được tính từ Lighthouse, dựa trên các chỉ số chính:

  • LCP (Largest Contentful Paint): thời gian hiển thị phần nội dung lớn nhất, nên dưới 2,5 giây.
  • TBT (Total Blocking Time): thời gian luồng chính bị JavaScript chặn.
  • CLS (Cumulative Layout Shift): mức độ xô lệch bố cục, nên dưới 0,1.
  • FCP và Speed Index: tốc độ nội dung đầu tiên và toàn bộ trang hiện ra.

Lưu ý phần “dữ liệu thực tế” (field data) lấy từ người dùng Chrome thật nên cần thời gian tích luỹ, còn điểm Lighthouse là đo trong phòng thí nghiệm.

1. Chọn theme nhẹ, ưu tiên block theme

Block theme chỉ nạp CSS của những block thực sự xuất hiện trên trang và không phụ thuộc jQuery. Đây là nền tảng tốt hơn nhiều so với các theme đa năng đi kèm page builder.

2. Inline CSS để bỏ request chặn render

Khi CSS nhỏ, nhúng thẳng vào thẻ <style> giúp trình duyệt vẽ trang ngay mà không phải chờ tải file. WordPress có sẵn bộ lọc để tăng giới hạn inline cho CSS của block:

add_filter( 'styles_inline_size_limit', fn() => 60000 );

3. Bỏ những script không cần thiết

Script nhận diện emoji được nạp trên mọi trang dù trình duyệt hiện đại đã tự hiển thị emoji. Tắt nó giúp bớt một đoạn JavaScript và CSS:

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

4. Tối ưu ảnh

  • Tải ảnh đúng kích thước, để WordPress tự sinh srcset cho từng màn hình.
  • Dùng định dạng WebP hoặc AVIF; WordPress hỗ trợ tải lên cả hai.
  • Ảnh đầu trang được WordPress tự gắn fetchpriority="high", các ảnh sau tự lazy-load.
  • Luôn khai báo kích thước hoặc aspect-ratio để tránh xô lệch bố cục, xem thêm bài về layout shift.

5. Font chữ

Font hệ thống hiển thị tức thì và không tốn request nào. Nếu cần font riêng, hãy tự host file WOFF2, chỉ tải các độ đậm thật sự dùng và đặt font-display: swap.

6. Tải trước trang kế tiếp

Từ WordPress 6.8, speculation rules được bật sẵn. Bạn có thể cho trình duyệt tải trước sớm hơn khi người dùng rê chuột vào link:

add_filter( 'wp_speculation_rules_configuration', function ( $config ) {
	if ( is_array( $config ) ) {
		$config['eagerness'] = 'moderate';
	}
	return $config;
} );

7. Hosting và cache

Code gọn đến đâu cũng cần máy chủ phản hồi nhanh. Hãy dùng PHP 8.x có bật OPcache, bật page cache và cân nhắc CDN để giảm thời gian phản hồi đầu tiên (TTFB).

Điểm 100 không phải mục tiêu cuối cùng; mục tiêu là người đọc thấy nội dung ngay khi bấm vào.

T11N Team

Sau mỗi thay đổi, hãy chạy lại PageSpeed Insights vài lần và kiểm tra cả bản mobile lẫn desktop vì kết quả có thể dao động giữa các lần đo.

Bài viết liên quan