Cách sử dụng Plugin Autoptimize để tăng tốc độ trang web của bạn

Duy trì tốc độ tải trang nhanh đã từ lâu là điều thiết yếu cho bất cứ lập trình viên hay người sử dụng mạng nào. Tuy nhiên, sẽ có những lúc các bạn không thể tránh khỏi tình trạng trang web vận hành chậm chạp. Đừng để việc đó làm bạn nản lòng, hôm nay mình sẽ chỉ cho bạn cách sử dụng Plugin Autoptimize để tối đa hóa tốc độ truy cập trang web của bạn. Rất đơn giản, rất nhanh chóng, lại còn tiện lợi nữa!

Tại sao website của bạn bị chậm?

Thời gian tải trang web của bạn có thể bị lâu vì nhiều lý do, đây là một số trong số chúng:

  • Trang web của bạn có quá nhiều cơ sở dữ liệu như các mục phương tiện, Plugin hoặc các theme và chúng quá nặng.
  • Server của bạn quá kém, mất nhiều thời gian để chờ đợi.
  • Trang web của bạn có rất nhiều lưu lượng truy cập, gây ra tắc nghẽn.
  • Code của bạn quá cồng kềnh và có nhiều ký tự không cần thiết.

Ngoài ra, còn có nhiều lý do khác khiến tốc độ trang web của bạn quá chậm. Để có hiệu suất tốt hơn, bạn cần tìm giải pháp. Hôm nay, mình muốn giới thiệu với bạn cách sử dụng Plugin để khắc phục tình trạng này. Thật vậy, có rất nhiều loại Plugin giúp tối ưu hóa tốc độ trang web của bạn và không thể không kể đến Autoptimize!

Bắt đầu

Đầu tiên, bạn phải cài đặt và kích hoạt Plugin này. Phiên bản miễn phí Autoptimize có sẵn trên WordPress.org. Bạn chỉ cần tìm kiếm nó trong Dashboard và cài đặt, rồi kích hoạt nó bình thường.

Vào WordPress.org tải và cài đặt, kích hoạt plugin Autoptimize

Cấu hình Autoptimize Plugin để tăng tốc độ trang web của bạn

Sau khi Plugin Autoptimize đã sẵn sàng để sử dụng, bạn cần cấu hình lại nó. Ở trong Dashboard, hãy đi đến Plugin và bạn sẽ thấy plugin này được kích hoạt ở đây. Nhấp vào Settings.

Sau khi cài đặt xong, bạn vào Settings trong mục Plugins để cấu hình lại Plugin Autoptimize

Dưới đây là giao diện người dùng mới nhất của bảng Cài đặt Autoptimize:

Hiển thị giao diện mới nhất của bảng Cài đặt Autoptimize

Như bạn thấy, các thao tác khá là đơn giản. Bạn chỉ cần đánh dấu vào một số lựa chọn ở đây. Tuy nhiên, bạn nên cẩn thận trong việc nên chọn cái nào có, cái nào không.

Cài đặt JS, CSS và HTML

Cài đặt tùy chọn JavaScript

Ở trong các tùy chọn JavaScript, cho phép kích hoạt Optimize JavaScript code. Sau khi bạn đánh dấu vào ô này, các tùy chọn khác trong phần JavaScript Option sẽ hiển thị như thế này.

Kích vào Optimize JavaScript code trong tab JavaScript của phần Setting Autoptimize

Bằng cách kích hoạt Optimize JavaScript code, bạn sẽ cho phép nén file JavaScript để làm cho trang web của bạn tải nhanh hơn. Đó là điều quan trọng nhất cần làm trong phần này.

Nhìn vào Aggregate JS-files, chúng cũng tự động được kích hoạt ngay sau khi bạn kích hoạt Optimize JavaScript code. Mình rất khuyến khích hành động này bởi vì khi bạn thu nhỏ các tài sản JavaScript, chúng sẽ không được gộp lại theo mặc định, do đó bạn sẽ phải chọn Aggregate JS file để chúng được gộp lại và nén.

