Hướng dẫn tối ưu điểm Google PageSpeed Insight 2019

Xin chào các bạn, hôm nay Web Khởi Nghiệp xin hướng dẫn các bạn cách tối ưu điểm Google PageSpeed Insight cho website. Google PageSpeed Insights 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, và dùng hosting của Hostinger, với gói thấp nhất là 14.000 /tháng khi mua gói 4 năm.

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.Các bạn có thể xem hướng dẫn xác định kích thước hình ảnh website tại đây:

Sau đây mình xin đi vào chi tiết. Để tối ưu điểm Google PageSpeed Insight, mình dùng các bước sau:

  1. Dùng WP-Rocket để cấu hình Cache, Optimize CSS, JS, Lazy Load, CDN thông qua Cloudflare.
  2. Dùng plugin EWWW Image Optimizer  để tối ưu hình ảnh, và chuyển ảnh về định dạng WebP, một định dạng tải nhanh hơn JGP.
  3. Chuyển các Script về cuối trang (Trong một số trường hợp, nếu hai bước trên chưa cải thiện được điểm số như mong muốn)

1.CÀI ĐẶT VÀ TÙY CHỈNH THÔNG SỐ WP- ROCKET

Ở đâ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:

1.1 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.

1.2 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.

1.3 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 DeferredCombine Javascript nếu có trường hợp lỗi xảy ra.

1.4 MEDIA

Ở phần này mình cũng bật toàn bộ tùy chọn.

1.5 PRELOAD

Bật toàn bộ tùy chọn

1.6 DATABASE

Bật toàn bộ tùy chọn

1.7 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.

2. CÀI ĐẶT VÀ SỬ DỤNG EWWW Image Optimizer

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.

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:

3.Chuyển các Script về cuối trang:

Các bạn vào file Functions.php của themes, và thêm vào đoạn code sau ở cuối FIle:

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 .

 

 

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.