Autoptimize thông tin và hướng dẫn cài đặt

  • Sunday 10/10/2021

Autoptimize có tác dụng gì ?

Autoptimize là plugin hỗ trợ cải thiện thời gian tảo trang của wp thông qua 3 yếu tố chính sau:

  • Nén, gộp, và tối ưu file CSS
  • Nén, gộp, và tối ưu file JavaScript
  • Nén HTML

Thao tác nén giúp giảm dung lượng file, trong khi thao tác gộp giúp giảm thiểu số lượng request về máy chủ. Cả hai yếu tố này đều hỗ trợ tăng tốc độ website. Trong khi đó hoạt động “tối ưu” chủ yếu nói về thao tác loại bỏ CSS chặn hiển thị, và JS chặn hiển thị để ưu tiên cho nội dung thuộc màn hình đầu tiên.

 

Hướng dẫn sử dụng Autoptimize

Giao diện tùy chỉnh của nó như sau, bạn tick chọn cả 3 tùy chọn tối ưu hóa:

  • Force JavaScript in <head>: Nghĩa là đẩy JS lên khu vực <head>. Nếu bạn tick chọn điều này có khả năng sẽ giúp bạn sửa một số lỗi liên quan đến JS, nhưng nó có thể tạo ra các vấn đề liên quan đến chặn hiển thị (render blocking). Lựa chọn của cá nhân tôi: không tick chọn.
  • Also aggregate inline JS: Nghĩa là gộp JS nội tuyến. Nếu bạn tick chọn điều này giúp trích lọc và gộp các JS nội tuyến lại, và nó có khả năng giúp cải thiện hiệu năng, tuy nhiên nó có thể làm dung lượng cache gia tăng nhanh chóng. Lựa chọn của cá nhân: có hoặc không, tùy từng trang, nhưng thường là không tick chọn.
  • Exclude scripts from Autoptimize: Nghĩa là không tối ưu hóa một số file JS nhất định (không gộp và nén). Mặc định Autoptimize sẽ không tối ưu hóa file jQuery, lý do là bởi nhiều plugin, giao diện sử dụng jQuery và nếu Autoptimize thực hiện tối ưu hóa, nó sẽ làm lỗi chức năng của các plugin, giao diện đó (và sẽ ảnh hưởng đến website). Để thêm file không tối ưu hóa bạn điền tên nó vào khu vực tương ứng và cách nhau bằng dấu phẩy, ví dụ whatever.js, another.js

  • Generate data: URIs for images? Điều này giúp ảnh nền nhỏ được nội tuyến vào file CSS để tránh thêm một lượt request tải ảnh về. Bạn nên tick chọn. (phương pháp sử dụng có lẽ là dùng mã hóa base64 cho ảnh để lấy mã trực tiếp inline vào CSS)
  • Also aggregate inline CSS: Điều này giúp gộp CSS nội tuyến, tương tự như gộp JS nội tuyến, có thể tick chọn hoặc không tùy từng trang, nhưng thường thì tôi không làm, vì sao? Vì trên các theme uy tín, các CSS nội tuyến chủ yếu được dùng để tránh chặn hiển thị ngay từ lúc ban đầu rồi, cho nên không cần gộp vào làm gì cả
  • Inline and Defer CSS: Nghĩa là nội tuyến và trì hoãn tải CSS. Bình thường Autoptimze sẽ tối ưu hóa CSS và đưa nó lên đầu thẻ head, nhưng điều đó sẽ chặn hiển thị trang (cái bạn thường thấy PageSpeed Insight của Google thông báo). Khi bạn tick tùy chọn này, file CSS sẽ được trì hoãn tải (ưu tiên HTML và CSS nội tuyến tải trước). Và để bố cục trang không bị ảnh hưởng quá lớn bạn có thể thêm CSS vào phần Paste the above the fold CSS here — là các CSS quan trọng liên quan đến bố cục của trang cho nội dung thuộc màn hình đầu tiên. Để có được CSS này, bạn vào trang: https://www.sitelocity.com/critical-path-css-generator rồi paste URL bài post vào, nó sẽ trích xuất cho bạn CSS cần thiết. Lựa chọn của cá nhân: Còn tùy, một số trang sẽ ổn, trong khi một số trang khác thì không, nhưng thường thì nên làm.
  • Inline all CSS: Nghĩa là đặt nội tuyến tất cả CSS. Điều này có tác dụng giảm request so với việc đặt CSS ngoại tuyến. Tuy nhiên chỉ có hiệu quả nếu khi file CSS không lớn cũng như số lượt xem trang trên người dùng không nhiều. Nội tuyến tất cả CSS sẽ ngăn cản hoàn toàn bộ nhớ đệm của trình duyệt. Lựa chọn của cá nhân: không tick chọn trong phần lớn trường hợp.
  • Exclude CSS from Autoptimize: Có ý nghĩa tương tự phần loại trừ JS. Nhưng ở đây là loại trừ các file CSS. Có những file CSS nếu bạn tối ưu bằng Autoptimize sẽ phá hỏng tính năng, hoặc bố cục của website thì bạn cần loại trừ nó ở đây. Theo mặc định có 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 trong Autoptimize