Ngoài ra, khi bạn kích hoạt Also aggregate inline JS, nó sẽ tăng kích thước cache của bạn dù trang được tải nhanh hơn. Vì vậy, hãy chắc chắn rằng bạn thường xuyên xóa cache vì quá nhiều bộ đệm sẽ không tốt cho trang web của bạn.

Lựa chọn Force JavaScript in <head> cũng không được đề xuất. Chọn phần này có thể khiến trang web của bạn dừng việc hiển thị để sửa lỗi JS, từ đó làm chậm thời gian tải trang của bạn.

Exclude scripts from Autoptimize: nhập các tập lệnh mà bạn không muốn gộp ở đây. Điều này sẽ thường giúp bạn sửa những thứ không hoạt động trong quá trình tối ưu hóa tốc độ.

Add try-catch wrapping: Nếu bất kỳ tệp nào bị hỏng trong quá trình tối ưu hóa, bạn có thể kích hoạt nó để khắc phục sự cố, chọn hay không là ở bạn nhé!

Cài đặt tùy chọn CSS

Tiếp theo, bạn hãy kéo chuột xuống và di chuyển đến CSS Options. Tại đây sẽ có các tùy chọn bạn nên đánh dấu:

Đánh dấu các tùy chọn CSS Options của Autoptimize

Optimize CSS code, Aggregate CSS-files, Also aggregate inline CSSExclude CSS from Autoptimize cũng tương tự như các tùy chọn JS ở trên. Bạn cũng nên chỉ kích hoạt Also aggregate inline CSS khi bạn biết rằng bộ đệm của bạn đang tăng và bạn cần phải xóa nó.

Inline all CSS KHÔNG NÊN được kích hoạt nếu trang web của bạn có NHIỀU lưu lượng truy cập vì nó có thể làm chậm tốc độ. Bạn chỉ nên sử dụng nó để có điểm số cao hơn trong PageSpeed ​​Insights khi số lượng khách truy cập ít. Tuy nhiên, vì bạn không thể kiểm soát lưu lượng truy cập trang web, và cũng là điều hiển nhiên khi mọi chủ sở hữu trang web đều muốn tăng lưu lượng truy cập, nên mình không khuyến nghị phần này nhé!

Inline and Defer CSS: Vì nó có liên quan đến code bạn nên kiểm tra trang FAQs để có thêm thông tin.

Bạn có thể tùy chọn Generate data: URIs for images tùy thuộc vào kích thước hình ảnh của bạn. Nếu kích thước của hình ảnh lớn, plugin Autoptimize sẽ bỏ qua chúng để tránh các vấn đề trong khi hiển thị.

Tùy chọn HTML và Cài đặt tùy chọn CDN

Kick vào Keep HTML comments trong tab HTML Options của Autoptimize

Khi bật Optimize HTML Code, khoảng trắng và một số comments trong file HTML của web sẽ bị xóa. Hành động này sẽ nén dòng mã đến một mức độ nào đó để tăng tốc trang web của bạn. Nếu bạn muốn giữ bình luận, hãy đánh dấu vào Keep HTML comments.

Bạn có thể tùy chọn nhập CDN – Content Delivery Network URL gốc trong tab CDN Base URL. Nếu bạn có đầy đủ CDN được thiết lập thông qua bất kỳ dịch vụ nào, bạn có thể đặt URL họ cung cấp cho bạn tại đây. Nếu bạn sử dụng Cloudflare, bạn không cần làm thao tác này nhé!

Misc Options

Dưới CDN Options là Misc Options ở đây:

Cài đặt tab Misc Options của Autoptimize

Save aggregated script/CSS as static files: Bạn nên check tùy chọn này. Vì một số lý do, bạn chỉ nên bỏ qua việc kiểm tra thao tác này nếu server của bạn có một số lỗi về nén và hết hạn.

Minify excluded CSS and JS files: Nếu bạn loại trừ bất kỳ tệp nào khỏi tùy chọn JS và CSS ở trên, bỏ qua việc kiểm tra thao tác này có nghĩa là bạn không còn thu nhỏ các tệp. Việc này hoàn toàn không bắt buộc bạn nhé, chọn hay không là tùy bạn!

