Autoptimize là một plugin hữu ích hỗ trợ cải thiện thời gian tải trang WordPress. Để có được hiệu quả tối ưu tốt nhất, plugin này tập trung vào ba yếu tố quan trọng sau:
Nén, Gộp và Tối Ưu File CSS
Cách thức làm việc này giúp giảm dung lượng file CSS, đồng thời giảm số lượng request tới máy chủ. Tổng cộng, chúng cung cấp một website nhanh hơn. Ngoài ra, tính năng “tối ưu” cũng tương đối quan trọng, nó giúp loại bỏ CSS và JS không cần thiết để ưu tiên cho nội dung quan trọng hiển thị đầu tiên.
Hướng Dẫn Sử Dụng Autoptimize
Giao diện của Autoptimize cho phép bạn tùy chỉnh theo ý muốn. Dưới đây là một số tùy chọn quan trọng mà bạn nên lưu ý:
-
Tick chọn Force JavaScript in : Điều này cho phép đẩy JavaScript lên khu vực
<head>
. Điều này có thể giúp sửa một số lỗi liên quan đến JavaScript, nhưng cũng có thể gây ra vấn đề về chặn hiển thị (render blocking). Lựa chọn cá nhân của tôi là không tick chọn. -
Tick chọn Also aggregate inline JS: Điều này cho phép gộp JS nội tuyến, giúp giảm thiểu số lượng request. Tuy nhiên, điều này cũng có thể làm tăng dung lượng cache một cách nhanh chóng. Tùy thuộc vào trang web cụ thể, bạn có thể chọn hoặc không chọn.
-
Tick chọn Exclude scripts from Autoptimize: Điều này cho phép bạn loại bỏ tối ưu hóa một số file JS cụ thể. Mặc định, Autoptimize không tối ưu hóa file jQuery vì nó có thể ảnh hưởng đến chức năng của plugin và giao diện sử dụng jQuery. Bạn có thể thêm các file không muốn tối ưu vào khu vực tương ứng, cách nhau bằng dấu phẩy.
-
Tick chọn Generate data: URIs for images: Điều này giúp nhúng ảnh vào file CSS để giảm số lượng request tải ảnh. Đây là một tùy chọn nên được chọn.
-
Tick chọn Also aggregate inline CSS: Điều này giúp gộp CSS nội tuyến. Tuy nhiên, trên các theme uy tín, CSS nội tuyến đã được sử dụng để tránh chặn hiển thị từ đầu. Vì vậy, tùy thuộc vào trang web cụ thể, bạn có thể chọn hoặc không chọn.
-
Tick chọn Inline and Defer CSS: Điều này giúp nội tuyến và trì hoãn tải CSS. Thông thường, Autoptimize sẽ tối ưu hóa và đặt CSS lên đầu thẻ
<head>
, nhưng điều này sẽ làm chặn hiển thị trang. Khi bạn tick chọn tùy chọn này, file CSS sẽ được trì hoãn tải. Bạn cũng có thể thêm CSS quan trọng cho bố cục trang vào phần “Paste the above the fold CSS here”. Lựa chọn này tùy thuộc vào từng trang cụ thể. -
Tick chọn Inline all CSS: Điều này giúp nội tuyến tất cả CSS. Điều này giảm số lượng request so với việc tải CSS từ file riêng biệt. Tuy nhiên, lựa chọn này chỉ có hiệu quả khi file CSS không quá lớn và trang web không có lượng truy cập quá lớn. Nên lựa chọn cá nhân của tôi là không tick chọn phần lớn trường hợp.
-
Tick chọn Exclude CSS from Autoptimize: Điều này giúp loại trừ một số file CSS cụ thể khỏi quá trình tối ưu hóa. Bạn cần loại trừ những file CSS có thể làm hỏng tính năng hoặc bố cục của trang web. Theo mặc định, một số file CSS được loại trừ như wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css.
Tùy Chỉnh Extra Gia Tăng Tối Ưu hóa
Sau đây là các tùy chọn để cải thiện tốc độ trang web nhanh hơn:
-
Tick chọn Remove emojis: Điều này loại bỏ các biểu tượng emojis khỏi CSS và JS. Lựa chọn này là tùy chọn cá nhân, nhưng tôi khuyên nên tick chọn.
-
Tick chọn Remove query strings from static resources: Điều này loại bỏ các chuỗi truy vấn khỏi các tài nguyên tĩnh. Mặc dù không tăng tốc độ tải trang, nhưng nó có thể cải thiện hiệu suất. Lựa chọn cá nhân của tôi là không tick chọn.
-
Tick chọn Google Fonts: Nếu giao diện của bạn sử dụng Google Fonts, bạn có thể loại bỏ chúng bằng cách chọn “Remove Google Fonts”. Bạn cũng có thể gộp và tải bất đồng bộ với webfont.js. Lựa chọn cá nhân của tôi là tick chọn.
-
Preconnect to 3rd party domains (advanced users): Tùy chọn này giúp kết nối trước với tên miền của bên thứ ba, giúp giảm độ trễ. Bạn cũng có thể tìm hiểu thêm về các cơ chế prefetch và preload.
-
Async Javascript-files (advanced users): Tùy chọn này cho phép tải file JS không đồng bộ. Bạn có thể thêm các file JS mà bạn muốn tải không đồng bộ, bao gồm cả file local và bên thứ ba.
-
Optimize YouTube videos: Tính năng này yêu cầu bạn cài đặt một plugin bổ sung. Nó giúp trì hoãn việc tải video YouTube để cải thiện tốc độ tải trang. Tuy nhiên, nên chỉ sử dụng tính năng này nếu video không xuất hiện ở đầu trang. Bạn có thể tìm hiểu thêm về các biện pháp khác để trì hoãn tải video.
Autoptimize là một plugin mạnh mẽ để tối ưu hóa tốc độ tải trang WordPress. Bằng cách tùy chỉnh các tùy chọn phù hợp, bạn có thể cải thiện rõ rệt hiệu suất của trang web của mình. Hãy thử và trải nghiệm ngay!