Google PageSpeed Insights Hiện tại, nó là một trong những thước đo cơ bản dùng để đánh giá tốc độ và độ thân thiện của một trang web đối với người dùng do chính Google đề xuất. Hôm nay HOSTVN sẽ hướng dẫn các bạn cách tối ưu Google PageSpeed Insights cho WordPress để đạt điểm cao nhất.
Trải nghiệm tối ưu hóa WordPress này được thử nghiệm trên Hosting sử dụng LiteSpeed. Bạn có thể tham khảo dịch vụ WordPress Hosting tại HOSTVN cũng đang hỗ trợ webserver này.
Tại sao chọn lưu trữ sử dụng LiteSpeed?
LiteSpeed là một trong những máy chủ web dựa trên Linux nhanh nhất và hiệu quả nhất hiện nay, cùng với Apache và NginX. LiteSpeed có nguyên tắc hoạt động giống như Apache (tức là hầu hết các tính năng của Apache đều có thể sử dụng trên LiteSpeed). Tuy nhiên, nó có khả năng chịu tải và tốc độ truyền, xử lý dữ liệu tốt hơn nhiều so với Apache. Đó là lý do tại sao một số nhà cung cấp dịch vụ lưu trữ hiện chọn LiteSpeed Enterprise (phiên bản đầy đủ) làm máy chủ web của họ, mặc dù chúng không miễn phí.
Bài viết này chia sẻ kinh nghiệm chung cho mã nguồn WordPress, nhưng dưới đây sẽ là bài test trên website cài mã nguồn wordpress và theme Newspaper v8.0 mới nhất để test và hướng dẫn các bạn.
Trước khi tối ưu hóa:
Trên điện thoại di động
Trên máy tính để bàn
Các plugin được sử dụng để tối ưu hóa điểm PageSpeed Insights
Sử dụng 2 plugin chính là Tự động tối ưu hóa và LiteSpeed Cache. Ngoài ra còn có một vài plugin bổ sung sẽ được đề cập trong bài viết.
Cấu hình chi tiết của các plugin
Đầu tiên là plugin LiteSpeed Cache
Sau khi cài đặt plugin LiteSpeed Cache và kích hoạt plugin, hãy truy cập LiteSpeed Cache => Cài đặt. Trong tab Chung, bạn đặt như sau:
Trong đó:
- Bật LiteSpeed Cache: chọn Cho phép để kích hoạt bộ nhớ cache.
- Bộ đệm công cộng mặc định TTL: thời gian cache mặc định cho tất cả các trang (giây), tối thiểu là 30 giây.
- Trang trước mặc định TTL: thời gian cache cho trang chủ (giây), tối thiểu 30 giây.
- Nguồn cấp dữ liệu mặc định TTL: thời gian lưu trong bộ nhớ cache cho Nguồn cấp RSS. Nên đặt thành 0 để vô hiệu hóa nó.
- TTL trang 404 mặc định: thời gian cache cho trang 404 (giây), đặt dưới 30, trang 404 sẽ không được lưu trong bộ nhớ cache.
- Trang 403 mặc định TTL: thời gian cache cho trang 403 (giây), đặt dưới 30, trang 404 sẽ không được cache.
- TTL 500 trang mặc định: thời gian cache cho trang 500 (giây), đặt dưới 30, trang 404 sẽ không được cache.
- Bật bộ nhớ cache cho người bình luận: bật bộ đệm nhận xét.
- Xóa tất cả khi nâng cấp: xóa toàn bộ bộ nhớ đệm khi nâng cấp WordPress, plugin, theme …
- Bật Chế độ xem Di động Riêng biệt: Bật bộ nhớ cache cho thiết bị di động. Nếu bạn sử dụng giao diện đáp ứng, không chọn hộp này.
- Danh sách tác nhân người dùng chế độ xem trên thiết bị di động: danh sách các thiết bị, trình duyệt di động được hỗ trợ. Bạn để mặc định.
Tab Trang cụ thểbạn nên giữ nguyên các cài đặt.
Tab Quy tắc thanh lọc cho phép bạn thiết lập xóa bộ nhớ cache tự động khi đăng hoặc chỉnh sửa bài viết / bình luận, bạn nên giữ nguyên cài đặt.
Chuyển hướng Quy tắc không lưu vào bộ nhớ cache Đây là nơi bạn có thể đặt những trang nào bạn không muốn lưu vào bộ nhớ cache. Nếu không có ngoại lệ, hãy để mặc định.
Chuyển hướng Cài đặt nâng cao cho phép bạn thiết lập để sử dụng thêm các plugin nén / kết hợp css, jss … như Autoptimize chẳng hạn. Bởi vì LiteSpeed Cache js, css tối ưu hóa không có sẵn như một số plugin bộ nhớ đệm khác, vì vậy đây là một lựa chọn thay thế khá tốt.
Khi quá trình thiết lập hoàn tất, hãy nhấp vào. cái nút Lưu thay đổi để lưu và tận hưởng thành quả. Đơn giản như thế.
Ghi chú: Không được dùng LiteSpeed Cache cùng với các plugin bộ nhớ đệm khác. Nếu vậy, hãy xóa chúng trước khi cài đặt LiteSpeed Cache.
Để kiểm tra xem LiteSpeed Cache có hoạt động hay không? Bạn truy cập vào địa chỉ http://www.webconfs.com/http-header-check.php sau đó nhập tên miền của mình vào để kiểm tra, kết quả như trong hình là X-LiteSpeed-Cache => nhấn là LiteSpeed Cache đang hoạt động.
Nếu lần đầu kiểm tra nó báo X-LiteSpeed-Cache => miss thì bạn kiểm tra lại, vì có thể lần đầu nó chưa cache nên sẽ báo miss.
Cấu hình chi tiết của plugin Autoptimize
Sau khi cài đặt xong, hãy truy cập Cài đặt => Tự động tối ưu hóatại tab Chính bạn đánh dấu vào 3 mục Tùy chọn HTML, Tùy chọn JavaScript và Tùy chọn CSS như hình bên dưới và nhấp vào Lưu các thay đổi và làm trống bộ nhớ cache để lưu cài đặt.
Bây giờ hãy quay lại PageSpeed Insights để kiểm tra.
Tiếp tục sửa các lỗi còn lại.
Tối ưu hóa hình ảnh: Sau khi thử test một số plugin nén hình ảnh nhưng khi kiểm tra trên PageSpeed Insights nó vẫn báo là cần tối ưu hình ảnh nên mình sẽ hướng dẫn đơn giản như sau:
Sau khi kiểm tra tại PageSpeed Insights, bạn nhìn xuống bên dưới, sẽ có phần Tải xuống hình ảnh được tối ưu hóa, Tài nguyên JavaScript và CSS cho trang nàybạn bấm vào link tải ảnh đã được Google tối ưu rồi ghi đè lên file ảnh trên hosting.
Sau khi tải về tập tin đã được Google nén, giải nén bạn sẽ thấy thư mục Optimi_contents, lúc này bạn cần xác định xem hình ảnh cần tải lên nằm ở thư mục nào.
Quay lại PageSpeed Insights, rê chuột vào đường dẫn chứa file ảnh cần tối ưu, thao tác này sẽ hiển thị đầy đủ đường dẫn của file ảnh.
Sau khi xác định được đường dẫn của file ảnh cần tối ưu, bạn truy cập vào hosting theo đường dẫn đó để ghi đè lên file ảnh tải về của Google.
Trước khi tải lên tệp hình ảnh đã được tối ưu hóa, hãy nhớ đánh dấu vào Ghi đè tệp hiện có để tải hình ảnh lên ghi đè tệp hiện có.
Sau khi tải lên những hình ảnh đã được Google tối ưu hóa, chúng tôi sẽ kiểm tra lại điểm PageSpeed Insights
Vẫn có hình ảnh từ Gravatar, không có lựa chọn nào khác ngoài việc tắt nó đi vì bạn không thể tối ưu hóa hình ảnh của trang web mà bạn không thể quản lý
đi vào Cài đặt => Thảo luậnbỏ chọn hộp Hiển thị hình đại diện và nhấp vào Lưu thay đổi để lưu cài đặt.
Quay lại PageSpeed Insights để kiểm tra.
Điểm PageSpeed Insight bắt đầu chuyển sang màu xanh lục ở cả Thiết bị di động và Máy tính để bàn, hãy tiếp tục tối ưu hóa lên 100
Vì vậy, bây giờ có lỗi Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên, hãy quay lại Cài đặt => Tự động tối ưu hóa, nhấp vào Hiển thị cài đặt nâng cao
Tick chọn Inline all CSS
Sau đó cuộn xuống dưới cùng và nhấp vào Lưu thay đổi và làm trống bộ nhớ cache để lưu cài đặt.
Vui lòng kiểm tra lại. Đã đạt 100 điểm cả Di động và Máy tính để bàn rồi.
Thật tuyệt vời phải không!
Tuy nhiên tùy từng theme sẽ có một số lỗi khác nhau cần khắc phục.
Chúc may mắn.
(Bài viết được tham khảo từ blog namlee.net – kỹ thuật viên tại HOSTVN)
