• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Sử dụng plugin Autoptimize để tối ưu website WordPress
hosting-tot-nhat-danh-cho-wordpress

Sử dụng plugin Autoptimize để tối ưu website WordPress

Cập nhật: 21/11/2021 Trung Hiếu 7 Bình luận

Mục lục Hiện
  • 1. Tại sao bạn nên chọn plugin Autoptimize?
  • 2. Cài đặt và sử dụng plugin Autoptimize
    • 2.1. Tab CSS, JS & HTML
    • 2.2. Tab Extra
  • 3. Xóa cache của plugin Autoptimize
  • 4. Một số lưu ý

Hướng dẫn sử dụng plugin Autoptimize để tối ưu website WordPress một cách đơn giản.

su-dung-plugin-autoptimize-de-toi-uu-website-wordpress

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:

  • Hướng dẫn cài LiteSpeed Cache cho website WordPress
  • Hướng dẫn cài đặt và sử dụng plugin WP Rocket

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).

cai-dat-va-kich-hoat-plugin-autoptimize

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:

thiet-lap-plugin-autoptimize-js-css-html

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:

thiet-lap-plugin-autoptimize-extra

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.

xoa-cache-cua-plugin-autoptimize

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. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Tính năng Crawl Optimization của plugin Yoast SEO
Tính năng Crawl Optimization của plugin Yoast SEO
Vô hiệu hóa WooCommerce Brands để tăng tốc độ
Vô hiệu hóa WooCommerce Brands để tăng tốc độ

Chuyên mục: Thủ thuật WordPress Thẻ: Tăng tốc WordPress

dich-vu-wordpress-hosting-chong-ddos-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Hướng dẫn xóa cache của plugin LiteSpeed Cache
Bài viết sau Tự động xóa cache của plugin Autoptimize »

Reader Interactions

Bình luận

    Để lại một bình luận Hủy

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. Lực 1 bình luậnviết

    28/07/2022 lúc 22:27

    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ình luận
    • Trung Hiếu Quản lýviết

      29/07/2022 lúc 07:02

      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é. :)

      Bình luận
  2. Alo Tôi 120 bình luậnviết

    24/11/2021 lúc 03:35

    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ình luận
    • Trung Hiếu Quản lýviết

      24/11/2021 lúc 07:44

      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.

      Bình luận
      • Alo Tôi 120 bình luậnviết

        24/11/2021 lúc 17:41

        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

        Bình luận
        • Trung Hiếu Quản lýviết

          24/11/2021 lúc 18:00

          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.

          Bình luận
          • Alo Tôi 120 bình luậnviết

            24/11/2021 lúc 18:24

            Ok thanks bác Hiếu nhiều!

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Tham gia cùng 10.000+ người khác.

Theo dõi qua mạng xã hội

Facebook Group

wpcanban-facebook-group

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Sửa lỗi WordPress

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật CloudFlare

Thủ thuật LiteSpeed

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

Bài viết mới nhất

  • Năm 2025 rồi, có nên viết blog nữa không? 07/05/2025
  • Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản 16/04/2025
  • Tính năng Crawl Optimization của plugin Yoast SEO 31/03/2025
  • Vô hiệu hóa WooCommerce Brands để tăng tốc độ 09/03/2025

Bình luận mới nhất

  • Trung Hiếu trong Năm 2025 rồi, có nên viết blog nữa không?
  • Tuấn Kỷ Nguyên Blog trong Năm 2025 rồi, có nên viết blog nữa không?
  • Trung Hiếu trong Năm 2025 rồi, có nên viết blog nữa không?
  • Tịnh Nguyễn Blog trong Năm 2025 rồi, có nên viết blog nữa không?

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

9 Chuyên mục - 999 Bài viết - 35.502 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting