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

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

Hướng dẫn sử dụng plugin Autoptimize để tối ưu hóa trang web WordPress của bạn một cách đơn giản.

Nếu bạn chưa biết thì Autoptimize là một trong những plugin phổ biến nhất trên WordPress.org hiện nay với hơn 23 triệu lượt tải xuống và hơn 1 triệu trang web đang hoạt động. Đây là một lựa chọn tốt để tối ưu hóa CSS, JS, HTML, Google Fonts… của trang web WordPress. Ngay bây giờ, mình sẽ hướng dẫn các bạn các bước cài đặt và sử dụng plugin Autoptimize để tối ưu hóa tốc độ tải trang web WordPress của bạn một cách nhanh chóng.

Tìm hiểu 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, hầu hết các tính năng quan trọng của nó đều miễn phí.
• Hiệu suất được tối ưu hóa cao với khả năng tương thích tốt.
• Có thể sử dụng kết hợp với các plugin tạo bộ nhớ đệm như: WP Super Cache, WP Rocket, LiteSpeed ​​Cache …
• Dễ dàng cài đặt và sử dụng.
• Đang phát triển và thường xuyên cập nhật.

Cài đặt và sử dụng plugin Autoptimize

1. Đầu tiên, như thường lệ, bạn cần cài đặt và kích hoạt plugin Tự động tối ưu hóa (Tải xuống).

2. Truy cập Cài đặt => Tự động tối ưu hóa. Tại đây, hãy để ý 2 tab CSS, JS & HTML và Phụ. Các tab còn lại, bạn có thể bỏ qua vì không quan trọng hoặc không miễn phí.

Các tab CSS, JS & HTML

Trong tab này, bạn sẽ thấy một số cài đặt như sau:

Bên trong:

• Tối ưu hóa mã JavaScript: bật tính năng nén JS.
• Tệp JS tổng hợp: hợp nhất các tệp JS thành 1 tệp và nén chúng.
• Cũng tổng hợp JS nội tuyến: đưa JS nội tuyến trong HTML vào tệp nén. Tính năng này có thể khiến số lượng tập tin cache tăng lên nhanh chóng, gây ra lỗi nên không được khuyến khích.
• Buộc JavaScript trong : tải tệp JS trong tiêu đề. Tính năng này sẽ gây ra lỗi JS chặn nội dung nên không được khuyến khích.
• Thêm gói thử bắt: đánh dấu vào ô này nếu việc hợp nhất các tệp JS khiến trang web của bạn bị lỗi JS.
• Không tổng hợp mà hoãn lại: kích hoạt tính năng này nếu bạn không muốn gộp các tệp JS mà chỉ muốn tải chúng không đồng bộ (defer).
• Cũng hoãn JS nội tuyến: tải không đồng bộ các đoạn JS nội tuyến trong HTML.
• Loại trừ các tập lệnh khỏi Tự động tối ưu hóa: loại trừ một số tệp JS khỏi danh sách tối ưu. Các tệp được phân tách bằng dấu phẩy (,). Bạn có thể nhập URL đầy đủ của tệp JS tại đây.
• Tối ưu hóa mã CSS: bật tính năng nén CSS.
• Tệp CSS tổng hợp: hợp nhất các tệp CSS thành một tệp và nén chúng.
• Đồng thời tổng hợp CSS nội tuyến: hợp nhất tất cả các đoạn CSS nội tuyến trong HTML vào tệp nén. Tính năng này có thể nhanh chóng tăng số lượng tệp bộ đệm nên không được khuyến khích, mặc dù nó có thể giúp giải quyết một số vấn đề liên quan đến CLS.
• Tạo URI dữ liệu cho hình ảnh: kích hoạt tính năng này để bao gồm các hình ảnh nền nhỏ trong tệp CSS thay vì tải dưới dạng các tệp riêng biệt.
• Loại bỏ CSS chặn hiển thị: sử dụng CSS quan trọng để sửa lỗi CSS chặn nội dung. Tính năng này không miễn phí.
• Nội dòng tất cả CSS: tính năng này sẽ giúp xử lý các lỗi CSS chặn nội dung. Tuy nhiên, nó không được khuyến khích vì nó sẽ làm cho HTML bị cồng kềnh, đặc biệt không phù hợp với những trang có lượng truy cập cao.
• Loại trừ CSS khỏi Autoptimize: loại trừ một số tệp CSS khỏi danh sách tối ưu hóa. Các tệp được phân tách bằng dấu phẩy (,). Bạn có thể nhập URL đầy đủ của tệp CSS tại đây.
• Tối ưu hóa mã HTML: bật tính năng nén HTML.
• Giữ các bình luận HTML: giữ lại các bình luận trong mã nguồn HTML. Việc xóa bình luận có thể gây ra lỗi trang web trong một số trường hợp và đây là giải pháp dành cho bạn.
• URL cơ sở CDN: nhập URL của CDN trong trường hợp trang web của bạn sử dụng CDN (không phải CloudFlare hoặc QUIC.Cloud).
• Lưu tập lệnh / css tổng hợp dưới dạng tệp tĩnh: lưu các tệp JS và CSS được tối ưu hóa vào tệp bộ nhớ cache trên máy chủ của bạn.
• Giảm thiểu các tệp CSS và JS bị loại trừ: nén cả tệp JS và CSS bị loại trừ (không hợp nhất).
• Bật dự phòng 404: giới hạn trạng thái lỗi 404 của các tệp JS và CSS được tối ưu hóa.
• Cũng tối ưu hóa cho người chỉnh sửa / quản trị viên đã đăng nhập: bật tính năng tối ưu hóa cho cả quản trị viên và người chỉnh sửa đã đăng nhập.
• Bật cấu hình cho mỗi bài đăng / trang: cho phép bạn tùy chỉnh cài đặt CSS, JS và HTML tối ưu cho các trang / bài đăng riêng lẻ.

