Plugin Autoptimize WordPress tăng tốc Website [PRO]

|

Cải thiện tốc độ của Website luôn là vấn đề quan tâm hàng đầu của các nhà quản trị Website, đặc biệt là những người làm SEO, Marketing cho website đó. Đối với vấn đề tăng tốc WordPress thì tôi cũng có nhiều giải pháp. Nhưng hôm nay tôi sẽ nói về Plugin Autoptimize – một trong các plugin hỗ trợ nén code, tối ưu CSS, Javascript, tăng tốc website miễn phí tốt nhất mà tôi yêu thích. Để hiểu hơn về plugin này thì hãy đọc bài viết sau đây nhé!

Hướng Dẫn Tăng Tốc WordPress Với Plugin Autoptimize
Hướng Dẫn Sử Dụng Plugin Autoptimize

Autoptimize là gì?

Autoptimize là 1 một Plugin WordPress, công cụ tăng tốc website miễn phí tốt nhất.

Autoptimize giúp liên kết những scripts JS lại với nhau và những styles CSS lại với nhau, thu nhỏ và nén chúng lại, thêm Expires Header và Cache. Tùy chọn chức năng di chuyển những đoạn Style lên Header (đầu trang) và Script xuống Footer (chân trang).

Plugin này còn giúp giảm thiểu được mã HTML, làm cho website trở nên rất nhẹ nhàng. Ngoài ra thì những tùy chọn nâng cao sẽ cho phép điều chỉnh Autoptimize phù hợp với những yêu cầu cụ thể của từng trang website và những chức năng đặc biệt khác.

Tỉm hiểu thêm: Các cách tăng tốc wordpress website hiệu quả

Chức năng chính của Plugin Autoptimize wordpress

  • HTML Options : Nén code, tối ưu HTML.
  • JavaScript Options: Nén code, gộp file, tối ưu file JS.
  • CSS Options: Nén code, gộp file, tối ưu file CSS.
  • CDN Options (Bạn nào có chưa biết CDN thì tham khảo bài viết: CDN là gì?)

HTML Options

  • Optimize HTML Code: Kích hoạt tối ưu HTML.
  • Keep HTML Comment: Giữ những dòng comment trong HTML được tối ưu.

JavaScript Options

  • Optimize JavaScript Code?: Kích hoạt tối ưu JavaScript.
  • Force JavaScript in <head>?: Nạp Javascript sớm hơn và tránh được lỗi JavaScript nhưng mà chức năng này cũng là con dao 2 lưỡi. Nó cũng có thể là một nguyên nhân để ngăn chặn JavaScript ở trên trang (render blocking). Nếu như không muốn nén inline JavaScript thì không chọn đến chức năng này.
  • Also aggregate inline JS?: tối ưu JavaScript ở trong file HTML (nên chọn).
  • Exclude scripts from Autoptimize: Loại trừ những file không cần tối ưu nhập vào đường dẫn đến File cần có exclude và mỗi file cũng cần có cách nhau dấu “,”.
  • Add try-catch wrapping?: Chắc bạn cũng đã hiểu được try – catch trong lập trình. Tùy chọn cố gắng thực thi JavaScript kể cả khi website bị lỗi JavaScript (nếu như không có lỗi thì không nên chọn).

Các phần lưu ý của chức năng này là việc tối ưu JS (optimize JS), nén code JS (minify JS)  lại sẽ giúp giảm thiểu dung lượng file làm cho website load nhanh hơn. Chức năng gộp các file JS lại (combine JS)  và thêm thuộc tính defer vào script JS. Chức năng này có công dụng loại bỏ tài nguyên JS chặn hiển thị. Đây cũng là nguyên nhân gây bể giao diện, vì thứ tự ưu tiên load các file JS lúc này sẽ không giống như lúc đầu nữa mà thay vào đó sẽ có 1 file JS tổng rất lớn ở cuối trang. Đối với các bạn làm SEO Google thì khá quan tâm vấn đề này. Vì khi Google thu thập dữ liệu website để lập chỉ mục, thì các con bọ (Bot, Crawler) chỉ thu thập trong 1 khoảng gian nhất định. Nếu tài nguyên website vẫn chưa load xong, thì Google chỉ thu thập những phần đã load. Vậy nếu file JS tổng chưa load xong trong khoảng thời gian các con bọ cho phép, thì Google sẽ thu thập 1 trang bị bể giao diện vì JS chưa load xong. Chức năng combine JS này chỉ khuyến nghị khi mà website của bạn sử dụng 1 CDN tốc độ cao, đã tối ưu ảnh và đã tối ưu các phần khác thì khả năng file JS mới load kịp khi Google thu thập dữ liệu.

CSS Options

  • Optimize CSS Code?: kích hoạt tối ưu CSS.
  • Generate data: URLs for image?: Thay vì phải tải một ảnh nền riêng biệt cho một div nào đó thì tùy chọn này cũng sẽ bao gồm tải các hình ảnh nhỏ cho những nền. Điều đó sẽ giúp load nhanh hơn (nên chọn).
  • Remove google Font?: Loại bỏ được google fonts nếu website không dùng Fonts của Google thì không nên chọn.
  • Also aggregate inline CSS? giải pháp tối ưu cho dòng file CSS nhẹ hơn.
  • Exclude CSS from Autoptimize: Loại trừ những file CSS không cần phải tối ưu (cái này cũng tương tự như exclude scripts from Autoptimize).

Các phần lưu ý của chức năng này là việc tối ưu CSS (CSS JS), nén code CSS (minify CSS)  lại sẽ giúp giảm thiểu dung lượng file làm cho website load nhanh hơn.

CDN Options

Nếu như bạn có một dịch vụ CDN thì hãy nhập đường dẫn góc CDN của bạn vào “CDN base_URL” để kích hoạt.

Xem thêm: Plugin là gì? Các plugin tối ưu tốc độ wordpress

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

Trước khi cài đặt và kích hoạt plugin Autoptimize, vào phần Cài đặt →  chọn Autoptimize:

Cài đặt Plugin Autoptimize
Cài đặt Plugin Autoptimize

Thiết lập cơ bản

  1. Tích chọn cả 3 tùy chọn tối ưu hóa:
Tích Chọn Cả 3 Tùy Chọn Tối ưu Hóa
Tích Chọn Cả 3 Tùy Chọn Tối ưu Hóa (Setting Plugin Autoptimize)
  1. Nhấn Save Changes (Lưu thay đổi).

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

CDN Options
CDN Options (Setting Plugin Autoptimize)

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 hiệu quả, nếu như muốn tối ưu hóa sâu hơn thì hãy tiến hành thực hiện các tùy chỉnh nâng cao.

  1. Để vào phần tùy chỉnh nâng cao hãy click vào Hiển thị cài đặt nâng cao (Show advanced settings), giao diện nâng cao sẽ được như sau:
Cài đặt Nâng Cao
Cài đặt Nâng Cao (Setting Plugin Autoptimize)
  1. Tích chọn những lựa chọn (Options) mà bạn muốn, chi tiết từng lựa chọn như sau:
  • Keep HTML comments? Nghĩa là giữ HTML comment trong trang. Nếu muốn giữ lại bình luận dạng HTML thì tick vào.
  • Force JavaScript in <head>?: Nghĩa là đẩy Javascript lên khu vực <head>. Nếu 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).
  • Also aggregate inline JS?: Nghĩa là gộp Javascript nội tuyến. Nếu 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.
  • Exclude scripts from Autoptimize: Nghĩa là không tối ưu hóa một số file Javascript 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 file (vd: file-name.js) nó vào khu vực tương ứng và cách nhau bằng dấu phẩy.
  • Add try-catch wrapping?: Thêm mã Try-catch cho code. Nếu muốn gỡ lỗi với Javascript thì nên tick chọn cái này.
  • 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ề.
  • Also aggregate inline CSS? Điều này giúp gộp CSS nội tuyến, tương tự như gộp Javascript 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 Autoptimize 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. Khi 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 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.
  • 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.
  • Exclude CSS from Autoptimize: Có ý nghĩa tương tự phần loại trừ Javascript. Nhưng ở đây là loại trừ các file CSS. Có những file CSS nếu 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.
  • 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ó.
  • 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 Javascript và CSS. 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.

Nhấn Save changes để lưu thay đổi.

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

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

  1. Chuyển sang tab extra

Chọn tùy chọn mà bạn mong muốn:

  • Remove Emojis: Loại bỏ các biểu tượng Emoji 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).
  • Remove query strings from static resources: 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.
  • Google Fonts: Nếu giao diện của bạn dùng Google Fonts, tùy chọn này giúp 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 tức 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.
  • 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ễ.
  • 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 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 không ở phần đầu của trang (chỉ nên dùng nếu video ở giữa hoặc cuối).
Tùy Chọn Javascript
Tùy Chọn Javascript (Setting Plugin Autoptimize)

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

  1. Chuyển sang tab: Optimize more
  1. Tích chọn những tiêu chí mà bạn muốn tối ưu tốc độ website, Autoptimize đư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 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 cùng với Autoptimize thì rất hợp.
  • ShortPixel là plugin giúp nén ảnh.
  • 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. Chúng tôi cũng có đề 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. Tuy nhiên khi xét trên tổng thể GeneratePress chiếm ưu thế hơn so với Astra.
  • 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ể. 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.
Các Tính Năng Tự động Tối ưu Hóa Sức Mạnh
Các Tính Năng Tự động Tối ưu Hóa Sức Mạnh (Setting Plugin Autoptimize)
  1. Chọn Save Changes.

Như vậy là Themenest đã cùng cài đặt và hướng dẫn sử dụng Plugin Autoptimize một cách khá đầy đủ rồi. Qua bài viết này, mọi người sẽ cảm nhận được được tốc độ website của mình đã cải thiện đáng kể. Đây chỉ là một trong rất nhiều thủ thuật tăng tốc website, đón chờ những bài viết tiếp theo của Themenest nhé!

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với ThemeNest thông qua các kênh sau:

  • Hotline: 0902 170 180
  • Email: sales@themenest.vn

ThemeNest hiện đang có chương trình khuyến mãi dành cho khách hàng mua theme wordpress. ThemeNest sẽ hỗ trợ quý khách 24/24 với chất lượng theme tốt nhất!

Có tất cả 0 bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0902 170 180