Các lựa chọn này tiếp tục giúp bạn cải thiện hơn nữa tốc độ website.

  • Remove emojis: Liên quan đến việc loại bỏ các biểu tượng emojis (mặt cười, mặt mếu) nội tuyến CSS và nội tuyến JS (ngoại trừ các file JS không được tối ưu hóa). Lựa chọn cá nhân: có tick chọn.
  • Remove query strings from static resources: Liên quan đến việc loại bỏ các chuỗi truy vấn (hoặc các tham số ver cụ thể). Nó không giúp tăng tốc độ trang web nhưng có thể giúp cải thiện điểm số hiệu năng. Lựa chọn cá nhân: không tick chọn.
  • Google Fonts: Nếu giao điện của bạn dùng Google Fonts, tùy chọn này giúp bạn loại bỏ Font Google (Remove Google Fonts). Combine and link in head, nghĩa là Google Fonts sẽ được gộp rồi ép đưa lên thẻ head. Combine and load font asynchronously with webfont.js nghĩa là gộp file và tải không đồng bộ với webfont.js. Leave as is nghĩa là giữ nguyên trạng, hay nói cách khác nếu trang web có Google Fonts thì nó sẽ tải xuống. Lựa chọn cá nhân: có tick chọn.
  • Preconnect to 3rd party domains (advanced users): Tùy chọn này liên quan đến việc kết nối trước với tên miền của bên thứ ba. Nó thực hiện tìm kiếm DNS và kết nối bảo mật song song cùng lúc giữa nhiều tài nguyên của bên thứ ba, do đó giảm được độ trễ. Bạn có thể tìm hiểu thêm các cơ chế tương tự là prefetch và preload.
  • Async Javascript-files (advanced users): Tùy chọn này liên quan đến việc tải file JS không đồng bộ. Bạn có file nào cần tải không đồng bộ thì đưa vào đây, bao gồm cả local và bên thứ ba.
  • Optimize YouTube videos: cái này yêu cầu bạn cài thêm plugin. Nó giúp video YouTube trì hoãn tải qua đó làm tăng tốc độ tải trang. Tuy nhiên chỉ thích hợp nếu Video của bạn không ở phần đầu của trang (chỉ nên dùng nếu video ở giữa hoặc cuối). Đọc thêm về biện pháp khác giúp trì hoãn tải video ở đây. Bạn có thể tham khảo cách sử dụng plugin WP YouTube Lyte ở đây.

—————-

P.A Việt Nam cung cấp đa dạng các Plan Hosting WordPress đáp ứng yêu cầu của khách hàng
WordPress Hosting phổ thông
WordPress Hosting chất lượng cao
WordPress VIP

Tham khảo các ưu đã https://www.pavietnam.vn/vn/tin-khuyen-mai/

Xem thêm nhiều kiến thức về dịch vụ  tại đây