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. Hôm nay HOSTVN sẽ hướng dẫn bạn cách tối ưu điểm Google PageSpeed Insights dành cho WordPress sao cho đạt điểm cao nhất.
Kinh nghiệm tối ưu mã nguồn WordPress này được thử nghiệm trên các 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.
Vì sao lại chọn hosting sử dụng LiteSpeed?
LiteSpeed là một trong những webserver hoạt động trên nền tảng Linux có hiệu suất hoạt động cao và nhanh nhất hiện nay, bên cạnh Apache và NginX. LiteSpeed có nguyên lý hoạt động gần giống với Apache (tức là hầu như những tính năng của Apache đều sử dụng được 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 Apache khá nhiều. Đó là lý do tại sao một số nhà cung cấp hosting hiện nay chọn LiteSpeed Enterprise (bản đầy đủ nhất) để làm webserver, mặc dù chúng không hề miễn phí.
Bài viết này chia sẻ kinh nghiệm dành chung cho mã nguồn WordPress, tuy nhiên dưới đây sẽ là thử nghiệm trên website cài đặt mã nguồn wordpress và theme Newspaper v8.0 bản mới nhất để test và hướng dẫn cho các bạn.
Trước lúc tối ưu:
Trên Mobile
Trên Desktop
Các plugin sử dụng để tối ưu điểm PageSpeed Insights
Sử dụng 2 plugin chính đó là Autoptimize và LiteSpeed Cache. Ngoài ra còn có 1 vài plugin phụ sẽ được nhắc đến trong bài viết.
Cấu hình chi tiết các plugin
Đầu tiên là plugin LiteSpeed Cache
Sau khi cài đặt xong plugin LiteSpeed Cache và kích hoạt plugin, truy cập vào LiteSpeed Cache => Settings. Trong tab General, các bạn thiết lập như sau:
Trong đó:
- Enable LiteSpeed Cache: chọn Enable để kích hoạt cache.
- Default Public Cache TTL: thời gian cache mặc định cho toàn bộ các trang (giây), tối thiểu là 30 giây.
- Default Front Page TTL: thời gian cache cho trang chủ (giây), tối thiểu là 30 giây.
- Default Feed TTL: thời gian cache cho RSS Feed. Nên để bằng 0 để vô hiệu hóa nó.
- Default 404 Page TTL: thời gian cache cho trang 404 (giây), thiết lập dưới 30 thì trang 404 sẽ không bị cache.
- Default 403 Page TTL: thời gian cache cho trang 403 (giây), thiết lập dưới 30 thì trang 404 sẽ không bị cache.
- Default 500 Page TTL: thời gian cache cho trang 500 (giây), thiết lập dưới 30 thì trang 404 sẽ không bị cache.
- Enable Cache for Commenters: kích hoạt cache bình luận.
- Purge All on upgrade: xóa toàn bộ cache khi nâng cấp WordPress, plugins, themes…
- Enable Separate Mobile View: kích hoạt cache cho thiết bị di động. Nếu bạn dùng giao diện responsive thì không tick vào mục này.
- List of Mobile View User Agents: danh sách thiết bị, trình duyệt mobile hỗ trợ. Các bạn để mặc định.
Tab Specific Pages, bạn nên giữ nguyên các thiết lập.
Tab Purge Rules cho phép bạn thiết lập việc xóa cache tự động khi đăng tải hoặc chỉnh sửa bài viết/ bình luận, các bạn nên giữ nguyên các thiết lập.
Tab Do Not Cache Rules là nơi bạn có thể thiết lập những trang không muốn cache. Nếu không có ngoại lệ, hãy để theo mặc định.
Tab Advanced Settings cho phép bạn thiết lập để sử dụng thêm các plugin có tính năng nén/ gộp css, jss… như Autoptimize chẳng hạn. Bởi vì LiteSpeed Cache không sẵn tính năng tối ưu js, css như một số plugin tạo cache khác nên đây là một giải pháp thay thế khá tốt.
Sau khi thiết lập xong, bạn click vào nút Save Changes để lưu lại và tận hưởng thành quả. Đơn giản vậy thôi.
Lưu ý: Không sử dụng LiteSpeed Cache chung với các plugin tạo cache khác nhé. Nếu có, hãy gỡ chúng ra trước khi cài đặt LiteSpeed Cache.
Để kiểm tra xem LiteSpeed Cache hoạt động hay chưa? Các bạn truy cập vào địa chỉ http://www.webconfs.com/http-header-check.php sau đó điền tên miền của bạn vào để kiểm tra, kết quả như trong hình X-LiteSpeed-Cache => hit là LiteSpeed Cache đã hoạt động.
Nếu bạn kiểm tra lần đầu tiên báo X-LiteSpeed-Cache => miss thì bạn kiểm tra lại 1 lần nữa, vì có thể lần đầu tiên thường chưa được cache nên sẽ báo miss.
Cấu hình chi tiết plugin Autoptimize
Sau khi đã cài đặt xong, bạn vào Settings => Autoptimize, tại tab Main các bạn đánh dấu check vào 3 mục HTML Options, JavaScript Options và CSS Options như hình sau và click Save Changes and Empty Cache để lưu lại cài đặt.
Bây giờ quay trở lại PageSpeed Insights để kiểm tra.
Tếp tục fix các lỗi còn lại.
Optimize images: Sau khi thử test 1 số plugin nén ảnh nhưng khi check trên PageSpeed Insights vẫn báo cần phải tối ưu lại ảnh nên mình sẽ hướng dẫn cách đơ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 Download optimized image, JavaScript, and CSS resources for this page, các bạn click vào link để download ảnh đã được Google tối ưu sau đó upload đè lên file ảnh trên hosting.
Sau khi download file đã được Google nén về, bạn hãy gải nén ra sẽ thấy thư mục optimized_contents, bây giờ bạn cần phải xác định ảnh cần upload nằm ở thư mục nào.
Quay lại PageSpeed Insights, bạn rê chuột vào đường dẫn chưa file ảnh cần tối ưu, lúc này sẽ hiển thị đường dẫn đầy đủ của file ảnh.
Sau khi đã xác định được đường dẫn file ảnh cần tối ưu, bạn truy cập vào hosting theo đường dẫn đó để upload đè file ảnh vừa download của Google.
Trước khi upload file ảnh đã tối ưu lên, bạn nhớ tick vào Overwrite existing files để upload ảnh đè lên file đã có sẵn.
Sau khi upload các ảnh đã được Google tối ưu, ta kiểm tra lại điểm PageSpeed Insights
Vẫn còn dính ảnh từ Gravatar, không còn cách nào khác đành phải tắt đi vì bạn không thể tối ưu ảnh của site mà bạn không quản lý được
Vào Settings => Discussion, bỏ tick ở mục Avatar Display và click Save Changes để lưu lại cài đặt.
Quay lại PageSpeed Insights để kiểm tra.
Điểm PageSpeed Insight bắt đầu xanh lè cả Mobile à Destop rồi, tiếp tục tối ưu để lên 100 luôn nhé
Vậy là bây giờ còn lỗi Eliminate render-blocking JavaScript and CSS in above-the-fold content, bạn hãy quay lại Settings => Autoptimize, click Show advanced settings
Tick chọn Inline all CSS
Sau đó kéo xuống dưới cùng và click Save Changes and Empty Cache để lưu lại cài đặt.
Kiểm tra lại nhé. Đã đạt 100 điểm cả Mobile lẫn Desktop rồi.
Thật tuyệt vời phải không nào!
Tuy nhiên, cũng tùy vào từng theme mà sẽ còn thêm 1 số lỗi khác nhau để fix nữa.
Chúc các bạn thành công.
(Bài viết được tham khảo từ blog namlee.net – kỹ thuật viên tại HOSTVN)
Namlee làm ở đây hả