Bạn nên thiết lập như hình minh họa bên trên để giảm thiểu khả năng xảy ra lỗi. Sau khi thiết lập xong, hãy nhấp vào. cái nút Lưu các thay đổi và làm trống bộ nhớ cache để lưu và xóa các tệp bộ nhớ cache.

Tab phụ

Chuyển sang các tab Phụ, bạn sẽ thấy một số tùy chọn như sau:

Bên trong:

• Phông chữ Google: bạn nên chọn Xóa phông chữ của Google (để loại bỏ nó) hoặc Kết hợp và liên kết bị trì hoãn trong đầu (phông chữ tải muộn, nhưng không chặn hiển thị), bao gồm hiển thị: swap (để tối ưu hóa tải của nó). Không nên bật tính năng này nếu bạn đang bật một tính năng tương tự bằng một plugin khác (chẳng hạn như LiteSpeed ​​Cache). Xem thêm: Sửa lỗi Google Fonts trong Google PageSpeed ​​Insights.
• Xóa biểu tượng cảm xúc: Xóa biểu tượng cảm xúc. Không nên bật tính năng này nếu bạn đang bật một tính năng tương tự bằng một plugin khác (chẳng hạn như LiteSpeed ​​Cache). Xem thêm: Gỡ bỏ Emoji để tăng tốc độ tải cho website WordPress.
• Xóa chuỗi truy vấn khỏi tài nguyên tĩnh: loại bỏ chuỗi truy vấn của các tệp CSS, JS… Tham khảo thêm: Xóa chuỗi truy vấn trong WordPress mà không cần sử dụng plugin.
• Kết nối trước với các miền của bên thứ 3: đặt kết nối trước cho các tệp tài nguyên của bên thứ ba.
• Tải trước các yêu cầu cụ thể: đặt tải trước cho các tệp cụ thể, chẳng hạn như phông chữ biểu tượng (FontAwesome, Icomoon, Dashicons …). Các tệp được phân tách bằng dấu phẩy, bạn có thể nhập URL đầy đủ của tệp tại đây.
• Không đồng bộ hóa các tệp Javascript: thiết lập tải không đồng bộ cho các tệp JS của bên thứ ba. Các tệp được phân tách bằng dấu phẩy, bạn có thể nhập URL đầy đủ của tệp JS tại đây.

Sau khi cài đặt xong, hãy nhấp vào. cái nút Lưu thay đổi để tiết kiệm. Xóa bộ nhớ cache của trang web (nếu có) và kiểm tra kết quả.

Xóa bộ nhớ cache của plugin Autoptimize

Các tệp bộ đệm CSS và JS được tạo bởi plugin Autoptimize sẽ không tự động bị xóa. Sau khi bạn chỉnh sửa tệp CSS / JS của theme hoặc plugin, hãy di chuột qua biểu tượng Autoptimize trên Admin Bar => nhấp vào nút Xóa bộ nhớ cache để xóa bộ nhớ cache.

Bạn cũng có thể thực hiện việc này khi dung lượng bộ nhớ đệm quá lớn, chiếm tài nguyên lưu trữ của máy chủ. Xem 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ì nó không có các tính năng tối ưu hóa 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 cùng với các plugin bộ nhớ đệm như WP Rocket hoặc LiteSpeed ​​Cache, bạn nên tắt tất cả các tính năng tối ưu hóa CSS, JS và HTML của các plugin này để tránh xung đột.

Bạn có đang sử dụng plugin Autoptimize trên trang web 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, các bạn 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 và mới nhất. Cảm ơn rất nhiều.

Via: sieucoder.com

from sieucoder.com https://ift.tt/3d6Nlrc
via Sieucoder.com