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

hướng dẫn sử dụng plugin Autoptimize

Mình rất hứng thú với vấn đề tăng tốc WordPress, bởi vì tốc độ website lúc nào cũng là chủ đề quan trọng hàng đầu đối với người quản trị.

Hôm nay mình sẽ nói về plugin Autoptimze – một trong các công cụ hỗ trợ tăng tốc miễn phí tốt nhất.

Plugin giúp tôi tăng tốc bằng cách nào?

Autoptimze hỗ trợ cải thiện thời gian tải trang 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 đó thao tác 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.

Sau khi cài đặt và kích hoạt plugin, bạn vào phần thiết lập của nó:

thiết lập Autoptimze

Thiết lập cơ bản

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:

tick chọn tối ưu

Sau đó bạn kéo xuống cuối và nhấn Save Changes / Lưu thay đổi.

Nếu bạn sử dụng dịch vụ CDN (như MaxCDN, KeyCDN) thì ở phần CDN options bạn điền URL gốc CDN vào đó, còn không thì bỏ trống (cá nhân mình không sử dụng nên phần này sẽ không điền gì):

dịch vụ CDN

Tùy chỉnh nâng cao

Với tùy chọn cơ bản là bạn đã giúp tăng tốc website rồi, bạn nào muốn tối ưu hóa sâu hơn thì mình sẽ tiến hành thực hiện các tùy chỉnh nâng cao.

Để vào phần tùy chỉnh nâng cao bạn click vào nút như hình bên dưới:

tùy chỉnh nâng cao plugin Autoptimze

Giao diện nâng cao của nó như sau:

giao diện nâng cao Autoptimze

