Mỗi chủ đề và plugin bạn cài đặt có thể thêm CSS không cần thiết vào trang web WordPress của bạn. Điều này có thể dẫn đến thời gian tải chậm hơn. Thông thường, các biểu định kiểu này không cần thiết để hiển thị nội dung trên một trang, nhưng chúng vẫn hiện diện trong mã. Do đó, bạn có thể đang tìm kiếm một cách dễ dàng để xóa CSS không sử dụng trong WordPress.
May mắn thay, quá trình này đơn giản hơn bạn nghĩ.Khi bạn đã xác định được mã không cần thiết trên trang web của mình, bạn có thể sử dụng plugin để xóa mã đó và cải thiện tốc độ trang web của mình.
Trong bài đăng này, chúng ta sẽ xem xét kỹ hơn về CSS không được sử dụng và lý do tại sao bạn nên loại bỏ nó. Chúng tôi cũng sẽ chỉ cho bạn cách xác định mã này trên trang web của bạn. Sau đó, chúng tôi sẽ hướng dẫn bạn hai cách hiệu quả để loại bỏ nó .
=> Xem thêm: 5 Plugin Tab WooCommerce Trả Phí Tốt Nhất 2023
Tại sao bạn nên xóa CSS không sử dụng
CSS không sử dụng là mã không thực sự cần thiết để tải trang. Khi nói đến WordPress, nó thường được tìm thấy trong các chủ đề và plugin mà bạn cài đặt trên trang web của mình.
Sau đó, khi người dùng truy cập trang web của bạn, trình duyệt sẽ vẫn cần tải xuống và hiển thị CSS không sử dụng này. Điều này có thể khiến thời gian tải lâu hơn, điều này sẽ có tác động tiêu cực đến hiệu suất tổng thể của trang web của bạn.
Trên thực tế, CSS không được sử dụng có thể dẫn đến điểm số Largest Contentful Paint (LCP) kém trong Core Web Vitals :
Largest Contentful Paint là số liệu đo thời gian cần thiết để một trang tải đầy đủ mục lớn nhất trên màn hình. Đây thường là một yếu tố trực quan, chẳng hạn như hình ảnh anh hùng.
Nói một cách đơn giản, mã CSS không được sử dụng sẽ làm tăng thêm sự phình to cho trang của bạn. Do đó, sẽ mất nhiều thời gian hơn để tải nội dung như hình ảnh.
Nếu trang web của bạn chậm, bạn có thể bỏ lỡ các chuyển đổi tiềm năng. Ngoài ra, nó có thể dẫn đến thứ hạng thấp hơn trong kết quả tìm kiếm. Do đó, điều quan trọng là bạn phải thực hiện các biện pháp thích hợp để xóa CSS không sử dụng và tăng tốc trang web của mình .
Cách xác định CSS không sử dụng trên trang web của bạn
Tin tốt là việc xác định CSS không sử dụng trên trang web của bạn là một nhiệm vụ dễ dàng. Bạn có thể bắt đầu bằng cách chạy thử nghiệm hiệu suất trên PageSpeed Insights . Tất cả những gì bạn phải làm là nhập URL của mình và nhấp vào Phân tích :
Khi thử nghiệm đã sẵn sàng, hãy điều hướng đến phần Cơ hội và tìm tab Giảm CSS không sử dụng . Nếu bạn nhấp vào nó, bạn sẽ thấy thêm thông tin về mã này:
Nó cũng sẽ cho bạn biết những tệp CSS và plugin nào đang ảnh hưởng đến thời gian tải của bạn:
Hình vuông màu cam cho Xóa CSS không sử dụng có nghĩa là “Cần cải thiện”, trong khi hình tam giác màu đỏ biểu thị điểm rất kém. Nếu bạn không thể thấy phần này trong kết quả kiểm tra của mình, điều đó có nghĩa là bạn không gặp bất kỳ sự cố đáng kể nào về CSS trên trang web của mình ( hoặc ít nhất là trên trang cụ thể mà bạn đã kiểm tra – bạn có thể muốn kiểm tra các trang khác để đảm bảo ).
=> Xem thêm: Cách thay đổi font chữ trong WordPress
Cách xóa CSS không sử dụng trong WordPress
Nếu PageSpeed Insights đã gắn cờ CSS không sử dụng trên trang web của bạn, thì bạn sẽ muốn xóa CSS đó để tối ưu hóa hiệu suất trang web của mình.
Bạn có thể làm điều này bằng cách sử dụng một plugin WordPress thực hiện tất cả các công việc nặng nhọc cho bạn. Ngoài ra, bạn có thể sử dụng một plugin khác sẽ yêu cầu một số công việc thủ công từ phía bạn, nhưng như một phần thưởng, bạn sẽ có nhiều quyền kiểm soát hơn đối với quy trình. Trong phần này, chúng tôi sẽ hướng dẫn bạn qua cả hai phương pháp, bắt đầu với phương pháp dễ dàng hơn.
Phương pháp 1: Xóa CSS không sử dụng bằng Debloat
Như chúng ta đã thảo luận, CSS “không sử dụng” là không cần thiết. Do đó, việc xóa các tệp này sẽ không có bất kỳ tác động nào đến thiết kế trang web của bạn.
Tuy nhiên, nếu bạn vô tình xóa sai mã, bạn có thể làm hỏng trang web của mình. Vì vậy, nếu bạn không quen viết mã, có thể bạn sẽ muốn sử dụng plugin để xóa CSS không sử dụng.
Với ý nghĩ đó, chúng tôi khuyên dùng Debloat để xóa mã CSS không sử dụng. Đó là một plugin tối ưu hóa miễn phí cũng có thể giúp bạn cải thiện Các chỉ số quan trọng về trang web cốt lõi của mình bằng cách trì hoãn các tài nguyên chặn kết xuất, giảm thiểu mã, v.v.
Để bắt đầu, bạn cần cài đặt và kích hoạt plugin trên trang web của mình. Sau đó, vào Settings > Debloat: Optimize và chọn tab Optimize CSS :
Ở trên cùng, bạn sẽ thấy một thông báo khuyên bạn nên sử dụng plugin bộ nhớ đệm nếu bạn định xóa CSS không sử dụng. Nếu điều này khiến bạn quan tâm, bạn có thể cân nhắc dùng thử một công cụ miễn phí như W3 Total Cache hoặc WP-Optimize.
Tiếp theo, cuộn xuống cuối trang và đánh dấu vào ô Remove Unused CSS :
Điều này sẽ tiết lộ một số tùy chọn khác. Tuy nhiên, nếu bạn không thoải mái với việc xử lý mã, đừng lo lắng, bạn chỉ cần chọn một vài cài đặt.
Bạn sẽ muốn đánh dấu vào ô Enable for Plugins CSS và Enable for Theme CSS :
Sau đó, cuộn xuống Remove CSS On và chọn hộp cho All Pages :
Khi bạn đã sẵn sàng, hãy nhấp vào Lưu thay đổi . Sau đó, plugin sẽ xóa CSS không sử dụng trong các tệp plugin và chủ đề của bạn.
Lưu ý rằng phương pháp này không chính xác 100% và một số mã không sử dụng có thể rơi vào vết nứt. Tuy nhiên, nếu bạn chạy một bài kiểm tra tốc độ khác sau khi bật các cài đặt này, bạn sẽ thấy một số cải thiện đáng kể về hiệu suất trang web của mình.
Nếu bạn muốn sử dụng một plugin mạnh mẽ hơn, bạn có thể xem xét WP Rocket . Công cụ cao cấp này đi kèm với các tính năng tối ưu hóa, bao gồm bộ nhớ đệm của trang và trình duyệt, nén GZIP, thu nhỏ mã và tải chậm . Nó cũng có thể xóa CSS không sử dụng khỏi trang web của bạn.
=> Xem thêm: Cách xây dựng blog Wix tốt như WordPress
Phương pháp 2: Xóa CSS không sử dụng bằng Asset CleanUp
Trong phương pháp đầu tiên, chúng tôi đã sử dụng plugin tự động xóa mã không cần thiết khỏi trang web của bạn. Phương pháp này rất tiện lợi vì tất cả những gì bạn cần làm là kích hoạt một vài cài đặt.
Tuy nhiên, bạn có thể đang tìm kiếm một phương pháp cho phép bạn kiểm soát nhiều hơn đối với những tệp cần xóa và những tệp nào cần giữ lại. Nếu đúng như vậy, Asset CleanUp có thể là lựa chọn tốt hơn cho bạn. Plugin này cho phép bạn chọn và xóa các tệp CSS không mong muốn trên cơ sở từng trang.
Lưu ý rằng phương pháp này có thể hơi tốn thời gian và có thể yêu cầu một số kiến thức kỹ thuật. Ngoài ra, bạn sẽ cần liên tục kiểm tra và làm mới mọi trang để đảm bảo rằng những thay đổi của bạn không ảnh hưởng đến thiết kế và chức năng của trang web.
Bước 1: Cài đặt plugin Dọn dẹp tài sản và bật chế độ kiểm tra
Nếu bạn vẫn muốn thử phương pháp này, hãy tiếp tục và cài đặt Asset CleanUp trên trang web của bạn. Sau đó, chuyển đến Dọn dẹp nội dung > Cài đặt . Sau đó, chọn Chế độ kiểm tra từ menu bên và sử dụng công tắc bật tắt để bật tính năng này:
Bằng cách này, bất kỳ thay đổi nào bạn thực hiện đối với trang web của mình sẽ không ảnh hưởng đến trải nghiệm người dùng ở giao diện người dùng. Bạn có thể xóa các tệp CSS không sử dụng trong một môi trường an toàn và tắt chế độ kiểm tra khi bạn đã chắc chắn rằng mọi thứ đang hoạt động bình thường.
Bước 2: Dỡ bỏ các tệp CSS không sử dụng trên mỗi trang
Bây giờ, hãy nhấp vào tab Trình quản lý CSS & JS . Tại đây, bạn có thể xóa mọi tệp không mong muốn khỏi trang web của mình, bắt đầu với trang chủ:
Nếu cuộn xuống, bạn sẽ thấy danh sách tất cả các tệp đã tải trên trang này:
Để xóa tệp CSS, bạn chỉ cần sử dụng công tắc bật/tắt cho Unload trên trang này :
Asset CleanUp sẽ cho bạn biết nếu có bất kỳ tệp “con” nào phụ thuộc vào tệp này và tệp đó có thể bị ảnh hưởng bởi việc xóa tệp đó. Bạn có thể đánh dấu vào ô Bỏ qua quy tắc phụ thuộc và tiếp tục tải “các tệp con” để duy trì các tệp này.
Xin lưu ý rằng nếu không chắc chắn nên xóa tệp CSS nào, bạn có thể tham khảo kết quả của mình trong Thông tin chi tiết về tốc độ trang. Bạn sẽ thấy URL của các tệp này trong phần Giảm CSS không sử dụng :
Sau đó, bạn có thể tìm chúng trong Dọn dẹp nội dung. Nếu bạn điều hướng đến tab Trang , bạn có thể tra cứu một trang cụ thể trên trang web của mình và xem lại các tệp CSS được tải trên trang đó:
Khi bạn chọn một tệp bạn muốn hủy tải, bạn cần nhấp vào Cập nhật để lưu những thay đổi này.
Bước 3: Kiểm tra trang web của bạn
Cuối cùng, chúng tôi khuyên bạn nên kiểm tra trang web của mình sau mỗi lần xóa tệp để đảm bảo rằng trang web hoạt động bình thường. Hãy nhớ rằng bạn cần phải đăng nhập vào bảng điều khiển quản trị viên WordPress của mình để xem những thay đổi này. Nếu bạn truy cập trang web với tư cách là khách truy cập (nghĩa là người dùng đã đăng xuất), bạn sẽ không thể phát hiện bất kỳ sự cố nào trên trang của mình vì bạn đã bật chế độ kiểm tra.
Cũng cần lưu ý rằng, miễn là bạn đã bật chế độ kiểm tra, bạn sẽ không thấy bất kỳ cải tiến nào trong Thông tin chi tiết về tốc độ trang. Kết quả sẽ vẫn hiển thị các tệp CSS không sử dụng.
Khi bạn chắc chắn rằng các tệp đã xóa không ảnh hưởng đến trang web của mình, bạn có thể tiếp tục và tắt chế độ kiểm tra. Sau đó, hãy chạy kiểm tra tốc độ trên PageSpeed Insights. Tại thời điểm này, các tệp CSS đã xóa sẽ không xuất hiện trong kết quả.
Các plugin WordPress cao cấp để loại bỏ CSS không sử dụng
Mặc dù cả hai công cụ trên đều miễn phí nhưng bạn cũng có thể tìm thấy một số plugin WordPress thực sự đơn giản để xóa CSS không sử dụng nếu bạn sẵn sàng trả tiền.
Hai trong số các lựa chọn tốt nhất là WP Rocket (từ $59) và FlyingPress (từ $60).
Với WP Rocket, bạn có được tính năng loại bỏ CSS không sử dụng bằng một cú nhấp chuột để quét toàn bộ trang web của bạn và loại bỏ CSS không sử dụng trên cơ sở từng trang.
FlyingPress cũng cung cấp tính năng loại bỏ CSS không sử dụng bằng một cú nhấp chuột tương tự, với các tùy chọn để tải CSS không sử dụng theo những cách tối ưu hơn hoặc loại bỏ hoàn toàn.
Cả hai công cụ đều dựa vào việc xử lý mã trang web của bạn trên các máy chủ của riêng chúng, đó là cách chúng có thể cung cấp phương pháp xóa từng trang đơn giản như vậy.