Hướng Dẫn Sử Dụng Asset CleanUp Pro: Page Speed Booster

WordPress là một nền tảng mã nguồn mở cho nên việc phát sinh các file JS và CSS dư thừa là điều không thể tránh vì vậy bạn nên chặn các file JS và CSS không cần thiết để tăng tốc độ load cho website, nên dùng Asset CleanUp vì đây là một plugin miễn phí, hoạt động hiệu quả và tương thích rất cao.

Cài đặt plugin Asset CleanUp

Với nhu cầu cơ bản chỉ cần dùng Asset CleanUp bản miễn phí là đủ, trên bản Asset CleanUP Pro sẽ có thêm các tính năng như inline JavaScript, inline CSS file, giới file CSS JS ở trang danh mục bài viết, danh mục sản phẩm… theo mình những tính năng này thực sự không quá cần thiết vì trên những plugin cache đã có sẵn rồi.

Để cài đặt bạn cần tải file plugin Asset CleanUp, sau đó chọn cài đặt plugin bằng cách upload zip và kích hoạt plugin.

cai dat plugin asset cleanup ban mien phi

Cấu hình cơ bản cho Asset Cleanup

Phần cài đặt plugin usage preferences bạn để như mặc định, chú ý ở cuối cùng phần do not load the plugin on certain pages, phần này điền các trang mà bạn không muốn tối ưu hóa vào, thường là những trang thanh toán hoặc giỏ hàng, việc này giúp hạn chế các lỗi về tải trang.

cài đặt plugin usage asset cleanup

Chế độ test mode giúp loại bỏ toàn bộ cài đặt trên plugin và chỉ áp dụng cho quản trị viên, chế độ này thích hợp khi bạn cần sửa lỗi, hãy để như mặc định.

chế độ test mode cho plugin asset cleanup

3 phần tiếp theo đó là optimize CSS, optimize JavaScript và CDN: Rewrite assets URLs, hãy để trống tất cả như mặc định. Những tùy chọn tối ưu này rất phức tạp và đã có sẵn trên những plugin như: WP Rocket, LiteSpeed Cache, Swift Performance nên để hạn chế lỗi bạn không cần tùy chỉnh gì thêm.

các cấu hình liên quan đến js và css asset cleanup

Ở tab site-wide common unloads sẽ có các tùy chọn lần lượt như sau:

  • Disable Emojis Site-Wide: đây là bộ emojis mặc định của WordPress, chọn bật như hình
  • Disable oEmbed (Embeds) Site-Wide: nếu bạn muốn tắt tính năng nhúng hãy bật tùy chọn này lên
  • Disable Dashicons if Toolbar is hidden (Site-Wide): tắt bộ dashicons, chọn bật như hình
  • Disable Gutenberg CSS Block Library Site-Wide: tắt gutenberg CSS nếu bạn dùng classic editor
  • Disable jQuery Migrate Site-Wide: phần này để như mặc định vì rất dễ bị lỗi
  • Disable Comment Reply Site-Wide: tắt CSS bình luận nếu bạn dùng tính năng bình luận bên thứ 3 như: Facebook, Disqus
cấu hình site wide common uploads asset cleanup

Ở tab html source cleanup, chọn bật tất cả.

html source cleanup trên asset cleanup pro

Các phần còn lại gồm: local fonts, Google Fonts, disable RSS feed, disable XML-RPC để trống như mặc định và cuối cùng chọn update all settings.

các tùy chọn local fonts và google fonts trên asset cleanup

Cấu hình CSS JS trên Asset CleanUP

Truy cập vào tab CSS/JS Manager, đầu tiên chúng ta sẽ giới hạn load cho các file JS và CSS tại trang chủ, tại đây chúng ta sẽ thấy danh sách toàn bộ file JS và CSS được tải trên trang web, sẽ có 2 tùy chọn chính:

  • Unload on this page: chặn file này tại trang hiện tại
  • Unload site-wide: chặn file này trên toàn website

Ví dụ trang chủ của website không sử dụng Contact Form 7 vì vậy mình sẽ chặn toàn bộ các file JS và CSS liên quan, chọn unload on this page và update.

css và js manager trên asset cleanup

Phần này bạn nên xem cụ thể tính năng trên mỗi trang để đưa ra cài đặt thích hợp, không phải trang nào trên website cũng giống nhau. Ví dụ tiếp theo đó là về plugin Elementor, mình chỉ dùng Elementor cho trang liên hệ và giới thiệu, vì vậy trong trường hợp này mình cũng sẽ chặn toàn bộ file Elementor tại homepage.

chặn các file js elementor tại homepage bằng asset cleanup

Cấu hình CSS JS cho từng trang riêng biệt

Để cấu hình CSS JS cho một bài viết hay trang bất kỳ hãy truy cập vào trang đó và chú ý phần Asset CleanUp: CSS & JavaScript Manager, plugin sẽ tự động list ra tất cả các file JS và CSS. Phần này cũng có lần lượt các tùy chọn như sau:

  • Unload on this page: chặn file này tại trang hiện tại
  • Unload site-wide: chặn file này trên toàn website
  • Unload CSS on all pages of “post” post type: chặn file này trên toàn bộ các bài viết

Trong trường hợp này mình chỉ sử dụng Contact Form 7 trên duy nhất trang liên hệ nên mình sẽ chặn toàn bộ file JS CSS của Contact Form 7 trên toàn bộ bài viết, ấn cập nhật để lưu lại tùy chọn. Các file còn lại bạn chỉ cần làm tương tự, hãy xem xét kỹ file JS và CSS đó có cần thiết trên bài viết hay không.

cấu hình css js cho bài viết riêng biệt asset cleanup

Bài viết trước khi tối ưu, load time 2.16s, requests 13.

page trước khi tối ưu bằng aset cleanup

Bài viết sau khi tối ưu, load time 1.47s, requests 10.

page sau khi tối ưu bằng asset cleanup

Như vậy là mình đã hướng dẫn từ A – Z việc tối ưu file JS CSS bằng Asset CleanUp, nếu bạn gặp khó khăn gì hãy để lại bình luận mình sẽ cố gắng phản hồi nhanh nhất có thể, chúc bạn thành công.

Van Khai Cris

Van Khai Cris

Chào bạn mình là Van Khai Cris một chàng trai 9x đến từ vùng đất Tây Nguyên đầy nắng và gió, mình đã có hơn 5 năm kinh nghiệm trong lĩnh vực WordPress , Google Ads và MMO. Mọi kiến thức mình chia sẻ đều hướng đến sự đơn giản và hữu ích dành cho người mới, rất vui khi được kết nối cùng bạn.

guest

0 Bình luận
Đánh giá
Xem toàn bộ bình luận
0
Để lại bình luận hoặc câu hỏix