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.
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.
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.
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.
Ở 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
Ở tab html source cleanup, chọn bật tất cả.
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ấ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.
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.
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.
Bài viết trước khi tối ưu, load time 2.16s, requests 13.
Bài viết sau khi tối ưu, load time 1.47s, requests 10.
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.
