Cách xóa CSS và JS không sử dụng trong WordPress (Rất dễ)

Có nhiều CSS và JS chưa sử dụng trong trang web của bạn có thể làm giảm thời gian tải trang web của bạn. Nếu bạn chạy trang web của mình thông qua công cụ kiểm tra tốc độ như là Thông tin chi tiết về Google, bạn có thể nhận được cảnh báo xóa CSS không sử dụng.

Rất may là có một cách rất dễ để thực hiện điều đó. Bạn không cần phải có bất kỳ kiến ​​thức kỹ thuật đặc biệt nào để có thể xóa CSS và JS không sử dụng khỏi trang WordPress của mình.

Điều này là do một plugin tuyệt vời được gọi là Dọn dẹp nội dung: Tăng tốc độ trang. Với plugin này, việc xóa CSS không sử dụng dễ dàng như nhấp vào một vài nút. Ngoài ra, nếu bạn không ngại chi một vài đô la một năm, với WP Rocket, có một nút CSS không sử dụng đã bị xóa, chỉ cần kích hoạt nó và plugin sẽ tự động xóa tất cả CSS không sử dụng.

Thanh toán: Top 7 dịch vụ lưu trữ WordPress trên nền tảng đám mây Google được quản lý

CSS chưa sử dụng là gì?

Unused CSS là một tệp CSS có trong một trang nhưng hầu như không cần thiết để tải trang. Khi khách truy cập mở một trang web, trình duyệt thường phải tải xuống, phân tích cú pháp và xử lý tất cả các bảng định kiểu bên ngoài trên trang đã truy cập trước khi có thể hiển thị nội dung trang cho khách truy cập. Nếu bất kỳ CSS nào tồn tại trên một trang như vậy mà không được sử dụng trên trang đó, trình duyệt sẽ lãng phí thời gian vào đó.

Một ví dụ kinh điển về điều này là hầu hết các plugin biểu mẫu liên hệ được sử dụng. Các plugin này mặc dù chủ yếu chỉ được sử dụng trên trang Liên hệ với chúng tôi, nhưng lại tải CSS của nó trên toàn bộ trang web. Không quan trọng nếu đó là trang chủ nơi nó không được sử dụng, CSS sẽ được tải.

Nếu có quá nhiều CSS không cần thiết nhưng lại tải và làm chậm thời gian đọc và hiển thị trang của trình duyệt thì điều này có thể trở thành vấn đề.

Ngoài các plugin, các nhà phát triển chủ đề viết rất nhiều thứ vào style.css mà hầu như không cần thiết. Nhưng dù cần hay không, chúng sẽ tải bất cứ khi nào trang web của bạn được tải!

Một đoạn CSS không sử dụng có thể không phải là vấn đề nhưng nhiều đoạn CSS không sử dụng có thể ảnh hưởng đến thời gian tải trang web của bạn.

Thanh toán: Top 10 theme WordPress nhanh nhất và tốt nhất 

Cách xác định CSS chưa sử dụng

Việc tìm kiếm CSS và JS chưa sử dụng là một việc rất dễ dàng. Có hai cách tiếp cận mà tôi sẽ đề xuất.

Một là phân tích trang web của bạn thông qua Google PageSpeed ​​Insight. Kiểm tra xem trang web của bạn có vấn đề xóa CSS không sử dụng không. Nhấp vào đó và bạn sẽ có thể xác định thành phần nào của trang web chịu trách nhiệm cho vấn đề đó.

Bạn có thể thấy ở trên có một trường hợp CSS chưa sử dụng được ghi lại. Tôi có thể thấy plugin và vị trí của CSS chưa sử dụng bằng cách xem xét điều này.

Tùy chọn thứ hai là có được phân tích chi tiết hơn. Bạn có thể thực hiện điều này bằng cách sử dụng Chrome Dev Tools.

Trên trình duyệt Chrome của bạn, hãy mở Chrome Dev Tools sau đó đi đến vùng phủ sóng. Sau đó nhấp vào nút tải lại bên trong vùng phủ sóng. Bạn có thể tìm thấy hướng dẫn toàn diện về cách thực hiện việc này tại công cụ Google Developers.

Tùy chọn khác là sử dụng jitbit để quét các bộ chọn CSS chưa sử dụng. Bạn cũng có thể dùng Thanh lọcCSS để tìm CSS chưa sử dụng

Cách xóa CSS không sử dụng

Thực hiện theo các bước sau để xóa CSS không sử dụng khỏi WordPress:

1. Cài đặt Asset CleanUp

Vào plugin rồi Add new. Sau đó bạn nhập “Asset CleanUp” vào hộp tìm kiếm của trang Add new plugin. Cài đặt và kích hoạt plugin.

2. Vào cài đặt plugin

Để truy cập cài đặt plugin, từ bảng điều khiển WordPress, nhấp vào cài đặt rồi nhấp vào Asset CleanUp.

3. Gỡ bỏ CSS và JS không mong muốn

