Hướng dẫn sử dụng plugin Autoptimize để tối ưu website WordPress một cách đơn giản.
Nếu bạn chưa biết thì Autoptimize là một trong những plugin nổi tiếng bậc nhất trên WordPress.org hiện nay với hơn 23 triệu lượt download và hơn 1 triệu website đang kích hoạt. Nó là một sự lựa chọn tốt cho việc tối ưu CSS, JS, HTML, Google Fonts… của website WordPress. Ngay bây giờ, tôi sẽ hướng dẫn cho bạn các bước cài đặt và sử dụng plugin Autoptimize để tối ưu tốc độ load cho website WordPress của mình một cách nhanh chóng.
Tham khảo thêm:
Tại sao bạn nên chọn plugin Autoptimize?
- Nó miễn phí. Nói chính xác hơn thì phần lớn các tính năng quan trọng của nó đều miễn phí.
- Hiệu suất tối ưu cao cùng khả năng tương thích tốt.
- Có thể dùng kết hợp với các plugin tạo cache như: WP Super Cache, WP Rocket, LiteSpeed Cache…
- Dễ dàng cài đặt và sử dụng.
- Đang tiếp tục được phát triển và cập nhật thường xuyên.
Cài đặt và sử dụng plugin Autoptimize
1. Đầu tiên, như thường lệ, các bạn cần phải cài đặt và kích hoạt plugin Autoptimize (download).
2. Truy cập Settings => Autoptimize. Tại đây, hãy chú ý 2 tab là CSS, JS & HTML và Extra. Những tab còn lại, các bạn có thể bỏ qua vì chúng không quan trọng hoặc không miễn phí.
Tab CSS, JS & HTML
Trong tab này, các bạn sẽ thấy một số thiết lập như sau:
Trong đó:
- Optimize JavaScript Code: kích hoạt tính năng nén JS.
- Aggregate JS-files: gộp các file JS thành 1 file và nén chúng.
- Also aggregate inline JS: gộp cả các đoạn inline JS trong HTML vào file nén. Tính năng này có thể khiến số lượng file cache tăng lên nhanh chóng, dễ gây lỗi nên không được khuyên dùng.
- Force JavaScript in <head>: load file JS ở header. Tính năng này sẽ gây ra lỗi JS chặn hiển thị nội dung nên không được khuyên dùng.
- Add try-catch wrapping: tick vào mục này nếu việc gộp các file JS khiến website của bạn bị lỗi JS.
- Do not aggregate but defer: kích hoạt tính năng này nếu bạn không muốn gộp chung các file JS mà chỉ muốn tải chúng một cách không đồng bộ (defer).
- Also defer inline JS: tải không đồng bộ các đoạn inline JS trong HTML.
- Exclude scripts from Autoptimize: loại trừ một số file JS ra khỏi danh sách tối ưu. Các file được phân tách bằng dấu phẩy (,). Các bạn có thể điền URL đầy đủ của file JS vào đây.
- Optimize CSS Code: kích hoạt tính năng nén CSS.
- Aggregate CSS-files: gộp các file CSS thành 1 file và nén chúng.
- Also aggregate inline CSS: gộp cả các đoạn inline CSS trong HTML vào file nén. Tính năng này có thể khiến số lượng file cache tăng lên nhanh chóng nên không được khuyên dùng, mặc dù nó có thể giúp giải quyết một số vấn đề liên quan đến chỉ số CLS.
- Generate data URIs for images: bật tính năng này để bao gồm các hình nền nhỏ trong file CSS thay vì tải dưới dạng các file riêng biệt.
- Eliminate render-blocking CSS: sử dụng critical CSS để khắc phục lỗi CSS chặn hiển thị nội dung. Tính năng này không miễn phí.
- Inline all CSS: tính năng này sẽ giúp xử lý lỗi CSS chặn hiển thị nội dung. Tuy nhiên nó không được khuyên dùng vì sẽ khiến HTML phình to ra, đặc biệt không phù hợp với các site có lượng truy cập lớn.
- Exclude CSS from Autoptimize: oại trừ một số file CSS ra khỏi danh sách tối ưu. Các file được phân tách bằng dấu phẩy (,). Các bạn có thể điền URL đầy đủ của file CSS vào đây.
- Optimize HTML Code: kích hoạt tính năng nén HTML.
- Keep HTML comments: giữ lại các comment trong mã nguồn HTML. Việc loại bỏ comment có thể gây lỗi website trong một số trường hợp và đây là giải pháp cho bạn.
- CDN Base URL: điền URL của CDN trong trường hợp site của bạn sử dụng CDN (không phải là CloudFlare hay QUIC.Cloud).
- Save aggregated script/css as static files: lưu các file JS, CSS đã tối ưu thành các file cache trên host của bạn.
- Minify excluded CSS and JS files: nén cả các file JS và CSS đã loại trừ (không gộp).
- Enable 404 fallbacks: hạn chế tình trạng lỗi 404 của các file JS, CSS tối ưu.
- Also optimize for logged in editors/ administrators: bật tính năng tối ưu cho cả quản trị viên và biên tập viên đã đăng nhập tài khoản.
- Enable configuration per post/ page: cho phép bạn tùy chỉnh thiết lập tối ưu CSS, JS và HTML cho từng trang/ bài viết riêng biệt.
Các bạn nên thiết lập như trong hình minh họa bên trên để hạn chế tối đa khả năng xảy ra lỗi. Sau khi thiết lập xong, click vào nút Save Changes and Empty Cache để lưu lại đồng thời xóa các file cache.
Tab Extra
Chuyển qua tab Extra, các bạn sẽ thấy một số tùy chọn như sau:
Trong đó:
- Google Fonts: các bạn nên chọn Remove Google Fonts (để loại bỏ nó) hoặc Combine and link deferred in head (fonts load late, but are not render-blocking), includes display:swap (để tối ưu việc tải nó). Không nên bật tính năng này nếu bạn đang kích hoạt một tính năng tương tự bằng plugin khác (chẳng hạn như LiteSpeed Cache). Tham khảo thêm: Khắc phục lỗi Google Fonts trong Google PageSpeed Insights.
- Remove emojis: loại bỏ Emoji. Không nên bật tính năng này nếu bạn đang kích hoạt một tính năng tương tự bằng plugin khác (chẳng hạn như LiteSpeed Cache). Tham khảo thêm: Loại bỏ Emoji để tăng tốc độ load cho website WordPress.
- Remove query strings from static resources: loại bỏ query string của các file CSS, JS… Tham khảo thêm: Loại bỏ query string trong WordPress không cần dùng plugin.
- Preconnect to 3rd party domains: thiết lập preconnect cho các file tài nguyên của bên thứ ba.
- Preload specific requests: thiết lập preload cho các file cụ thể, chẳng hạn như icon font (FontAwesome, Icomoon, Dashicons…). Các file được phân tách nhau bằng dấu phẩy, các bạn có thể điền URL đầy đủ của file vào đây.
- Async Javascript-files: thiết lập tải không đồng bộ cho các file JS của bên thứ ba. Các file được phân tách nhau bằng dấu phẩy, các bạn có thể điền URL đầy đủ của file JS vào đây.
Sau khi tiết lập xong, click vào nút Save Changes để lưu lại. Xóa cache website (nếu có) và kiểm tra kết quả.
Xóa cache của plugin Autoptimize
Các file cache CSS và JS do plugin Autoptimize tạo ra sẽ không tự động được xóa bỏ. Sau khi bạn chỉnh sửa file CSS/ JS của theme hoặc plugin, hãy rê chuột lên biểu tượng của Autoptimize trên Admin Bar => click vào nút Delete Cache để xóa cache.
Các bạn cũng có thể làm điều này khi dung lượng cache quá lớn, chiếm dụng tài nguyên lưu trữ của host. Tham khảo thêm: Tự động xóa cache của plugin Autoptimize
Một số lưu ý
- Autoptimize là sự bổ sung hoàn hảo cho plugin WP Super Cache vì plugin này không có tính năng tối ưu CSS, JS và HTML. Tham khảo thêm: Hướng dẫn cài đặt và cấu hình plugin WP Super Cache.
- Khi sử dụng plugin Autoptimize chung với các plugin tạo cache như WP Rocket hay LiteSpeed Cache, các bạn nên tắt hết các tính năng tối ưu CSS, JS và HTML của những plugin này đi để tránh xung đột.
Bạn có đang sử dụng plugin Autoptimize trên website WordPress của mình không? Bạn đánh giá thế nào về plugin này? Mọi thắc mắc liên quan đến việc cài đặt plugin Autoptimize, xin vui lòng gửi vào khung bình luận bên dưới để được hỗ trợ và giải đáp.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Mình đổi từ Lite cache qua cài Super cache + Autoptimize thì tốc độ load trang nhanh hơn hẳn, cảm ơn bạn về bài viết chất lượng.
Bên mình còn có rất nhiều thủ thuật tăng tốc WordPress, nếu bạn có nhu cầu thì tham khảo thêm nhé. :)
Plugin này xài khá ok, nén CSS, JS cá kiểu bài bản, mình cũng đang sử dụng plugin này. Tiếc là nó không có cache. Mà nếu dùng plugin cache thì đa số đều có tính năng của plugin này.
Bạn có thể kết hợp Autoptimize với plugin WP Super Cache (chỉ có tính năng cache đơn thuần) nhé. Mà cũng có thể dùng chung với LiteSpeed Cache, WP Rocket… trong trường hợp tính năng tối ưu CSS, JS, HTML của những plugin này khiến website bị lỗi. Hãy tắt tính năng tối ưu CSS, JS, HTML của chúng đi và thay thế bằng Autoptimize.
Wp Super Cache mình chưa dùng, LiteSpeed vs Rocket dùng rồi, mà thấy hơi dư tính năng nếu kết hợp chung vs plugin này, nên chắc dùng thử Wp Super Cache :D
Nếu bạn dùng WP Super Cache thì phải kết hợp thêm cả hướng dẫn cài đặt browser caching nữa. Bởi vì WP Super Cache không có sẵn tính năng này.
Ok thanks bác Hiếu nhiều!