Mình sẽ đi vào chi tiết từng lựa chọn.

  • Keep HTML comments? Nghĩa là giữ HTML comment trong trang. Bạn nên tick chọn để giữ lại các bình luận của trang.giữ lại HTML comment trong trang
  • 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 mình: 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 mình: có hoặc không, tùy từng trang.
  • 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 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 đó (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
  • Add try-catch wrapping?: Nếu bạn gặp lỗi với JS thì nên tick chọn cái này.tùy chọn nâng cao cho 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.
  • 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, CSS sẽ được trì hoãn tải (ưu tiên HTML 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. Để có được nội dung 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 mình: Còn tùy, một số trang sẽ ổn, trong khi một số trang khác thì không.
  • 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 số lượt xem trang trên người dùng không quá lớn. 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 mình: 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.csstùy chọn nâng cao CSS
  • Cache info: phần này cho biết các thông tin liên quan đến cache, bao gồm thư mục, trạng thái cho phép ghi đè của Autoptimize và dung lượng file cache đang có.thông tin cache
  • Misc Options: Đây là các tùy chọn nâng cao bổ sung. Save aggregated script/css as static files? liên quan đến việc lưu cache tĩnh các file JS và CSS. Còn Also optimize for logged in users? liên quan đến việc Autoptimize sẽ được bật cho cả người dùng đăng nhập. Lựa chọn của cá nhân mình: có tick chọn.tùy chọn khác

Tùy chỉnh Extra / gia tăng tối ưu hóa

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ủa cá nhân mình: 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ủa cá nhân mình: 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ủa cá nhân mình: 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. Tùy chọn này mình vẫn chưa hiểu cụ thể. Lúc nào rõ nghĩa mình sẽ bổ sung sau.
  • 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.

tùy chỉnh gia tăng

Tối ưu hóa hơn nữa / không có giới hạn cuối cùng

Đây là khu vực mà Autoptimize kiếm cơm bằng cách đưa ra các sản phẩm tiếp thị liên kết giúp tối ưu hóa website hơn nữa, chúng bao gồm:

  • Autoptimize Pro Support: Gói hỗ trợ cao cấp của Autoptimize nhằm tăng tốc website. Có giá khởi điểm là 99 euro.
  • WP Rocket là plugin tạo trang tĩnh giúp tăng tốc website. Đây là plugin có giá khá đắt. Mình khuyên các bạn nếu muốn tiết kiệm chi phí nên thay thế bằng plugin WP Super Cache hoặc WP Fastest Cache. Kết hợp nó với Autoptimize thì rất hợp.
  • ShortPixelplugin giúp nén ảnh. (Bạn có thể xem hướng dẫn sử dụng ShortPixel ở đây).
  • Criticalcss.com là giải pháp cao cấp giúp trích xuất CSS cho màn hình đầu tiên.
  • Siteground là giải pháp hosting được tối ưu hóa cho WordPress. Mình đề xuất thêm Dreamhost và Knownhost.
  • Astra là giải pháp cho theme được tối ưu hóa hiệu năng. Mình rất thích theme tăng tốc này, phiên bản miễn phí của nó cũng có rất nhiều người ưa dùng.
  • Cuối cùng là KeyCDN là giải pháp sử dụng CDN để cải thiện tốc độ tải trang thông qua máy chủ phân tán toàn cầu. Tuy nhiên thì KeyCDN hiện (năm 2019) không có máy chủ tại Việt Nam, nên chúng ta có thể thay thế nó bằng CDNSun, giá tương đương, và có 2 PoP ở Hà Nội và Sài Gòn (xem hướng dẫn sử dụng CDNSun ở đây). Bên cạnh đó, các bạn có thể sử dụng CloudFlare nếu muốn tăng tốc web với host đặt ngoài Việt Nam, đây là giải pháp có giá chấp nhận được với chất lượng khá tốt và đặc biệt là thiết lập đơn giản hơn khá nhiều so với các dịch vụ CDN truyền thống. Thực tế mình đã dùng CloudFlare phiên bản trả phí (gói 20USD/tháng) và thấy khá hài lòng (Xem hướng dẫn sử dụng CloudFlare ở đây).

lại tiếp tục tối ưu hơn nữa

Kết luận

Autoptimze là công cụ rất tốt giúp bạn cải thiện tốc độ tải trang. Tùy chọn của nó là rất chuyên sâu. Và nếu bạn khéo léo trong việc tùy chỉnh sẽ đem lại kết quả cực kỳ ấn tượng.

Autoptimize cũng là công cụ bổ khuyết rất phù hợp cho các plugin tạo cache miễn phí. Bạn sẽ không phải mất thêm tiền để sử dụng các plugin tạo trang tĩnh có phí.

Giờ là phần kiểm tra cuối cùng. Autoptimze sẽ tạo ra kết quả tải trang nhanh đến mức nào. Mình sẽ sử dụng test A/B, một bên là không sử dùng Autoptimize, một bên là có sử dụng trong điều kiện tương đương (cùng host, cùng giao diện, cùng nội dung, vân vân, tức là môi trường giống y nhau).

Mình sẽ sử dụng công cụ GTmetrix để kiếm tra tốc độ website. Trong video bên dưới, khung bên trái là web không cài Autoptimize. Khung bên phải là có cài Autoptimize. Kiểm tra tốc độ được thực hiện 5 lần liên tiếp, kết quả tất cả đều cho thấy website có cài Autoptimize chiến thắng cả ở 3 yếu tố: tốc độ tải trang, dung lượng trang và số kết nối. Các chỉ số này thấp hơn thì tốt hơn:

Nếu bạn có thắc mắc sâu hơn nữa về plugin Autoptimize hãy đọc bài viết này: https://chimcat.net/faq-plugin-autoptimize/

Xin chào & hẹn gặp lại.

6 thoughts on “Hướng dẫn sử dụng plugin Autoptimize”

    1. Nguyễn Đức Anh

      Hoan hỉ. WordPress có rất nhiều thông tin hỗ trợ cho người mới, chúc bạn sớm sử dụng thành thạo WordPress.

  1. Cho mình hỏi mình đang cài wp super cache thì cài thêm thằng này được không? Hay chỉ cài 1 trong 2 thôi b

Leave a Comment

Your email address will not be published. Required fields are marked *