Trong phần cài đặt plugin, bạn có thể cần phải chấp nhận rằng bạn biết cách plugin hoạt động dưới vòi tách mỡ trước khi bắt đầu.

Để dỡ bỏ CSS và JS, hãy nhấp vào trình quản lý CSS và JSS. Từ đó, bạn có thể xóa bất kỳ CSS và JS nào mà bạn không cần. Bạn có thể xóa nó chỉ đối với trang chủ, đối với toàn bộ trang web hoặc đối với một URL cụ thể. Bạn cũng có thể xóa đối với bài đăng, trang hoặc danh mục.

Một ví dụ là dỡ bỏ bất kỳ biểu mẫu liên hệ nào khỏi việc tải cho toàn bộ trang web ngoại trừ trang liên hệ với chúng tôi

Hãy dành thời gian và gỡ bỏ mọi CSS và JS mà bạn biết là không cần thiết. Đảm bảo rằng bạn kiểm tra trang web của mình sau khi hoàn tất để đảm bảo mọi thứ đều ổn.

Xóa các plugin CSS WordPress không sử dụng

Sau đây là một số plugin bạn có thể sử dụng để xóa CSS không sử dụng trong WordpPress:

1. Asset CleanUp: Tăng tốc độ trang

Dọn dẹp nội dung: Tăng tốc độ trang giúp dễ dàng xóa CSS và JS không sử dụng trong WordPress ngay cả với người mới bắt đầu. Tất cả những gì bạn phải làm là hủy kích hoạt một CSS cụ thể không cần thiết cho một trang cụ thể.

Bạn cũng có thể hủy kích hoạt riêng cho từng bài đăng. Với phiên bản cao cấp, bạn có thể hủy kích hoạt CSS/JS không sử dụng bằng plugin.

Plugin này là một plugin hiệu suất hoàn chỉnh với nhiều tùy chọn khác để tăng tốc WordPress. Xóa CSS/JS không sử dụng chỉ là một phần của nó.

Trong bài viết này, tôi sử dụng plugin này có hướng dẫn.

2. WP Rocket

WP Rocket là plugin hiệu suất cao cấp số một của WordPress. Nếu bạn là người mới, ý tôi là nếu bạn chưa có kinh nghiệm hoặc chưa quen với WordPress, thì WP Rocket là cách dễ nhất để xóa CSS không sử dụng.

Bạn cần phải mua plugin, sau khi thực hiện xong, bạn có thể tải xuống từ tài khoản của mình hoặc kiểm tra email để biết liên kết tải xuống.

Cài đặt plugin thông qua Dashboard>plugin>Thêm mới>Tải lên.

Chỉ cần điều hướng đến cài đặt WP Rocket sau đó nhấp vào tab “Tối ưu hóa tệp”. Sau đó cuộn xuống và bạn sẽ thấy “Xóa CSS không sử dụng”, tích vào ô, lưu và xóa bộ nhớ cache.

3. Perfmatters

Nước hoa là một plugin cao cấp được phát triển bởi Brian Jackson và anh trai của ông, Brett Jackson. Plugin này có thể giúp loại bỏ CSS không sử dụng rất dễ dàng.

Đầu tiên, bạn cần mua plugin. Sau đó cài đặt. Kích hoạt giấy phép. Khi bạn điều hướng đến cài đặt, hãy bật trình quản lý tập lệnh.

Chỉ cần vào bất kỳ trang hoặc bài đăng nào trên trang web của bạn, bạn sẽ thấy biểu tượng trình quản lý tập lệnh trên menu bảng điều khiển, hãy nhấp vào biểu tượng đó. Bạn sẽ có thể xóa CSS và JS không sử dụng khỏi trang hoặc toàn bộ.

Plugin này là một plugin hiệu suất, đi kèm với nhiều tùy chọn khác để tăng tốc WordPress. Xóa CSS/JS không sử dụng là một phần của nó.

4. Trình quản lý CSS JS

Trình quản lý CSS JS có thể xóa CSS hoặc JS khỏi thiết bị di động hoặc máy tính để bàn. Tùy thuộc vào mục đích bạn muốn đạt được.

Plugin này cũng có thể trì hoãn việc tải các tệp CSS hoặc JS.

Kết luận

Nếu bạn có nhiều CSS và JS chưa sử dụng, bạn sẽ nhận thấy sự cải thiện đáng kể về tốc độ và hiệu suất.

Có thể không thể xóa tất cả các CSS chưa sử dụng nhưng bạn có thể giảm thiểu chúng xuống mức tối thiểu. Tôi sử dụng Asset CleanUp để xóa CSS chưa sử dụng cho Mục tiêuXu hướng.

Hãy nhớ, hãy tối ưu hóa nhưng đừng quá ám ảnh với nó, trừ khi bạn muốn trang web của mình trông giống như trang web nhanh nhất thế giới.

Ngoài ra đọc:

Cách loại bỏ các tài nguyên chặn hiển thị trong WordPress

Làm thế nào để làm cho WordPress rất nhanh

Làm thế nào để thu hút lưu lượng truy cập vào blog của bạn