Cách tối ưu điểm Google PageSpeed Insight hiện đang là một trong những thước đo cơ bản được dùng để đánh giá về tốc độ cũng như sự thân thiện của website đối với người dùng do chính Google đề xuất ra.
Ngoài ra, khi tối ưu theo hướng dẫn này, thì điểm GTMetrix của website cũng sẽ lên cao. Trong bài viết này, mình sử dụng 1 website với số lượng hình ảnh cơ bản của 1 web bán hàng thông thường.
Trước khi đi vào chi tiết, mình xin có một số lưu ý nhỏ về hình ảnh cho các bạn:
Ưu tiên dùng hình JPG trên website, trừ một số hình ảnh cần nền trong suốt thì mới phải dùng PNG, còn lại thì cứ ưu tiên dùng ảnh JPG nhé
Chú ý: hình ảnh đầu vào nên đúng với kích thước cần thiết tại vị trí hiển thị,để tránh lãng phí tài nguyên và giúp cho quá trình tối ưu thuận tiện hơn.
Sau đây mình xin đi vào chi tiết. Cách tối ưu điểm Google PageSpeed Insight, mình dùng các bước sau:
Ở đây mình dùng Wp-Rocket phiên bản mới nhất 3.4.2. Sau khi cài đặt, các bạn tùy chỉnh thông số như hình dưới:
DASHBOARD
Chọn Rocket Tester nếu bạn muốn thử trải nghiệm những bản test của Rocket. Ở đây mình bật lên để trải nghiệm thử. Bật Rocket Analytics để WP Rocket thu thập các thông số của website. Mình chọn tắt đi cho nhẹ bớt.
CACHE
Bật Seperate Cache Files for mobile trong trường hợp bạn không sử dụng Responsive và có giao diện mobile riêng. Ở đây mình dùng Responsive nên không bật tính năng này.
FILE OPTIMIZATION
Ở đây mình bật toàn bộ tùy chọn. Có một số trường hợp khi bật toàn bộ tùy chọn sẽ bị lỗi bể giao diện, các bạn có thể tắt bớt tùy chọn Load Java Script Deferred và Combine Javascript nếu có trường hợp lỗi xảy ra.
MEDIA
Ở phần này mình cũng bật toàn bộ tùy chọn.
PRELOAD
Bật toàn bộ tùy chọn
DATABASE
Bật toàn bộ tùy chọn
CLOUD FLARE:
Ở đây mình dùng DNS của Clouflare, nên chỗ này sẽ setup thêm CDN Clouflare để tăng tốc độ tải trang. Các bạn vào ADD-ONS , bật ADD ONS Clouflare lên, sau đó điền các thông số API Key, Email , và ID Zone vào.
Để lấy thông số GLOBAL API , các bạn đăng nhập vào CloudFlare, ở goc phải chọn My Profile, sau đó chọn Tab Api Tokens, ở mục Global API Key , chọn View:
Để lấy thông số Zone ID, các bạn vào CloudFlare, vào domain cần Setup, chọn Tab Overview, và kéo xuống bên dưới sẽ thấy Zone ID
Như vậy là mình vừa Setup xong phần 1 – WP Rocket.
Các bạn tìm và cài đặt plugin EWWW Image Optimizer, sau đó vào Cài đặt – EWWW Image Optimizer để thiết lập các tùy chọn. Ở đây mình chỉ dùng 2 tùy chọn, đó là Advanced, cho chất lượng hình ảnh về 90% , và tùy chọn convert ảnh về WebP . Tùy theo từng yêu cầu cụ thể, các bạn có thể tham khảo thêm các chức năng Resize và Convert.
Cách tối ưu điểm Google PageSpeed Insight
Sau khi thiết lập xong, các bạn vào Thư viên – Bulk Optimize , bật 2 tùy chọn lên và tiến hành Scan:
Chờ cho tiến trình chạy xong, ta sẽ có các hình ảnh được nén lại theo định dạng WebP. Các bạn có thể làm tiếp bước 3:
Các bạn vào file Functions.php của themes, và thêm vào đoạn code sau ở cuối FIle:
function remove_head_scripts() {
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
}
add_action( ‘wp_enqueue_scripts’, ‘remove_head_scripts’ );
OKe như vậy là đã hoàn tất 3 bước.Lúc này bằng mắt thường, các bạn có thể thấy tốc độ tải trang của website đã cải thiện đáng kể. Các bạn tiến hành kiểm tra lại điểm Google PageSpeed Insight và GT Metrix để tận hưởng thành quả nhé ! Tùy từng thời điểm Test và tùy từng website mà số điểm này có thể xê dịch khác nhau. Theo cá nhân mình thì điểm GT Metrix phản ánh chính xác tốc độ website hơn là điểm Google Page Speed Insight .
Các bạn kiểm tra tốc độ load website trên mobile và máy tính bàn tại link sau: https://developers.google.com/speed/pagespeed/insights/
Cám ơn các bạn đã theo dõi bài viết: Cách tối ưu điểm Google PageSpeed Insight!
Nguồn: web Khởi Nghiệp
