Autoptimize là plugin giúp nén và giảm dung lượng file hỗ trợ cải thiện thời gian tải trang thông qua các yếu tố chính sau:
- Nén, gộp, và tối ưu file CSS
- Nén, gộp, và tối ưu file JavaScript
- Nén HTML
Link plugin: http://wordpress.org/plugins/autoptimize/
Cách thiết lập chi tiết Autoptimize
1. JavaScript Options
- Optimize JavaScript Code: cho phép thiết lập Optimize cho JS
- Aggregate JS-files: gộp tất cả JS thành 1 file
- Also aggregate inline JS: gộp JS thành nội tuyến
- Force JavaScript in : là đẩy JS lên khu vực
- Exclude scripts from Autoptimize: loại trừ những file JS không muốn Autoptimize
- Add try-catch wrapping: thêm try-catch nếu JS bị lỗi
2. CSS Options
- Optimize CSS Code: cho phép thiết lập Optimize cho CSS
- Aggregate CSS-files: gộp tất cả CSS thành 1 file
- Also aggregate inline CSS: gộp CSS thành nội tuyến
- Generate data: URIs for images? Điều này giúp ảnh nền nhỏ được nội tuyến vào file CSS để tránh thêm một lượt request tải ảnh về.
- Inline and Defer CSS: là nội tuyến và trì hoãn tải CSS. Bình thường Autoptimze sẽ tối ưu hóa CSS và đưa nó lên đầu thẻ head, nhưng điều đó sẽ chặn hiển thị trang (cái bạn thường thấy PageSpeed Insight của Google thông báo). Khi bạn tick tùy chọn này, CSS sẽ được trì hoãn tải (ưu tiên HTML tải trước). Và để bố cục trang không bị ảnh hưởng quá lớn bạn có thể thêm CSS vào phần Paste the above the fold CSS here – là các CSS quan trọng liên quan đến bố cục của trang. Để có được nội dung CSS này, bạn vào trang: https://www.sitelocity.com/critical-path-css-generator rồi paste URL bài post vào, nó sẽ trích xuất cho bạn CSS cần thiết
- Inline all CSS: là đặt nội tuyến tất cả CSS. Điều này có tác dụng giảm request so với việc đặt CSS ngoại tuyến.
- Exclude CSS from Autoptimize: loại trừ các file CSS không muốn Autoptimize.
3. HTML Options
- Optimize HTML Code: cho phép thiết lập Optimize cho HTML
- Keep HTML comments: giữ HTML comment trong trang.
4. CDN Options
CDN Base URL: Nếu bạn sử dụng dịch vụ CDN (như MaxCDN, KeyCDN) thì ở phần CDN options bạn điền URL gốc CDN vào đó, còn không thì bỏ trống
5. Cache Info: phần này cho biết các thông tin liên quan đến cache, bao gồm thư mục, trạng thái cho phép ghi đè của Autoptimize và dung lượng file cache đang có.
6. Misc Options: đây là tùy chọn bổ sung nâng cao
- Save aggregated script/css as static files: lưu cache tĩnh các file JS và CSS
- Minify excluded CSS and JS files: các file đã loại trừ Optimize thì sẽ không Minify
- Also optimize for logged in users: optimize sẽ được bật cho cả người dùng đăng nhập