Nếu bạn đang muốn tăng tốc website WordPress và có tham khảo qua công cụ Google Page Speed

Ngay lập tức bạn được nhận được hướng dẫn Remove Unused CSS để cải thiện tốc độ tải trang.

Nhưng bạn chưa biết chúng là gì và làm thế nào để loại bỏ.

Trong bài viết này mình sẽ giải thích cụ thể Unused CSS là gì?

Và làm thế nào để loại bỏ các CSS không sử dụng đến này nhé.

CSS không dùng đến trong WordPress là gì?

Unused CSS trong WordPress là các đoạn mã CSS load trên website, nhưng không thực sự cần thiết để hiển thị trang.

Những đoạn code này sẽ website mất nhiều thời gian load hơn và làm ảnh hưởng đến trải nghiệm người dùng.

Không những thế tốc độ tải trang là một trong những yếu tố rất quan trọng đến thứ hạng tìm kiếm.

Cách tốt nhất để kiểm tra những CSS không sử dụng đến là sử dụng Google Pagespeed Insights.

Dưới phần kết quả bạn sẽ thấy phần ‘Remove Unused CSS’ và chi tiết các file CSS nào đang ảnh hưởng đến thời gian tải.

Chi tiết các file CSS không dùng đến.

Vậy tai sao các CSS không dùng đến này được thêm vào WordPress?

Có thế bạn không để ý nhưng CSS có mặt quanh chúng ta.

CSS được sử dụng để style mọi nội dung HTML có trên internet, kể cả theme WordPress.

Giao diện WordPress thường sẽ bao gồm một file style.css chứa toàn bộ CSS trong đó ( có thể nhiều hơn).

Ngoài theme thì các plugin cũng load các css của riêng chúng.

Thông thường, những file này rất nhỏ và mất ít thời gian để tải.

Nhưng nếu site bạn có quá nhiều CSS, các hiệu ứng cũng nhiều lên và tất nhiên là website bạn sẽ load lâu hơn.

Làm thế nào để xóa Unused CSS trong WordPress

Có khá nhiều phương pháp để loại bỏ các CSS không sử dụng trên WordPress.

Tuy nhiên để loại bỏ hoàn toàn chúng cũng tương đối phức tạp, nhất là với người mới dùng.

Do cơ chế hoạt động của WordPress nên đôi khi rất khó tìm các file này.

Cho nên dưới đây mình sẽ hướng dẫn 2 phương pháp đơn giản nhất.

Cách 1: Sử dụng WP Rocket để xóa CSS không sử dụng đến

Cách này rất đơn giản phù hợp với các bạn mới sử dụng WordPress hoặc chưa biết nhiều về code.

Plugin này sẽ giúp bạn cải thiện việc phân phối các file CSS, bao gồm cả việc loại bỏ các CSS không sử dụng đến.

Đồng nghĩa với việc website bạn sẽ có tốc độ nhanh hơn và giúp người dùng có trải nghiệm tốt hơn.

Trước tiên bạn cần cài đặt và kích hoạt plugin WP Rocket, nếu chưa biết bạn có thể tham khảo về cách cài đặt plugin trên WordPress.

Sau khi kích hoạt đi đến Settings » WP Rocket và chuyển sang tab File Optimization.

Ở dưới bạn sẽ tích vào ô Optimize CSS delivery.

Tính năng này sẽ tự tạo một file chỉ chứa các CSS cần thiết để hiển thị cho website.

File này sẽ được ưu tiên tải trước khi người dùng truy cập vào trang, sau đó mới tải các file CSS khác ( cái này được gọi là deferred loading).

Bằng cách loại bỏ render blocking CSS ( CSS chặn hiển thị), site bạn sẽ load nhanh hơn so với việc phải load tất cả cùng lúc.

WP Rocket mới có thêm tính năng Remove Unused CSS (Beta) ( cân nhắc trước khi dùng).

Tich xong bạn nhớ bấm lưu thay đổi và plugin sẽ tự động làm nhiệm vụ của mình, và bạn không cần làm gì thêm.

Bạn có thể chỉnh được thời gian xóa bộ nhớ đệm sau khoảng thời gian nhất định.

