Hãy nhìn lại cuộc sống của bạn.

Hướng dẫn sử dụng plugin Autoptimize để tăng tốc WordPress chi tiết nhất

0 865,695

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 khách truy cập của bạn nản lòng.

Trong bài viết Hướng dẫn tăng tốc WordPress mới nhất trong 10 bước đơn giản thì CoomDream đã có nói tới bước tối ưu HTML, nén và tối ưu các CSS và JS trang web.

Hôm nay, CoomDream sẽ chỉ cho bạn cách sử dụng plugin Autoptimize để tăng tốc độ truy cập trang web WordPress của bạn. Rất đơn giản, nhanh chóng mà lại vô cùng hiệu quả.

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. Hay nói cách khác là code không được tối ưu.

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. WordPress 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!

Nói đến khả năng nén và làm giảm thiểu html, css, js trong WordPress nếu Autoptimize đứng thứ 2 thì không plugin nào dám đứng thứ 1. Autoptimize còn giúp bạn giải quyết luôn vấn đề chặn kết xuất (Render-blocking).

Bắt đầu sử dụng Autoptimize nào

Đầ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.

Hướng dẫn cài đặt Autoptimize trong Plugin

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.

Cài đặt và kích hoạt 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:

Giao diện bảng Cài đặt Autoptimize mới nhất

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. Bạn không nên tham lam tích hết vì điều đó sẽ khiến trang web của bạn bị lỗi, xô lệch bố cục. Chính vì thế bạn mới cần làm theo hướng dẫn sử dụng plugin Autoptimize này của CoomDream.

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.

Hướng dẫn cài đặt tối ưu Javascript trong 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. 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:

Hướng dẫn cài đặt tối ưu CSS trong Autoptimize

Optimize CSS codeAggregate CSS-filesAlso aggregate inline CSS và Exclude 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 CoomDream 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

Hướng dẫn cài đặt HTML và CDN cho 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:

Hướng dẫn cài đặt Misc Option trong 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. CoomDream 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 trong 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. Tuy nhiên CoomDream khuyên bạn không nên tích lựa chọn này. Vì nó không thực sự hiệu quả mà còn làm nặng thêm trang web của bạn. Vì phải cố tải ảnh từ bên ngoài (Shortpixel) về để hiển thị trên web của bạn. Thay vào đó bạn hãy sử dụng trình tối ưu của LiteSpeed Cache sẽ hoàn hảo hơn nhiều.

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.

Tối ưu ảnh bằng Shortpixel trước khi tải lên web

Load WebP in supported browsers và Lazy-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.

Cài đặt tối ưu font chữ cho Autoptimize

Phần Google fonts nếu bạn không muốn dùng font chữ của Google thì tích chọn Remove Google fonts. Nếu không hãy để nguyên hoặc tích chọn dòng thứ 3 cũng được nhiều người khuyên dùng.

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

Optimize more

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, CoomDream 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.

Lời kết cho Autoptimize

Autoptimize là plugin tốt nhất cho việc tối ưu code trong web WordPress. Nó giúp bạn nén và tối ưu HTML, CSS, JS và các file hình ảnh cũng như fonts chữ.

Autoptimize cũng giúp bạn cải thiện tình trạng chặn kết xuất (render-blocking) của các mã CSS và JS.

Đây là lựa chọn hàng đầu cho việc tối ưu trang web WordPress giúp tăng tốc độ tải trang cho web của bạn.

Hy vọng bài viết này sẽ giúp bạn tối ưu hóa tốc độ 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 và hiệu quả!

Cuối cùng đừng quên cho CoomDream xin 1 Share nhé.

Để lại bình luận

Địa chỉ email của bạn sẽ không được công bố.