Autoptimize là một plugin tối ưu hóa WordPress miễn phí. Ngoài tối ưu hóa HTML, CSS và JavaScript, Autoptimize cũng bao gồm các tính năng tối ưu hóa nhắm mục tiêu đến các khía cạnh khác của các trang web WordPress hiện đại.
Trong bài đăng này, chúng tôi sẽ chia sẻ các cài đặt plugin Tự động tối ưu hóa tốt nhất để cải thiện hiệu suất và tốc độ trang của trang web WordPress của bạn.
Tại sao Tự động tối ưu hóa?
Trước khi đi sâu vào các cài đặt Tự động tối ưu hóa tốt nhất, chúng ta hãy nhanh chóng đi qua ba lý do tại sao Tự động tối ưu hóa là một plugin tối ưu hóa tuyệt vời.
- Phiên bản miễn phí của Autoptimize có một bộ tính năng hoàn chỉnh để tối ưu hóa trang web WordPress của bạn.
- Autoptimize hoàn toàn là một plugin tối ưu hóa và không thực hiện bất kỳ bộ nhớ đệm trang HTML nào. Điều này có nghĩa là nó tương thích với tất cả các máy chủ web – ngay cả những máy chủ có cấu hình bộ nhớ đệm trang tùy chỉnh như Kinsta.
- Autoptimize có hơn 1 triệu lượt cài đặt đang hoạt động trong kho lưu trữ WordPress và được cập nhật liên tục với các tính năng mới và sửa lỗi.
Tự động tối ưu hóa cài đặt JS, CSS và HTML
HTML, CSS và JavaScript là bánh mì và bơ của Autoptimize. Cũng như các plugin tối ưu hóa khác, đào sâu vào bộ tính năng và cài đặt mở rộng của Autoptimize có thể là một nhiệm vụ khó khăn. Để làm cho mọi thứ dễ dàng hơn, chúng tôi đã biên soạn các cài đặt Tự động tối ưu hóa tốt nhất để cải thiện hiệu suất trang web của bạn.
Tùy chọn JavaScript
Tối ưu hóa mã JavaScript
Chúng tôi khuyên bạn nên bật tùy chọn này. Khi “tối ưu hóa mã JavaScript” được bật, Autoptimize sẽ giảm thiểu các tệp JavaScript của bạn.
Tệp JS tổng hợp
Tùy chọn “tệp JS tổng hợp” của Autoptimize sẽ kết hợp tất cả các tệp JavaScript của bạn thành một tệp duy nhất. Trước đây, việc kết hợp các tệp JS và CSS là một bước quan trọng trong việc tối ưu hóa WordPress. Tại Kinsta, chúng tôi sử dụng các máy chủ HTTP / 2 hiện đại hỗ trợ tải xuống song song và ghép kênh – điều này có nghĩa là việc kết hợp các tệp không còn quan trọng như trước nữa vì HTTP / 2 cho phép tải nhiều tệp cùng một lúc. Như đã nói, việc tổng hợp các tệp CSS và JS vẫn sẽ dẫn đến tăng tốc cho một số loại trang web WordPress nhất định, vì vậy chúng tôi khuyên bạn nên kiểm tra tốc độ trang của mình khi bật và tắt tùy chọn này.
Cũng tổng hợp JS nội tuyến
Tùy chọn “cũng tổng hợp JS nội tuyến” trích xuất JS nội tuyến trong HTML của bạn và kết hợp nó với tệp JS được tối ưu hóa của Autoptimize. Vì tùy chọn này có thể làm tăng nhanh kích thước bộ nhớ cache của Autoptimize, chúng tôi khuyên bạn nên tắt tùy chọn này trừ khi bạn có lý do cụ thể để bật nó.
Buộc JavaScript trong
Trong hầu hết các trường hợp, chúng tôi khuyên bạn không nên bắt buộc tải các tệp JavaScript trong phần tử <head> HTML của trang web của mình. Việc buộc JS tải sớm có thể dẫn đến các phần tử chặn hiển thị có thể làm chậm tốc độ trang của bạn. Nếu bạn có các tệp JavaScript cần được tải trong phần tử <head> , chúng tôi khuyên bạn nên loại trừ các tập lệnh đó khỏi Autoptimize.
Loại trừ Tập lệnh khỏi Tự động tối ưu hóa
Tùy chọn này cho phép bạn loại trừ các thư mục và tệp JavaScript cụ thể khỏi tổng hợp. Theo mặc định, Autoptimize loại trừ các tập lệnh sau.
- wp-bao gồm / js / dist /
- wp-bao gồm / js / tinymce /
- js / jquery / jquery.js
Lưu ý rằng việc thêm tập lệnh bị loại trừ chỉ ảnh hưởng đến việc tổng hợp theo mặc định. Các tệp JavaScript bị loại trừ sẽ vẫn được giảm thiểu trừ khi “giảm thiểu các tệp CSS và JS bị loại trừ” được bỏ chọn trong “Các tùy chọn khác”.
Thêm gói thử bắt bắt
Việc bật tùy chọn “thêm gói thử bắt” sẽ bao bọc mã JavaScript của bạn trong các khối thử bắt. Tùy chọn này hữu ích để gỡ lỗi các vấn đề do việc tổng hợp và rút gọn JS gây ra. Nếu trang web của bạn chỉ hoạt động khi bật tính năng “thêm gói thử bắt”, chúng tôi khuyên bạn nên làm việc với nhà phát triển để xem qua các tệp JavaScript của bạn để xác định nguyên nhân gây ra sự cố vì việc sử dụng quá nhiều các khối thử bắt có thể làm giảm hiệu suất JS.
Tùy chọn CSS
Tối ưu hóa mã CSS
Chúng tôi khuyên bạn nên bật tùy chọn này. Khi “tối ưu hóa mã CSS” được bật, Autoptimize sẽ thu nhỏ các tệp CSS của bạn.
Tệp CSS tổng hợp
Tùy chọn “tệp CSS tổng hợp” của Autoptimize sẽ kết hợp tất cả các tệp CSS của bạn thành một tệp duy nhất. Như chúng tôi đã đề cập trước đó, tính năng này có thể không mang lại lợi ích cho các trang web hỗ trợ HTTP / 2. Chúng tôi khuyên bạn nên thử nghiệm A / B tùy chọn này trên trang web của mình để xác định xem có bất kỳ tác động tích cực nào đến tốc độ trang hay không.
Cũng tổng hợp CSS nội tuyến
Tùy chọn này sẽ chuyển CSS nội tuyến sang tệp CSS của Autoptimize. Mặc dù việc chuyển CSS nội tuyến sang tệp CSS có thể lưu trong bộ nhớ cache của trình duyệt có thể làm giảm kích thước trang, chúng tôi khuyên bạn nên tắt tùy chọn này trong hầu hết các trường hợp.
Tạo dữ liệu: URI cho hình ảnh
Khi tùy chọn này được bật, Autoptimize sẽ mã hóa base64 các hình ảnh nền nhỏ và nhúng chúng vào CSS. Chúng tôi khuyên bạn nên thử nghiệm tùy chọn này để đánh giá tác động đến tốc độ trang của bạn. Trong khi mã hóa hình ảnh thành định dạng base64 làm giảm số lượng yêu cầu HTTP, các tệp biểu diễn base64 thường lớn hơn 20-30% so với các tệp nhị phân của chúng.
CSS nội tuyến và trì hoãn
Nội tuyến CSS quan trọng có thể dẫn đến tăng tốc độ đáng kể cho một số trang web. Ý tưởng ở đây là các kiểu nội tuyến được yêu cầu cho các phần tử “trong màn hình đầu tiên”. Trên thực tế, CSS nội tuyến thường nhắm mục tiêu đến các phần tử như phần tử cấu trúc, họ và kích thước phông chữ toàn cục cũng như kiểu điều hướng.
Bằng cách nội dòng các yếu tố chính này, tệp CSS hoàn chỉnh lớn hơn có thể được tải sau đó mà không ảnh hưởng đến giao diện của trang. Mặc dù có thể trích xuất các kiểu quan trọng theo cách thủ công, chúng tôi khuyên bạn nên sử dụng một công cụ như công cụ này để tạo các kiểu làm điểm bắt đầu.
Sau khi tạo CSS quan trọng, hãy sao chép và dán nó vào cài đặt Tự động tối ưu hóa.
Bước tiếp theo là kiểm tra trải nghiệm giao diện người dùng của trang web của bạn. Nếu bạn nhận thấy một số nhấp nháy kỳ lạ của nội dung chưa được định kiểu (FOUC), có thể bạn sẽ cần xác định các phần tử chưa được định kiểu đó và thêm các kiểu tương ứng vào Tự động hóa để nội tuyến.
Autoptimize cung cấp một “sức mạnh” tự động tạo CSS quan trọng cho các trang WordPress của bạn. Theo kinh nghiệm của chúng tôi, tính năng này đôi khi có thể làm chậm trang web của bạn vì nó sử dụng các lệnh gọi API bên ngoài để tạo CSS quan trọng. Do đó, việc tạo CSS quan trọng ban đầu phụ thuộc vào khả năng đáp ứng của máy chủ bên ngoài. Trong hầu hết các trường hợp, phương pháp nói trên không yêu cầu bất kỳ lệnh gọi API bên ngoài nào là một giải pháp tốt hơn.
Nội dòng tất cả CSS
Đối với hầu hết các trang web, chúng tôi không khuyên bạn nên nội tuyến tất cả CSS vì nó có thể làm tăng kích thước trang đáng kể. Hơn nữa, nội tuyến tất cả CSS khiến trình duyệt web không thể lưu CSS vào bộ nhớ cache.
Loại trừ CSS khỏi Autoptimize
Theo mặc định, Autoptimize loại trừ tổng hợp các thư mục và tệp CSS sau đây. Nếu bạn muốn ngăn Autoptimize tổng hợp bất kỳ tệp CSS nào của mình, bạn có thể thêm chúng vào danh sách này. Tương tự như loại trừ JavaScript, hành vi mặc định của tính năng này không ngăn các tệp CSS được rút gọn – chỉ được tổng hợp.
- wp-content / cache /
- wp-content / uploads /
- admin-bar.min.css
- dashicons.min.css
Tùy chọn HTML
Tối ưu hóa HTML của Autoptimize có thể giúp giảm kích thước các trang của bạn bằng cách loại bỏ khoảng trắng.
Tối ưu hóa mã HTML
Chúng tôi khuyên bạn nên bật tính năng mã “tối ưu hóa HTML” vì tính năng này làm giảm kích thước trang bằng cách loại bỏ khoảng trắng không cần thiết trong HTML của bạn. Mặc dù tính năng này tương thích với hầu hết các trang web, nhưng việc xóa khoảng trắng có thể gây ra trục trặc trên một số trang web. Vì vậy, chúng tôi khuyên bạn nên kiểm tra kỹ lưỡng tính năng tối ưu hóa mã HTML trước khi sử dụng nó trong môi trường sản xuất.
Đăng kí để nhận thư mới
Giữ các bình luận HTML
Bật tính năng này nếu bạn muốn giữ lại các nhận xét HTML cho các trang được tối ưu hóa của mình.
Tùy chọn CDN
Nếu bạn đang sử dụng KinstaCDN hoặc dịch vụ proxy có khả năng CDN như Cloudflare, bạn không cần phải định cấu hình bất kỳ thứ gì trong tùy chọn CDN của Autoptimize. Để tăng cường tối ưu hóa tổng thể nhanh hơn và dễ dàng hơn, bạn có thể xem xét giảm thiểu mã của mình. Điều này có thể được thực hiện ngay trong bảng điều khiển MyKinsta bằng cách sử dụng tính năng thu nhỏ mã.
Tuy nhiên, nếu bạn đang sử dụng một dịch vụ CDN khác để tăng tốc nội dung của mình, bạn sẽ nhập URL CDN vào trường này.
Thông tin bộ nhớ cache
“Thông tin bộ nhớ cache” của Autoptimize hiển thị thông tin quan trọng như vị trí và quyền của thư mục bộ nhớ cache, cũng như tổng kích thước của các kiểu và tập lệnh được lưu trong bộ nhớ cache. Nếu bạn thấy “Không” bên cạnh “Chúng tôi có thể viết không?”, Bạn sẽ cần làm việc với máy chủ của mình để sửa các quyền đối với thư mục.
Tùy chọn khác
Autoptimize có một số cài đặt tối ưu hóa khác. Nếu bạn đang gặp sự cố khi tải các tệp CSS và JS được tối ưu hóa để tải trên trang web của mình, bạn có thể cần phải định cấu hình lại một số cài đặt bên dưới.
Lưu tập lệnh / CSS tổng hợp dưới dạng tệp tĩnh
Chúng tôi khuyên bạn nên bật tùy chọn này để lưu các tệp tổng hợp dưới dạng tệp tĩnh cục bộ. Bạn có thể cần phải tắt tính năng này nếu máy chủ của bạn không được định cấu hình để xử lý quá trình nén và hết hạn tệp.
Giảm thiểu các tệp CSS và JS bị loại trừ
Chúng tôi khuyên bạn nên bật tùy chọn này để đảm bảo tất cả các tệp CSS và JS được giảm thiểu. Tuy nhiên, nếu bạn nhận thấy một số vấn đề liên quan đến rút gọn với một số tệp CSS và JS bị loại trừ của mình, bạn có thể tiếp tục và tắt tùy chọn này.
Đồng thời Tối ưu hóa cho Người chỉnh sửa / Quản trị viên đã Đăng nhập
Chúng tôi khuyên bạn nên bật điều này để đảm bảo nội dung được tối ưu hóa cho những người chỉnh sửa và quản trị viên đã đăng nhập. Điều này quan trọng nếu bạn đang thử nghiệm cài đặt Tự động tối ưu hóa với tư cách người dùng đã đăng nhập.
Cần một máy chủ lưu trữ hàng đầu, nhanh chóng và an toàn cho trang web thương mại điện tử mới của bạn? Kinsta cung cấp các máy chủ nhanh như chớp và hỗ trợ đẳng cấp thế giới 24/7 từ các chuyên gia WooCommerce. Kiểm tra các kế hoạch của chúng tôi
Tối ưu hóa hình ảnh trong Autoptimize
Tính năng Autoptimize tích hợp sẵn với ShortPixel để tối ưu hóa hình ảnh. Ngoài cài đặt chất lượng hình ảnh, tích hợp của Autoptimize cũng cho phép bạn tạo và cung cấp các phiên bản WEBP của hình ảnh của bạn.
Đối với người dùng Kinsta, chúng tôi không khuyên bạn nên sử dụng tính năng tối ưu hóa hình ảnh trong Tự động tối ưu hóa. Thay vào đó, chúng tôi khuyên bạn nên sử dụng trực tiếp các plugin đầy đủ tính năng từ ShortPixel hoặc Imagify. Với plugin đầy đủ, bạn sẽ có quyền kiểm soát chi tiết hơn đối với cài đặt tối ưu hóa, bao gồm cả việc viết lại hình ảnh để sử dụng <picture> , thẻ này được yêu cầu để hỗ trợ WEBP trên Kinsta.
Autoptimize cũng bao gồm chức năng tải chậm cho hình ảnh. Chúng tôi khuyên bạn nên bật tính năng này để cải thiện tốc độ trang cho các trang có nhiều hình ảnh. Khi tính năng tải chậm được bật, Tự động tối ưu hóa cho phép bạn loại trừ một số lớp hình ảnh và tên tệp nhất định khỏi tải chậm.
Cài đặt loại trừ hữu ích cho các hình ảnh như biểu trưng, biểu tượng xã hội và các yếu tố hình ảnh quan trọng khác không nên tải chậm. Nếu bạn đang tìm kiếm một giải pháp cung cấp khả năng kiểm soát nhiều hơn đối với tải chậm, hãy xem hướng dẫn của chúng tôi về tải hình ảnh và video trong WordPress.
Tối ưu hóa bổ sung trong Tự động tối ưu hóa
Phông chữ Google
Autoptimize có một số tùy chọn khác nhau để tối ưu hóa Google Fonts. Lựa chọn tốt nhất cho bạn sẽ phụ thuộc vào cách trang web của bạn sử dụng Google Fonts.
- Để nguyên như vậy.
- Xóa Phông chữ của Google.
- Kết hợp và liên kết trong đầu.
- Kết hợp và tải trước trong đầu.
- Kết hợp và tải phông chữ không đồng bộ với webfont.js.
Chúng tôi khuyên bạn không nên sử dụng tùy chọn “để nguyên” vì nó không mang lại lợi ích về tốc độ.
Nếu Google Phông chữ không phải là một yêu cầu tối quan trọng trên trang web của bạn, thì việc xóa chúng và thay vào đó sử dụng ngăn xếp phông chữ hệ thống có thể có tác động tích cực rất lớn đến tốc độ trang của bạn.
Nếu bạn muốn giữ Phông chữ Google trên trang web của mình, chúng tôi khuyên bạn nên thử nghiệm ba tùy chọn cuối cùng để tìm ra tùy chọn nào hoạt động tốt nhất cho trang web của bạn.
Xóa biểu tượng cảm xúc
Tùy chọn Autoptimize này loại bỏ CSS và JavaScript liên quan đến các biểu tượng cảm xúc cốt lõi của WordPress. Chúng tôi khuyên bạn nên bật tùy chọn này vì nó có thể giúp giảm kích thước trang của bạn. Hơn nữa, hầu hết các hệ điều hành chính đều có ngăn xếp phông chữ bao gồm biểu tượng cảm xúc. Tất nhiên, cũng có những cách khác để tắt biểu tượng cảm xúc trên trang web WordPress của bạn.
Xóa chuỗi truy vấn khỏi tài nguyên tĩnh
Nếu bạn muốn xóa các chuỗi truy vấn (ví dụ: ver =) khỏi tài nguyên tĩnh, bạn có thể bật tùy chọn này. Việc loại bỏ các chuỗi truy vấn sẽ không ảnh hưởng đến thời gian tải, nhưng nó có thể giúp cải thiện điểm số trang web của bạn trong GTmetrix, Google Pagespeed và các dịch vụ kiểm tra hiệu suất khác.
Kết nối trước với các miền của bên thứ 3
Chỉ thị kết nối trước cho phép trình duyệt của bạn kết nối với các miền được chỉ định để xử lý tra cứu DNS và đàm phán bắt tay SSL trước khi gửi một yêu cầu HTTP đầy đủ.
Ví dụ: nếu trang web của bạn có hình ảnh biểu trưng được phân phát từ https://site.kinsta.cdn.com/logo.png , bạn có thể hướng dẫn Autoptimize thêm lệnh preconnect để xử lý các kết nối DNS và SSL ban đầu trong <head> trước khi yêu cầu HTTP được thực hiện trong phần tử <body> của HTML của bạn.
Bạn có thể sử dụng công cụ dành cho nhà phát triển hoặc trình kiểm tra của trình duyệt để tìm các miền bên ngoài quan trọng để kết nối trước. Trong trang ví dụ bên dưới, có các yêu cầu bên ngoài đối với các miền sau.
https://cdn.brianli.com-
https://www.google-analytics.com -
https://www.googletagmanager.com
Ba miền này có thể được thêm vào danh sách kết nối trước của Autoptimize.
Vì lý do hiệu suất, chúng tôi khuyên bạn nên thêm không quá sáu miền vào danh sách kết nối trước của Autoptimize vì việc chỉ định các chỉ thị kết nối trước cho quá nhiều miền có thể dẫn đến hiệu suất.
Tải trước các yêu cầu cụ thể
Lệnh tải trước hướng dẫn trình duyệt web của bạn tải xuống nội dung càng sớm càng tốt. Chỉ thị này hữu ích để tải xuống các nội dung cần thiết rất sớm trong quá trình tải trang. Trong thực tế, tải trước thường được sử dụng để tăng tốc thời gian tải cho các phông chữ tùy chỉnh bằng cách tải chúng trước khi chúng được yêu cầu trong CSS của trang.
Chúng tôi khuyên bạn nên tham khảo ý kiến của nhà phát triển về nội dung nào, nếu có, nên tải trước trên trang web WordPress của bạn. Cũng như nhiều chỉnh sửa khác liên quan đến hiệu suất, việc tải trước quá nhiều nội dung có thể khiến trang web của bạn tải chậm hơn.
Tệp JavaScript không đồng bộ
Tính năng “tệp JavaScript không đồng bộ” của async cho phép bạn chỉ định các tệp JavaScript bên ngoài nhất định để tải không đồng bộ thông qua cờ HTML không đồng bộ. Mặc dù tải tệp JS không đồng bộ có thể cải thiện tốc độ trang, chúng tôi khuyên bạn nên thực hiện kiểm tra đầy đủ để đảm bảo rằng không có chức năng trang web nào bị ảnh hưởng.
Bản tóm tắt
Nếu bạn biết cách điều chỉnh cài đặt của nó, thì plugin Autoptimize là một lựa chọn phù hợp cho những người dùng WordPress đang tìm cách tăng hiệu suất trang web.
Với các tính năng cơ bản như tối ưu hóa HTML và CSS và các tính năng nâng cao hơn, chẳng hạn như khả năng chỉ định các chỉ thị kết nối trước và tải trước, Autoptimize có mọi thứ bạn cần để tối ưu hóa hiệu suất giao diện người dùng của trang web WordPress của mình.
Nếu bạn quan tâm đến việc tìm hiểu thêm về tối ưu hóa WordPress và cách tối ưu hóa phần phụ trợ của trang web của mình, hãy nhớ xem hướng dẫn hiệu suất WordPress toàn diện của chúng tôi.
Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:
- Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
- Tích hợp Cloudflare Enterprise.
- Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
- Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.
Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.
