Hướng dẫn chi tiết cách xóa và tối ưu unused CSS WordPress để tăng tốc website

Unused CSS WordPress là một trong những nguyên nhân chính khiến website chạy chậm, điểm PageSpeed thấp và trải nghiệm người dùng kém. Khi bạn cài đặt theme, plugin hoặc page builder, hàng trăm dòng CSS không cần thiết vẫn được tải trên mọi trang. Bài viết này sẽ giúp bạn hiểu rõ bản chất của unused CSS, cách phát hiện và loại bỏ chúng một cách triệt để.

Unused CSS WordPress là gì?

Unused CSS (CSS không sử dụng) là những đoạn mã CSS được tải trên website nhưng không áp dụng cho bất kỳ phần tử HTML nào trên trang hiện tại. Trong WordPress, vấn đề này xảy ra phổ biến vì theme và plugin thường tải toàn bộ file CSS cho mọi tình huống, thay vì chỉ tải những phần cần thiết.

Ví dụ: Một theme WordPress có file style.css chứa 5000 dòng mã. Trang chủ của bạn chỉ sử dụng 1200 dòng. 3800 dòng còn lại là unused CSS, vẫn được trình duyệt tải xuống và phân tích cú pháp, gây lãng phí băng thông và thời gian render.

Nguyên nhân chính gây ra unused CSS trong WordPress

• Theme đa năng: Các theme như Avada, Divi, Elementor tích hợp sẵn hàng ngàn tùy chọn thiết kế, kéo theo lượng CSS khổng lồ không dùng đến.
• Plugin không tối ưu: Nhiều plugin tải toàn bộ thư viện CSS của họ trên mọi trang, bất kể trang đó có sử dụng chức năng của plugin hay không.
• Page Builder: Elementor, WPBakery, Beaver Builder thêm CSS động cho từng module, nhưng không dọn dẹp khi module bị xóa.
• Shortcode và widget: CSS của shortcode hoặc widget vẫn tồn tại trong source code ngay cả khi không sử dụng.
• CSS framework: Bootstrap, Tailwind CSS được nhúng nguyên bộ dù chỉ dùng vài class.

Tác động của unused CSS đến hiệu suất website



Unused CSS ảnh hưởng trực tiếp đến ba chỉ số quan trọng: tốc độ tải trang, điểm Core Web Vitals và trải nghiệm người dùng. Điều này đồng nghĩa với việc website của bạn đang lãng phí tài nguyên server và băng thông của người dùng.

Cách phát hiện unused CSS trong WordPress



Trước khi xóa, bạn cần xác định chính xác những dòng CSS nào đang dư thừa. Có ba phương pháp phổ biến:

Sử dụng Chrome DevTools Coverage

Công cụ Coverage trong Chrome DevTools cho phép bạn kiểm tra tỷ lệ CSS được sử dụng trên từng trang. Các bước thực hiện:

1. Mở Chrome DevTools bằng phím F12
2. Chọn tab Coverage (nếu không thấy, nhấn vào biểu tượng ba chấm > More tools > Coverage)
3. Nhấn nút Record và tải lại trang
4. Xem cột “Unused Bytes” để biết dung lượng CSS không dùng

Phương pháp này cho kết quả chính xác nhưng chỉ áp dụng cho từng URL riêng lẻ. Bạn cần kiểm tra nhiều trang để có cái nhìn tổng quan.

Plugin phát hiện unused CSS

Một số plugin WordPress chuyên dụng giúp quét toàn bộ website và báo cáo chi tiết:

• Asset CleanUp: Hiển thị danh sách CSS và JS trên từng trang, cho phép tắt thủ công
• Perfmatters: Tích hợp tính năng “Remove Unused CSS” tự động
• WP Rocket: Phiên bản 3.8 trở lên có chức năng Remove Unused CSS
• Flying Pages: Hỗ trợ loại bỏ CSS không dùng kết hợp với lazy load

Công cụ phân tích trực tuyến

Các công cụ như GTmetrix, PageSpeed Insights và Pingdom cũng cung cấp báo cáo về unused CSS. Tuy nhiên, chúng chỉ đưa ra cảnh báo chứ không cho phép can thiệp trực tiếp.

Hướng dẫn xóa unused CSS WordPress chi tiết

