Categories Tối ưu CSS Tối ưu JavaScript

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

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

Tôi 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 tôi 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 đó 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.

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, CDNSun) 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 tôi 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ì 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

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

  • Keep HTML comments? Nghĩa là giữ HTML comment trong trang. Nếu bạn muốn giữ lại bình luận dạng HTML thì tick vào.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 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
  • 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, 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.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á nhân: 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á 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/phiên bản 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.
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à tác giả của Autoptimize “kiếm cơm” bằng cách đưa ra các sản phẩm tiếp thị liên kết (affiliate) 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 trả phí tạo cache giúp tăng tốc website được nhiều người đánh giá tốt. Các blog cá nhân có thể cảm thấy nó có giá đắt, tôi 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 Cache Enabler. 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 (còn gọi là critical CSS– để tránh CSS chặn hiển thị).
  • Siteground là giải pháp hosting được tối ưu hóa cho WordPress. Tôi đề xuất thêm Closte, Linode, UpCloud, DigitalOcean, Vultr và Knownhost.
  • Astra là giải pháp cho theme được tối ưu hóa hiệu năng. Tôi 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. Tuy nhiên khi xét trên tổng thể GeneratePress chiếm ưu thế hơn so với Astra.
  • 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 2020) 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 tốt và đặc biệt là thiết lập đơn giản hơn nhiều so với các dịch vụ CDN truyền thống. Thực tế tôi đã 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), tuy nhiên nhận xét công bằng thì nếu bạn đủ kỹ năng tối ưu hóa CDN theo kiểu truyền thống sẽ tốt hơn. PS: Dù Cloudflare có PoP ở Việt Nam, thực tế cho thấy người dùng vẫn không tải được tài nguyên từ đây, bạn có thể tham khảo bài này để biết thêm chi tiết.
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í, ví dụ như Cache Enabler. 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. Tôi 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).

Tôi 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ả cho thấy trong tất cả các trường hợp 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ố lượng 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: speed.family/faq-plugin-autoptimize/

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

Comments are closed.

Back to Top