Also optimize for logged-in editors/ administrators: Bạn có thể chọn nó hay không tùy thuộc vào trang web của bạn. Nhưng nếu bạn sử dụng page builder plugin, hãy bỏ chọn phần này để tránh một số chức năng của Plugin bị ngừng hoạt động.

Sau khi bạn thực hiện thao tác cài đặt JS, CSS và HTML, hãy nhấp vào Save Changes hoặc Save Changes and Empty Cache. Mình khuyên bạn click vào Save Changes and Empty Cache để có thể xóa bộ nhớ cache cùng một lúc.

Tối ưu hóa hình ảnh

Nếu bạn muốn tối ưu hóa hình ảnh của mình để có tốc độ tốt hơn, hãy chuyển đến tab Image.

Tối ưu hóa hình ảnh ở tab Image của Autoptimize

Optimize Images: Hình ảnh của bạn sẽ được nén bởi Shortpixel để làm cho trang web của bạn nhẹ hơn.

Image Optimization Quality: Chọn một trong ba loại nén (Lossy, Glossy hoặc Lossless). Dưới đây là cách giải thích cho từng loại để bạn có thể chọn một loại nén phù hợp nhất với trang web của bạn.

Giải thích các loại nén trong tab Image Optimization Quality của Autoptimize

Load WebP in supported browsersLazy-load images cũng không bắt buộc, chọn hay không tùy vào bạn nhé. Lazy-load images có thể làm cho thời gian tải của bạn nhanh hơn, nhưng việc hiển thị hình ảnh này có thể gây khó chịu cho khách truy cập trang web của bạn.

Cuối cùng, nhấp chuột vào Save Changes.

Các tùy chọn thêm

Nếu bạn muốn có thêm tùy chọn chi tiết khác, hãy chuyển đến Extra tab và chọn một trong số những lựa chọn ở đây theo sở thích của bạn. Chú thích cho từng phần khá dễ hiểu, vì vậy bạn chỉ cần đọc nó thật cẩn thận thôi nhé. Một số phần được đánh dấu đặc biệt cho người dùng nâng cao vì vậy nếu bạn là người mới bắt đầu, bạn có thể bỏ qua chúng.

Tùy chọn thêm các chi tiết khác của Autoptimize theo sở thích của bạn

Đừng quên bấm Save Change sau đó nhé!

Vậy là xong rồi đó! Sau khi mình hoàn thành việc tối ưu hóa, tốc độ tải trang web của mình bây giờ đã nhanh hơn nhiều so với trước đây rồi này!

Việc tối ưu hóa tốc độ tải trang được hoàn thành sau khi dùng Autoptimize

Optimize more

Plugin hữu ích khác được Autoptimize đề xuất cho việc tối ưu hóa trang web

Nếu bạn muốn tối ưu hóa trang web của mình hơn, bạn có thể kiểm tra danh sách một số Plugin hữu ích mà tác giả đã nêu nhé!

Critical CSS

Render-blocking CSS sẽ làm giảm tốc độ tải trang. Để khắc phục điều này, mình cũng khuyên bạn nên kích hoạt Autoptimize Critical CSS Power-Up để giải quyết vấn đề này. Nhấn vào nút Click here to install the Power-up để cài đặt nó. Đây là một kỹ thuật đặc biệt để hiển thị các CSS cơ bản trước và tải CSS không quan trọng khác sau đó, đồng nghĩa với việc trang web của bạn đang tải nhanh hơn.

Kích hoạt Autoptimize Critical CSS Power-Up của Autoptimize để tăng tốc độ tải trang

Lời kết

Có nhiều phương pháp để tăng tốc trang web của bạn, bao gồm cả việc sử dụng và không sử dụng Plugin. Trong thị trường, Autoptimize, WP Rocket, Jetpack,… là những sản phẩm phổ biến nhất. Chúng mình đã có đăng tải những bài hướng dẫn về việc sử dụng các Plugin này, bạn có thể tham khảo các bài đăng để tìm ra Plugin nào là lựa chọn tốt nhất cho bạn.

Hy vọng bài viết trên sẽ hỗ trợ việc tối đa hóa tốc độ trình duyệt trang web của bạn. Chúc bạn có một trải nghiệm với trang web thật nhanh & hiệu quả nhé!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *