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

Nếu trang web WordPress của bạn sử dụng chủ đề WordPress trả phí hoặc một chủ đề phổ biến từ kho lưu trữ Chủ đề WordPress chính thức, rất có thể chủ đề đang được phát triển cho nhiều trường hợp sử dụng khác nhau. Và bạn có thể chỉ sử dụng một tập hợp nhỏ của tất cả các tính năng có sẵn trong chủ đề.

Trong trường hợp đó, trang web của bạn đang tải rất nhiều CSS không sử dụng không cần thiết để tạo kiểu cho các trang trên trang web của bạn. Ví dụ: chủ đề WordPress bạn đang sử dụng cũng có thể có các kiểu cho các trang WooCommerce nhưng nếu bạn chỉ chạy một blog trên trang web WordPress của mình, thì bạn không sử dụng CSS được bao gồm cho các trang WooCommerce trên trang web của mình và do đó phân phát không được sử dụng CSS cho người dùng.

Nếu bạn đã kiểm tra trang web của mình trên công cụ Google Pagespeed, có thể bạn đã biết rằng trang web của mình có các vấn đề CSS chưa được sử dụng. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách kiểm tra CSS không sử dụng trước tiên, sau đó sử dụng một công cụ miễn phí để xóa CSS không sử dụng khỏi trang web WordPress của bạn.

Cách kiểm tra CSS không sử dụng

Google Chrome DevTools (công cụ bạn thấy khi nhấp vào tùy chọn “Kiểm tra” trong trình đơn ngữ cảnh) có tính năng Phạm vi bên trong tab Nguồn. Bạn có thể sử dụng tùy chọn Phạm vi để tìm CSS và JS không sử dụng mà trang web của bạn tải.

  1. Mở trang web của bạn trong Chrome trên màn hình.
  2. Nhấp chuột phải vào khoảng trắng trống trên trang web của bạn và chọn Quan sát từ menu ngữ cảnh.
  3. Bấm vào Nguồn tab, nhấn Ctrl + Shift + P để mở một cửa sổ lệnh, sau đó nhập phủ sóng và chọn Bắt đầu phạm vi cung cấp thiết bị và tải lại trang từ các lệnh có sẵn.
  4. Trong tab Mức độ phù hợp, hãy nhấp vào Bộ lọc URL và nhập tên miền gốc của trang web của bạn tại đây để chỉ hiển thị các tệp CSS / JS nội bộ.

    Bộ lọc URL tab phạm vi nguồn Chrome

    └ Kiểm tra Các byte không được sử dụng để xem phần trăm dữ liệu đang được tải trong tệp CSS / JS từ chủ đề của bạn.

  5. Nhấp vào tệp CSS để xem CSS không sử dụng (được đánh dấu bằng các thanh màu đỏ) được tải bởi trang web của bạn. CSS đang được sử dụng trên trang hiện tại sẽ được hiển thị bằng các thanh màu xanh lục.

    CSS View Chrome không được sử dụng

Khi bạn đã phân tích tất cả CSS không sử dụng đang được tải trên trang web của mình, đã đến lúc xóa nó. Có một số công cụ miễn phí có sẵn để xóa CSS không sử dụng khỏi các trang web. Dưới đây là một trong những công cụ phổ biến mà tôi đã thử nghiệm và sử dụng cho các dự án của riêng mình.

Sử dụng PurifyCSS trực tuyến để xóa CSS không sử dụng

Thông thường, bạn có thể tìm thấy một plugin cho hầu hết mọi thứ trong WordPress. Nhưng rất tiếc, để xóa CSS không sử dụng, không có một plugin nào khả dụng. Vì vậy, chúng tôi sẽ sử dụng các công cụ thủ công không dành riêng cho wordpress để xóa CSS không sử dụng khỏi trang web của bạn.

PurifyCSS là nhất công cụ thân thiện với người không dành cho nhà phát triển bạn có thể tìm cách xử lý CSS không sử dụng. Công cụ này có giao diện người dùng đơn giản để cho phép người dùng cung cấp URL của trang web HOẶC mã HTML và CSS. Đối với WordPress, chúng tôi sẽ sử dụng tùy chọn URL và cung cấp liên kết đến tất cả các loại trang trên trang web của bạn để cho phép công cụ lấy CSS từ tất cả và tối ưu hóa cho CSS không sử dụng.

Loại bỏ-không sử dụng-CSS-PurifyCSS-Công cụ trực tuyến-trực tuyến

Dưới đây là danh sách nhanh các trang bạn nên đưa vào công cụ:

  • URL trang chủ
  • Nhiều URL trang bài đăng từ mỗi Danh mục trên trang web của bạn

    └ Điều này để đảm bảo rằng CSS được bao gồm cho tất cả các phần tử của bài đăng.

  • Liên hệ, Giới thiệu, Quyền riêng tư và tất cả các loại trang khác nhau mà bạn có thể có trên trang web của mình.
  • Trang lưu trữ, trang Tìm kiếm, Trang tác giả
  • Các trang Loại bài đăng Tùy chỉnh

Mẹo nóng: Tạo bài đăng / trang 'tính năng' với tất cả các phần tử chủ đề mà bạn sử dụng hoặc có thể sử dụng trong tương lai như Bảng, Thư viện hình ảnh, Mã, Trước, Danh sách có thứ tự, Danh sách không có thứ tự, Biểu mẫu, Tab, Khối sắp xếp, Khối Gutenberg mà bạn thường sử dụng , Vân vân.

Sử dụng URL bài đăng 'tính năng' này trong công cụ PurifyCSS Online để đảm bảo rằng CSS cho các phần tử thường được sử dụng được bao gồm.

Đánh vào Dọn dẹp CSS khi bạn đã thêm tất cả các loại URL có liên quan từ trang web của mình vào công cụ PurifyCSS Online.

Sao chép CSS mới được tạo bởi công cụ và sử dụng nó trên trang web của bạn. Hãy chắc chắn rằng bạn sao lưu style.css ban đầu và các tệp CSS khác trong chủ đề của bạn trước khi thay thế CSS mới được tạo bởi PurifyCSS.

Mẹo: Bạn có thể sử dụng Trình chỉnh sửa chủ đề WordPress tích hợp sẵn để chỉnh sửa tệp CSS của chủ đề hoặc bạn có thể sử dụng chương trình FTP / SFTP để kết nối với máy chủ và thoải mái chỉnh sửa tệp bằng trình chỉnh sửa Notepad.