Có nhiều cách để loại bỏ unused CSS, từ thủ công đến tự động. Plugin sẽ tự động phân tích và chỉ tải CSS cần thiết cho từng trang.

Hướng dẫn với WP Rocket:

1. Cài đặt và kích hoạt WP Rocket
2. Vào Settings > WP Rocket > File Optimization
3. Bật tùy chọn “Remove Unused CSS”
4. Chọn chế độ “Load CSS asynchronously” để tránh render-blocking
5. Nhấn Save Changes và xóa cache

Hướng dẫn với Asset CleanUp:

1. Cài đặt Asset CleanUp Pro (bản miễn phí có giới hạn)
2. Vào Settings > Asset CleanUp > CSS & JS Manager
3. Chọn từng trang hoặc bài viết để xem danh sách file CSS đang tải
4. Bỏ chọn (Unload) những file CSS không cần thiết
5. Lưu thay đổi và kiểm tra frontend

Phương pháp 2: Tinh chỉnh theme và plugin

Nếu bạn sử dụng theme tùy chỉnh hoặc có kiến thức về CSS, hãy can thiệp trực tiếp vào mã nguồn:

• Loại bỏ CSS của plugin không dùng: Vào thư mục wp-content/plugins, xóa hoặc comment các dòng enqueue CSS trong file chính của plugin
• Gộp và nén CSS: Sử dụng child theme để override CSS không cần thiết từ theme cha
• Critical CSS: Trích xuất CSS cho phần nội dung hiển thị đầu tiên (above the fold) và tải phần còn lại không đồng bộ

Phương pháp 3: Sử dụng code thủ công trong functions.php

Thêm đoạn code sau vào file functions.php của child theme để deregister CSS không dùng:

add_action(‘wp_enqueue_scripts’, ‘remove_unused_css’, 100);
function remove_unused_css() {
  if (!is_page(‘contact’)) {
    wp_dequeue_style(‘contact-form-7’);
  }
  if (!is_single()) {
    wp_dequeue_style(‘wp-block-library’);
  }
}

Lưu ý: Phương pháp này yêu cầu bạn biết chính xác handle name của từng file CSS.

Có thể nếu bạn xóa nhầm CSS cần thiết. Luôn kiểm tra kỹ trên staging site trước khi áp dụng lên website thật. Sử dụng plugin có tính năng preview để xem trước thay đổi.

Unused CSS ảnh hưởng đến SEO như thế nào?

Google sử dụng tốc độ tải trang làm yếu tố xếp hạng. Unused CSS làm chậm thời gian tải, tăng tỷ lệ thoát và giảm điểm Core Web Vitals, từ đó ảnh hưởng tiêu cực đến SEO.

Có nên xóa hoàn toàn unused CSS không?

Không nên xóa 100% vì một số CSS có thể được kích hoạt bởi JavaScript hoặc tương tác người dùng. Mục tiêu là giảm xuống dưới 10% tổng dung lượng CSS.

Plugin nào tốt nhất để xóa unused CSS?

WP Rocket và Perfmatters là hai lựa chọn hàng đầu nhờ khả năng tự động hóa cao và ít gây lỗi. Asset CleanUp Pro phù hợp nếu bạn muốn kiểm soát thủ công từng file.

Critical CSS có cần thiết khi xóa unused CSS không?

Có. Critical CSS giúp trình duyệt render nội dung ngay lập tức mà không cần đợi tải toàn bộ CSS. Đây là bước quan trọng để cải thiện First Contentful Paint.

Bao lâu nên kiểm tra unused CSS một lần?

Sau mỗi lần cập nhật theme, plugin hoặc thêm tính năng mới. Tối thiểu 3 tháng một lần để đảm bảo website luôn ở trạng thái tối ưu.

Kết luận

Unused CSS WordPress là vấn đề kỹ thuật phổ biến nhưng hoàn toàn có thể giải quyết được. Việc loại bỏ CSS không dùng không chỉ giúp website tải nhanh hơn mà còn cải thiện trải nghiệm người dùng và thứ hạng SEO. Tùy vào trình độ và nhu cầu, bạn có thể chọn plugin tự động hoặc can thiệp thủ công. Quan trọng nhất là luôn kiểm tra kỹ lưỡng trước khi áp dụng thay đổi và duy trì việc tối ưu định kỳ. Một website sạch sẽ về mã nguồn sẽ là nền tảng vững chắc cho sự phát triển lâu dài.