Sau khi hoàn tất, bạn có thể tiếp tục và kiểm tra lại hiệu suất trang web của mình bằng Google Pagespeed Insights.

Một số tính năng khác trên WP Rocket cải thiện tốc độ website.

Ngoài tính nắng tối ưu File CSS như bạn có thể kết hợp một số tùy chọn khác để cải thiện hiệu quả.

Như ở dưới ảnh là tính năng Minify CSS files và Combine CSS file ( nén và gộp các file CSS thành 1 file duy nhất).

Tính năng này giúp bạn xóa các khoảng trống có trên file CSS và gộp chúng thành một file duy nhất.

Điều này giúp bạn giảm HTTP request và tăng tốc độ website.

Lưu ý đôi khi tính năng này sẽ gây hỏng hoặc vỡ giao diện, hãy tắt nó đi nếu giao diện bạn bị ảnh hưởng. Ngoài ra có thể sử dụng Excluded CSS File để loại bỏ các file CSS không cần nén.

Ngoài CSS thì bạn cũng có thế áp dụng tượng tự với các file JavaScript.

Tính năng Load JavaScripts deferred, sẽ trì hoãn các file gây ảnh hưởng đến quá trình hiện thị khi dùng truy cập.

Sau đó các file đó sẽ được tải sau khi khi website được hiển thị hoàn toàn.

Giống như CSS nếu có lỗi gì trong quá trình sử dụng bạn nhớ tắt tính năng này đi nhé.

Cách 2: Xóa CSS không dùng đến bằng Asset CleanUp

Phương pháp này sẽ khó hơn và thủ công hơn một chút, nhưng nếu áp dụng tốt thì hiệu quả sẽ rất tuyệt vời.

Asset CleanUp là một plugin rất tốt được công đồng đánh giá cao và sử dụng rất đông đảo.

Nó sẽ cho phép bạn xóa bỏ bất kỳ CSS file nào trên site WordPress nào mà bạn muốn.

Tuy nhiên, sẽ hơi phức tạp và bạn sẽ cần phải kiểm tra chức năng và giao diện trang web của mình thật kỹ để tránh bị lỗi.

Trước tiên, bạn cần cài đặt và kích hoạt plugin Access CleanUp, sau đó chuyển sang tab Test Mode.

Điều này sẽ giúp bạn thoải mái cài đặt và thử nghiệm mà không sợ ảnh hưởng đến người dùng đang truy cập website.

Mọi thay đổi sẽ chỉ áp dụng duy nhất cho bạn ( đăng nhập với tư cách admin).

Sau đó vào Asset CleanUp » CSS / JS Manager, bạn có thể remove các file CSS và JavaScript không mong muốn trên từng page.

Đầu tiền sẽ kiểm tra Homepage xem có những CSS và Javascripts nào đang được load.

Một danh sách chi tiết và cụ thể các CSS và JS được load, bao gồm số lượng và nguồn gốc từ đâu.

Ví dụ ở đây mình sẽ kiểm tra trong phần Plugin trước nó bao gồm 11 CSS và JS.

Hãy kiểm tra và xem css hoặc js đó có cần thiết không, tích Unload on this page để loại bỏ chúng.

Ngoài giao diện ở đây bạn cũng có thể thực hiện ngay ở trong post, page editor và các post type khác mà Access Cleanup hỗ trợ.

Ví dụ ở đây mình vào một bài viết bất kỳ ở dưới nó sẽ tự động tìm và nạp toàn bộ các file được load trên post này.

Tương tự bạn hoàn toàn có thể unload CSS và JS không sử dụng đến ngay tại đây.

Đừng quên bấm nút Update, để cập nhật các thay đổi của mình.

Giờ bạn có thể sử dụng Google Page Speed để kiểm tra lại một lần nữa xem còn Unused CSS nào không.

Nếu còn hãy tiếp tục kiểm tra và thực hiện tiếp nhé.

Hy vọng bài viết này giúp bạn biết cách loại bỏ các Unused CSS trên WordPress.

Ngoài ra hãy tham khảo các thủ thuật tăng tốc WordPress toàn tập, nếu bạn chưa biết nhé.