Mô tả: Plugin Autoptimize giúp tối ưu hóa trang của bạn thật dễ dàng. Nó có thể gộp, nén (minify) và tạo cache cho các đoạn mã thực thi scripts (JS) và mã định dạng (CSS). Nó cũng có thể đưa các đoạn CSS vào phần đầu của trang theo mặc định (nhưng cũng có thể trì hoãn nó), di chuyển và trì hoãn các đoạn mã scripts (JS) xuống chân trang và giảm thiểu các đoạn mã HTML.
PS: nếu bạn muốn biết cách cài đặt Plugin Autoptimize hãy tham khảo bài viết sau: https://kiencang.net/plugin-autoptimize/
Tùy chọn “Extra/gia tăng” cho phép bạn tải không đồng bộ (async) các đoạn mã JavaScript không được gộp (non-aggregated), loại bỏ các biểu tượng emoji không cần thiết thuộc phần lõi của WordPress, tối ưu hóa Google Fonts và nhiều thứ khác nữa. Thông qua những cách đó nó có thể cải thiện hiệu suất trang web của bạn thậm chí cả khi bạn đã có HTTP/2! Chúng tôi có API mở rộng cho phép bạn điều chỉnh Autoptimize cho các trang theo nhu cầu riêng biệt.
Nếu bạn thực sự quan tâm đến vấn đề về hiệu suất, bạn cần phải sử dụng thêm một trong các plugin tạo cache sau. Chúng là những plugin bổ khuyết rất tốt cho Autoptimize, ví dụ như: WP Super Cache, HyperCache, Comet Cache hoặc KeyCDN’s Cache Enabler.
Plugin tăng tốc website của tôi bằng cách nào?
Autoptimize nối các đoạn mã script lại với nhau, các mã định dạng cũng vậy. Nó giảm thiểu dữ liệu và nén chúng lại, bổ sung header hết hạn (http caching), cache (tạo bộ nhớ đệm) cho chúng, và di chuyển styles lên đầu trang, còn các mã scripts (tùy chọn) xuống cuối trang. Nó cũng giúp giảm thiểu mã HTML, làm cho dung lượng toàn trang nhẹ đi.
Nhưng chúng ta đang dùng HTTP/2 rồi, vì thế không cần Autoptimize nữa
HTTP/2 chắc chắn là bước tiến lớn, giảm đáng kể ảnh hưởng của nhiều yêu cầu kết nối từ cùng máy chủ bằng cách sử dụng cùng kết nối để thực thi một số yêu cầu kết nối đồng thời. Như được nói trong bài viết nối CSS/JS có thể vẫn tạo ra được nhiều ý nghĩa, hay trong bài viết này của css-tricks.com và bài này từ kỹ sư của Ebay. Kết luận là bạn cần chỉnh sửa, kiểm tra, chỉnh sửa lại, kiểm tra lại, điều chỉnh nữa và xem điều gì hiệu quả nhất trong tình huống của bạn. Đó có thể là chỉ cần HTTP/2 thôi, hoặc HTTP/2 + nối và tối thiểu hóa, cũng có thể HTTP/2 + tối thiểu hóa (điều mà Autoptimize cũng làm tốt).
Nó sẽ có hiệu quả với blog của tôi chứ?
Mặc dù Autoptimize không tuyên bố bất kỳ sự đảm bảo 100% nào cho bạn, nói chung nó sẽ làm việc hoàn hảo nếu bạn tùy chỉnh nó một cách chính xác. Xem phần “Xử lý sự cố” bên dưới để biết cách chỉnh sửa trong trường hợp xảy ra vấn đề.
Tại sao jquery.js không được tối ưu
Bắt đầu từ phiên bản AO 2.1 file jquery.js lõi của WordPress không được tối ưu vì một lý do đơn giản là có nhiều plugin phổ biến chèn nội tuyến JS không được gộp – và đây lại là những cái dựa vào sự có mặt của jquery, vì thế không bao gồm jQuery đảm bảo hầu hết các tính năng quan trọng của trang sẽ hoạt động ổn thỏa. Nếu bạn vẫn muốn tối ưu hóa jQuery, bạn có thể loại bỏ nó khỏi danh sách loại trừ (bạn cũng có thể bật tính năng “also aggregate inline JS/đồng thời gộp cả JS nội tuyến” và/hoặc chuyển qua “force JS in head/ép JS lên đầu”).
Tại sao file JS được tối ưu hóa lại chặn hiển thị?
Nếu file JS được tối ưu hóa không bị “ép lên đầu trang/forced in head” thì nó sẽ không chặn hiển thị (render blocking), và nó sẽ được gắn thêm cờ “hoãn tải” vào. Dù vậy có thể có plugin khác loại bỏ cờ “hoãn tải” này. Plugin Speed Booster Pack đã được báo cáo là gây ra ảnh hưởng này, nhưng hành vi đó hiện vẫn chưa được xác nhận.
Tại sao CSS được tối ưu hóa vẫn bị gọi là chặn hiển thị?
Với thiết lập mặc định của Autoptimize thì CSS được liên kết trên đầu, nó là mặc định an toàn nhưng Google PageSpeed Insights có thể vẫn phàn nàn. Bạn có thể xem kỹ hơn phần “nội tuyến tất cả CSS” (cách dễ) hoặc “nội tuyến và trì hoãn CSS / sử dụng critical CSS” (tốt hơn) trong bài viết này.
Tác dụng của “nội tuyến và trì hoãn CSS” là gì?
CSS nói chung phải được đưa vào phần đầu (head) của tài liệu. Gần đây Google bắt đầu quảng bá trì hoãn các đoạn mã CSS không quan trọng, trong khi nội tuyến các mã định dạng cần thiết để xây dựng được phần trên của trang web (above the fold / cái sẽ hiển thị đầu tiên khi người dùng truy cập vào website). Điều này là đặc biệt quan trọng trong chuyện hiển thị trang nhanh nhất có thể trên thiết bị di động. Kể từ phiên bản Autoptimize 1.9.0 điều này được điều chỉnh dễ dàng; lựa chọn “inline and defer CSS”, đưa đoạn mã “above the fold CSS/CSS cho phần trên của trang” vào khu vực nhập liệu (ô trống) và OK, thế là bạn xong rồi!
Nhưng làm thế nào tôi biết được “CSS cho phần trên của trang” là gì?
Không có giải pháp dễ dàng cho vấn đề liên quan đến “above the fold/phần trên của trang” khi nó phụ thuộc vào đường biên nằm ở chỗ nào, cái hóa ra lại tùy thuộc vào kích cỡ màn hình (screensize). Dù rằng có một số công cụ hỗ trợ xác định “phần trên của trang là gì”. Ở đây liệt kê ra các công cụ như vậy. Các công cụ như Sitelocity critical CSS generator và Jonas Ohlsson’s criticalpathcssgenerator là những giải pháp cơ bản khá tốt, và https://criticalcss.com/ là giải pháp cao cấp cũng của Jonas Ohlsson (về sau được tích hợp sẵn vào Autoptimize với giá khá chát, cỡ đâu 7 euro/tháng).
Tôi có nên đặt nội tuyến toàn bộ CSS hay không?
Câu trả lời ngắn gọn: có thể là không.
Trước đây tối ưu hóa CSS khá dễ dàng; chỉ việc cho tất cả CSS vào phần đầu của trang, gộp tất cả vào trong một file CSS cho mỗi media-type và thế là bạn đã đi đúng đường. Nhưng kể từ khi Google đưa cả phiên bản di động vào trong PageSpeed Insight và bắt đầu phàn nàn về CSS chặn hiển thị, mọi thứ trở nên hỗn loạn (xem thêm phần “trì hoãn CSS” ở phần khác trong FAQ này). Một trong các giải pháp là nội tuyến tất cả CSS của bạn, hiện Autoptimize 1.8.0 có hỗ trợ.
Nội tuyến tất cả CSS có một lợi thế rõ ràng (điểm số PageSpeed cao hơn) và một bất lợi lớn; trang HTML của bạn sẽ có kích cỡ lớn hơn đáng kể nếu CSS của bạn lớn, và Pagespeed Insights sẽ phàn nàn về “roundtrip times / thời gian vòng lặp khứ hồi”. Ngoài ra khi bạn xem xét bài kiểm tra bao gồm nhiều requests (giả sử là 5 trang), hiệu suất sẽ tệ hại, CSS sẽ phải tải đi tải lại trong khi bình thường file CSS riêng biệt sẽ không cần tải thêm nữa vì nó đã được lưu trong bộ nhớ cache trình duyệt nhờ lần tải đầu tiên.
Vì thế lựa chọn cần dựa trên câu trả lời của bạn cho trang web cụ thể, có bao nhiêu CSS mà bạn có? Có bao nhiêu trang mà một người ghé thăm trang sẽ yêu cầu? Nếu bạn có nhiều CSS hoặc có nhiều lượt xem trang trên lượt ghé thăm, thì có thể không phải là ý tưởng tốt nếu bạn nội tuyến toàn bộ CSS.
Bạn có thể tìm hiểu thêm thông tin về chủ đề đó ở bài viết này.
Bộ nhớ cache của tôi ngày càng nặng, Autoptimize không xóa bộ nhớ cache sao?
Autoptimize không có cơ chế xóa bộ nhớ cache thích hợp của riêng nó, cũng như việc loại bỏ các file CSS/JS đã được tối ưu mà vẫn đang liên kết với các file cache khác có thể làm hỏng giao diện, chức năng của trang. Hơn nữa, bộ nhớ cache tăng trưởng nhanh là dấu chỉ cho các vấn đề khác mà bạn cần phải tránh.
Bạn có thể giữ kích cỡ file cache ở ngưỡng chấp nhận được bằng một trong hai cách:
- Không kích hoạt tính năng “gộp JS nội tuyến/aggregate inline JS” hoặc tùy chọn “gộp CSS nội tuyến/aggregate inline CSS”
- Không bao gồm các biến JS (hoặc một số selector CSS) thay đổi trên mỗi trang (hoặc mỗi lần tải trang). Bạn có thể biết cách làm điều đó trong bài viết này.
Mặc dù có những phản đối ở trên, vẫn có giải pháp của bên thứ 3 tự động xóa cache của AO, thí dụ như sử dụng đoạn code này hoặc plugin này, tuy nhiên vì những lý do kể trên chúng sẽ chỉ nên dùng nếu bạn biết rõ mình đang làm điều gì.
“Xóa cache” dường như không hoạt động?
Khi click vào liên kết “Delete Cache” bên dưới thanh xổ xuống của Autoptimize trong thanh công cụ của admin, bạn có thể nhận được thông báo “Your cache might not have been purged successfully/Cache của bạn có thể không được xóa thành công”. Trong trường hợp này bạn hãy vào trang thiết lập của Autoptimizes và click vào nút “Save changes & clear cache / Lưu cài đặt & xóa cache”.
Ngoài ra đừng lo lắng nếu cache của bạn không bao giờ xuống đến 0 files/0KB, vì Autoptimize (từ phiên bản 2.2) sẽ tự động tạo cache ngay lập tức sau khi nó được xóa để cải thiện thêm nữa tốc độ nén.
Tôi vẫn dùng tính năng Rocket Loader của Cloudflare được chứ?
Cloudflare Rocket Loader là tính năng khá cao cấp nhưng là cách can thiệp xâm lấn có mục đích làm cho JavaScript không-chặn-hiển-thị, Cloudflare vẫn tiếp tục đánh giá phiên bản Beta. Đôi khi Autoptimize & Rocket Loader làm việc cùng nhau, đôi khi chúng không được như vậy. Các tiếp cận tốt nhất là tắt Rocket Loader, cấu hình lại Autoptimize và sau đó bật lại Rocket Loader (nếu bạn nghĩ nó có ích) và kiểm tra xem mọi thứ vẫn hoạt động bình thường hay không?
Vào tháng 6 năm 2017, có vẻ như RocketLoader phá vỡ tính năng “inline & defer CSS” của AO, cái dựa trên Filamentgroup’s loadCSS, hệ quả là trì hoãn tải CSS không được tải.
Tôi đã thử Autoptimize nhưng điểm số Google Pagespeed Scored của tôi hầu như không được cải thiện
Autoptimize không đơn giản là plugin “chỉnh sửa điểm số Pagespeed” (xem thêm bài viết: Tại sao điểm số Google PageSpeed lại không quan trọng); nó “chỉ” gộp và nén các file JS & CSS và đưa ra một số tính năng mở rộng thú vị như loại bỏ font Google và trì hoãn tải CSS. Autoptimize sẽ giúp bạn cải thiện hiệu suất (thời gian tải trang tính theo giây) và cũng có thể giải quyết một số cảnh báo Pagespeed cụ thể.
Nếu bạn muốn cải thiện hơn nữa, bạn có thể tìm kiếm thêm các plugin cache trang, plugin tối ưu hóa hình ảnh và tinh chỉnh webserver, chúng sẽ cải thiện hiệu suất thực (một lần nữa, hiệu suất được đo bằng thời gian tải trang, ví dụ bằng công cụ https://webpagetest.org) và đánh giá của pagespeed về “các thực hành tốt nhất về hiệu suất/performance best practise”.
Tôi đang sử dụng Cloudflare, tôi phải điền vào phần CDN root directory (thư mục gốc cho CDN) như thế nào
Bạn không phải làm gì cả, khi ấy Cloudflare sẽ đưa file CSS/JS đã được tối ưu bằng autoptimize lên CDN của Cloudflare một cách tự động.
Tính năng “exclude from optimizing/loại bỏ tối ưu hóa” hoạt động như thế nào?
Bạn có thể chủ động không tối ưu hóa file CSS và JS cụ thể nào đấy (không gộp và nén nó) bằng cách thêm nó vào danh sách loại trừ, ngăn cách các file này bằng dấu phẩy. Cách xác định chính xác chuỗi cần sử dụng có thể được xác định như sau:
- Nếu bạn muốn loại trừ một file cụ thể, ví dụ wp-content/plugins/funkyplugin/css/style.css, bạn có thể thêm thông tin loại trừ đơn giản như sau “funkyplugin/css/style.css”
- Nếu bạn muốn loại trừ tất cả các file của một plugin cụ thể, ví dụ wp-content/plugins/funkyplugin/js/*, bạn có thể loại trừ nó như sau “funkyplugin/js/” hoặc “plugins/funkyplugin”.
- Nếu bạn muốn loại trừ mã nội tuyến, bạn sẽ phải tìm đường dẫn cụ thể của nó, chuỗi duy nhất trong khối code và thêm nó vào danh sách loại trừ. Ví dụ: để loại trừ đoạn mã này
<script>funky_data='Won\'t you take me to, Funky Town'</script>bạn cần thêm cụm từ sau vào danh sách loại trừ “funky_data”.
Thiết lập cấu hình & Xử lý sự cố xảy ra với Autoptimize
Sau khi cài đặt và kích hoạt plugin, bạn cần vào khu vực trang admin để bật các tính năng tối ưu HTML, CSS và JavaScript. Tùy theo ý thích của bạn, bạn có thể muốn bật tất cả tính năng trên, hoặc nếu bạn cẩn thận thì bật từng cái một để kiểm tra.
Nếu blog của bạn không hoạt động bình thường sau khi bật Autoptimize, dưới đây là một số chỉ dẫn nhằm phát hiện & giải quyết các vấn đề khi sử dụng “các cài đặt nâng cao/advanced settings“:
- Nếu tất cả vẫn hoạt động ổn nhưng bạn nhận thấy blog chậm hơn, hãy cài plugin tạo cache cho trang (như Cache Enabler hoặc những cái tương tự) và kiểm tra thông tin kích cỡ cache (giải pháp cho vấn đề này cũng ảnh hưởng đến hiệu năng của các trang không tạo cache).
- Trong trường hợp blog của bạn trông xấu đi, ví dụ như bố cục lộn xộn, thì có khả năng đã xảy ra vấn đề với tối ưu hóa CSS. Khi ấy bạn cần bật tùy chọn “Look for styles on just head?” và xem vấn đề có được giải quyết không. Bạn cũng có thể ép CSS không được gộp bằng cách bao nó trong thẻ noptimize trong theme hoặc widget của bạn hoặc bằng cách thêm tên file (cho stylesheets bên ngoài trang) hoặc chuỗi (cho styles nội tuyến) vào danh sách loại trừ (exclude-list).
- Trong trường hợp một số chức năng trên trang web không làm việc (ví dụ như hiệu ứng slide, menu, ô nhập liệu,…) bạn có thể đã gặp vấn đề với việc tối ưu hóa JavaScript. Thay đổi thiết lập “Aggregate inline JS/Gộp JS nội tuyến” hoặc “Force JavaScript in head?/Ép JavaScript lên đầu?” và thử lại lần nữa. Loại trừ “js/jquery/jquery.js” không cho tối ưu hóa nữa (xem bên dưới) và kích hoạt tùy chọn “Add try/catch wrapping” có thể có ích. Ngoài ra, bạn có thể loại trừ các script cụ thể khỏi việc xử lý (di chuyển và / hoặc tổng hợp) bằng Autoptimize bằng cách thêm một chuỗi sẽ khớp với JavaScript vi phạm hoặc loại trừ nó khỏi template hoặc widget của bạn bằng cách bao đoạn mã giữa thẻ noptimize. Việc xác định JavaScript vi phạm và chọn chuỗi loại trừ chính xác có thể cần phải qua bước thử sai, nhưng trong phần lớn trường hợp, các vấn đề tối ưu hóa JavaScript có thể được giải quyết theo cách này. Khi bạn gỡ lỗi JavaScript, bảng kiểm soát lỗi của trình duyệt là công cụ quan trọng nhất để giúp bạn hiểu điều gì đang xảy ra.
- Nếu theme hoặc plugin của bạn yêu cầu jQuery, bạn có thể thử cố ép tất cả lên đầu và/ hoặc loại trừ tối ưu jquery.js (và jQuery của plugin nếu cần thiết).
- Nếu bạn không thể tối ưu hóa cả CSS và JS, bạn có thể tắt chúng và sử dụng hai kỹ thuật tối ưu hóa khác.
- Nếu bạn đã cố thử các mẹo khắc phục sự cố ở trên mà bạn vẫn không thể sử dụng CSS và JS được, bạn có thể hỏi hỗ trợ trên diễn đàn của Autoptimize WordPress.
Trời đất, trang web của tôi biến thành trang trắng hoặc bị thông báo lỗi internal server error sau khi bật Autoptimize!
Điều đầu tiên cần đảm bảo là bạn đang không bật các plugin tối ưu hóa HTML, CSS hoặc JS khác (BWP minify, WP minify,…) song song với Autoptimize hoặc bạn đã tắt chức năng tương tự này trên plugin tạo cache (W3 Total Cache, WP Fastest Cache, Cache Enabler…)
Trong một số trường hợp hiếm bộ phận nén CSS hiện đang được dùng bởi Autoptimize gặp phải sự cố do thiếu tài nguyên (xem chi tiết kỹ thuật được giải thích ở đây). Khi ấy bạn có thể vô hiệu hóa tính năng tối ưu CSS, cố loại bỏ các file CSS khỏi việc gộp file hoặc bật các tính năng nén khác không có vấn đề này. Điều cuối cùng bạn có thể làm là thêm đoạn mã sau vào file wp-config.php:
define("AUTOPTIMIZE_LEGACY_MINIFIERS","true");Bạn an tâm là “legacy minifiers” sẽ vẫn nằm trong Autoptimize “mãi mãi” và việc thay đổi wp-config.php sẽ không làm ảnh hưởng đến lõi, theme (giao diện) hoặc việc cập nhật plugin.
Noptimize là gì?
Bắt đầu từ phiên bản 1.6.6 Autoptimize loại trừ tất cả các file nằm bên trong thẻ noptimize, lấy ví dụ:
<!--noptimize--><script>alert('this will not get autoptimized')></script><!--/noptimize-->Bạn có thể thực hiện điều này trong nội dung bài post hoặc page, trong widget và trong file theme (xem xét việc tạo child theme để tránh chỉnh sửa của bạn bị ghi đè khi theme cập nhật).
Tính năng “remove emoji’s/loại bỏ emoji” có tác dụng gì?
Đây là tùy chọn mới trong Autoptimize 2.3 được dùng để loại bỏ CSS nội tuyến, JS nội tuyến và các file JS liên kết được thêm bởi lõi của WordPress. Điều này tạo ra ảnh hưởng tích cực (dù nhỏ) lên hiệu năng của website.
Tôi có nên tối ưu hóa Google Fonts hay không & làm như thế nào?
Google Fonts thường được tải bằng một file CSS liên kết đến dạng “chặn hiển thị”. Nếu bạn có theme và plugin sử dụng Google Fonts, bạn có thể kết thúc với rất nhiều file CSS. Autoptimize (từ phiên bản 2.3) hiện cho bạn giảm bớt ảnh hưởng của Google Fonts bằng cả hai cách là loại bỏ chúng hoàn toàn hoặc tối ưu hóa cách nó được tải.
Có hai cách thức tối ưu; cách thứ nhất là “combine an link/kết hợp và liên kết”, nó sẽ thay thế toàn bộ yêu cầu từ Google Font thành một yêu cầu (request), nó sẽ vẫn ở dạng chặn-hiển-thị nhưng sẽ cho phép font tải ngay lập tức (điều đó nghĩa là bạn không thấy font thay đổi trong khi trang được tải/FOUT).
Giải pháp thay thế tiếp theo là “combine and load async/kết hợp và tải không đồng bộ”, lựa chọn này sử dụng JavaScript để tải font dưới dạng không-chặn-hiển-thị nhưng có thể gây ra tình trạng font chữ thay đổi trong khi tải trang (nhưng bạn yên tâm, khi trang tải xong nó sẽ giữ font chữ chính xác, ổn định).
Tôi không muốn dùng Autoptimize nữa, cách gỡ bỏ nó như thế nào?
- Vô hiệu hóa plugin (điều này sẽ loại bỏ các tùy chọn và tạo cache)
- Loại bỏ plugin
- Loại bỏ bất cứ cache nào có thể vẫn còn liên kết với CSS/JS mà Autoptimize tạo (ví dụ một trang tĩnh được tạo bởi plugin như WP Super Cache)