Nếu bạn là một Fan trong những tín đồ tốt đẹp thì màu xanh luôn là màu mà đượt liệt kê trong những điều tốt và thông suốt nhất trong cuộc đời. Tương tự với hoàn cảnh của bạn thì việc check Page Speed Insight có màu xanh quả là điều đáng trân trọng. Vậy làm sao để có nó ?
Bắt đầu nào !.
Đầu tiên thì mình có một số điều kiện bao gồm điều kiện cần và điều kiện đủ,
– Điều kiện cần : Nếu bạn sử dụng LiteSpeed Cached thì Hosting mà bạn đang sử dụng nên có kèm LiteSpeed Cached, ( Hosting tốt cũng là một phần hỗ trợ cho bạn với các vấn đề như TTFB sẽ được cải thiện và nếu bạn muốn xài Hosting giống mình luôn thì vào TinoHost book lấy 1 em, nhập Code “bancuahao” để được giảm 10% ^^ – Mình xài Shared Host 10GB SSD nha. )
– Điều kiện đủ : Tại trang này mình sẽ để link bạn có thể tải về LiteSpeed Cached hoặc WP-Rocket, việc của bạn là cài đặt lên Website của mình thì mới có thể thực hiện.
Loại | Tên tệp | Tải Xuống |
Plugins | LiteSpeed Cache – Latest | Dowload ZIP |
Plugins | EWWW Image Optimizer – Latest | Dowload ZIP |
Plugins | WP-Rocket Ver 3.2.3.1 | Free Dowload ZIP |
Tối ưu hình ảnh với EWWW Image Optimizer :
Lưu ý : Ở đây mình hướng dẫn với sử dụng plugin EWWW Image Optimizer tuy nhiên bạn cũng có thể sử dụng các Plugin “đình đám khác” ví dụ WP-Smush.it, ShortPixel v.v
Đi đến phần cài đặt của Plugin tại Bảng Tin > Cài Đặt > EWWW Image Optimizer
Nếu bạn không bật chế độ : Scheduled Optimization của Plugin này thì bạn có thể nén hình ảnh thủ công bằng cách đi đến Bảng Tin > Thư Viện > Bulk Optimize
Google khuyến khích bạn sử dụng định dạng WebP hơn nên Plugin này cũng cho phép bạn chuyển đổi các cấu trúc hình ảnh từ định dạng JPEG / PNG sang với WebP.
JPG/PNG to WebP : Bản gốc không bao giờ bị xóa và hình ảnh WebP chỉ nên được phục vụ cho các trình duyệt được hỗ trợ ( tức một số trình duyệt cũ không hoạt động được loại WebP thì khả năng hiển thị hình ảnh đôi khi là không thể )
Force WebP : Hình ảnh WebP sẽ được tạo và lưu cho tất cả các hình ảnh JPG / PNG bất kể kích thước của chúng.
Cài đặt cấu hình với LiteSpeed Cache : Dowload Json Import config
Lưu ý : Với tệp Import Setting có đính kèm, Tùy từng mã nguồn và website sẽ có cho mình một cấu hình riêng vì có thể sẽ gặp lỗi vỡ giao diện nếu mã nguồn không tốt, bạn cần kiểm tra nếu bị vỡ thì nên tắt các phần nén CSS / Combine CSS / JS / HTML. v.v…
Ở phần cài đặt LiteSpeed Cache bạn chủ yếu tập trung vào các Table cài đặt gồm : Tối ưu hóa, Tăng tốc và nâng cao tại cài đặt Bảng Tin > LiteSpeed Cache > Thiết Lập.
Nếu Hosting / VPS mà bạn sử dụng có hỗ trợ Memcached ( Ví dụ như TinoHost ) thì bạn có thể cài đặt luôn cấu hình cho Object Cache,
Các phần cấu hình ghi với dòng Instant Click và Kết hợp CSS bạn cần chú ý khi bật vì nếu mã nguồn không tương thích sẽ gây ra lỗi khi tải trang. Tuy nhiên Instant Click là loại tải trước trang khi bạn rê chuột và liên kết và đem đến hiệu quả tải trước trang và tải trang “chóng mặt” nhất.
Cài đặt cấu hình với WP-Rocket : Dowload Json Import config
Lưu ý : Với tệp Import Setting có đính kèm, Tùy từng mã nguồn và website sẽ có cho mình một cấu hình riêng vì có thể sẽ gặp lỗi vỡ giao diện nếu mã nguồn không tốt, bạn cần kiểm tra nếu bị vỡ thì nên tắt các phần nén CSS / Combine CSS / JS / HTML. v.v…
Đối với WP-Rocket cũng không có quá nhiều các cấu hình nâng cao để sử dụng, thông thường bạn sẽ chú ý hơn với File Optimization , cũng tương tự bạn cần chú ý nếu bật Combine …. cấu hình đôi khi sẽ gây ra lỗi nếu bạn bật tùy chọn này.
Trong quá trình test bạn cứ xóa Cache liên tục và tiến hành kiểm tra lại nhiều lần sẽ có kết quá đúng hơn lúc thao tác thực hiện.
Quan điểm cá nhân khi sử dụng LiteSpeed Cache và WP-Rocket :
Nhìn chung khi sử dụng 2 Plugin trên, LiteSpeed khả năng sử dụng có phần tốt hơn và tinh chỉnh nhiều cấu hình hơn trong quá trình sử dụng, cũng ít bị lỗi trang khi tải so với WP-Rocket , tuy nhiên hoạt động tốt hơn với máy chủ có hỗ trợ LScache thì khả năng chịu tải thường sẽ “bá đạo” hơn. Còn về Rocket độ ổn định khá cao ( điểm số cũng đều đều nhau khi testing kể cả Mobile và Desktop, nếu bạn không sử dụng Litespeed Cache thì WP-Rocket cũng là ứng cử viên sáng giá trong quá trình sử dụng website của mình.
Chúc bạn thành công và hy vọng bạn có thể để lại “thành quả” của mình tại đây cho anh em cũng học tập nhé ^^ Mỗi người sẽ có ý tưởng và khả năng “tay to” hơn trong vấn đề tối ưu của mình. Giữa điểm số và tốc độ mình vẫn thích điểm vừa phải nhưng trải nghiệm người dùng tốt hơn, web load tốt là được.