Tôi có thể xóa các tệp CSS không?

CSS không sử dụng là bất kỳ mã CSS nào được thêm vào bởi chủ đề hoặc plugin WordPress của bạn mà bạn không thực sự cần. Xóa mã CSS này giúp cải thiện hiệu suất và trải nghiệm người dùng của WordPress

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng xóa CSS không sử dụng trong WordPress mà không làm hỏng trang web của bạn

CSS không sử dụng trong WordPress là gì?

Unused CSS trong WordPress là mã CSS tải trên trang web của bạn nhưng không thực sự cần thiết để hiển thị trang

Mã bổ sung có thể khiến trình duyệt của khách truy cập mất nhiều thời gian hơn để hiển thị trang, điều này tạo ra trải nghiệm người dùng không tốt. Thời gian tải chậm hơn thậm chí có thể ảnh hưởng đến thứ hạng tìm kiếm của bạn, dẫn đến lưu lượng truy cập vào trang web của bạn ít hơn

Bạn có thể thấy mã CSS không được sử dụng đang ảnh hưởng đến trang web của mình như thế nào bằng cách sử dụng Google Pagespeed Insights. Nó sẽ hiển thị cho bạn một phần có tiêu đề 'Xóa CSS không sử dụng' với thông tin chi tiết về tệp CSS nào đang ảnh hưởng đến thời gian tải của bạn

Tại sao CSS không sử dụng được thêm vào WordPress?

CSS được sử dụng để tạo kiểu cho trang web WordPress của bạn. Chủ đề WordPress của bạn bao gồm CSS, với hầu hết trong số đó được bao gồm trong một kiểu duy nhất. tập tin css

Ngoài CSS của chủ đề, các plugin WordPress của bạn cũng sẽ tải CSS của riêng chúng. Chẳng hạn, WooC Commerce sẽ tải CSS để hiển thị sản phẩm, plugin trình tạo trang sẽ thêm CSS riêng để hiển thị các trang tùy chỉnh của bạn và plugin trình tạo biểu mẫu sẽ bao gồm CSS để tạo kiểu cho biểu mẫu của bạn

Sau đó, bạn có phông chữ web, phông chữ biểu tượng và các yếu tố khác cũng sẽ cần thêm tệp CSS của riêng chúng

Thông thường, các tệp này rất nhỏ và tải nhanh. Tuy nhiên, nếu trang web WordPress của bạn có nhiều chúng, thì các hiệu ứng có thể tăng lên và có tác động rõ rệt đến tốc độ trang web của bạn

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

Có một số cách khác nhau để bạn có thể giảm CSS không sử dụng trên trang web WordPress của mình

Tuy nhiên, sẽ khá khó khăn để loại bỏ hoàn toàn tất cả CSS không sử dụng trong WordPress. Do cách thức hoạt động ẩn của WordPress, một số CSS không sử dụng có thể khó tìm và xóa

Như đã nói, chúng tôi sẽ chỉ cho bạn hai phương pháp để xóa CSS không sử dụng và bạn có thể chọn phương pháp phù hợp nhất với mình

Phương pháp 1. Xóa CSS không sử dụng trong WordPress bằng WP Rocket

Phương pháp này dễ dàng hơn và được khuyên dùng cho người mới bắt đầu. Nó cải thiện đáng kể việc phân phối tổng thể các tệp CSS trên trang web WordPress của bạn, bao gồm loại bỏ hầu hết các CSS không sử dụng

Chúng tôi nghĩ rằng đó là giải pháp tốt nhất cho người mới bắt đầu vì nó dễ dàng hơn và đạt được mục tiêu chính là cung cấp trải nghiệm tốt hơn cho người dùng của bạn. Điều này có nghĩa là trang web của bạn tải nhanh trên các công cụ kiểm tra tốc độ và người dùng của bạn cũng cảm thấy nhanh

Đầu tiên, bạn cần cài đặt và kích hoạt plugin WP Rocket. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress

Sau khi kích hoạt, bạn cần truy cập trang Cài đặt »WP Rocket và chuyển sang tab ‘Tối ưu hóa tệp’

Tiếp theo, bạn cần cuộn xuống phần Tệp CSS và sau đó chọn hộp bên cạnh tùy chọn 'Xóa CSS không sử dụng (Beta)'

Vì tính năng này của WP Rocket đang trong giai đoạn thử nghiệm nên nó sẽ hỏi lại bạn có muốn bật cài đặt không. Bạn có thể tiếp tục và nhấp vào nút 'Kích hoạt Xóa CSS không sử dụng'

Sau khi tùy chọn 'Xóa CSS không sử dụng' được kích hoạt, bạn có thể chỉ định tên tệp CSS, ID hoặc lớp không nên xóa trong hộp 'Danh sách an toàn CSS'

Tiếp theo, bạn sẽ cần lưu các thay đổi của mình bằng cách cuộn xuống và nhấp vào nút Lưu thay đổi. Khi bạn làm điều đó, WP Rocket sẽ bắt đầu xử lý các tệp CSS của bạn và hiển thị cho bạn một thanh tiến trình

Sẽ mất vài phút để plugin xử lý và xóa các tệp CSS không sử dụng khỏi trang web của bạn

Bạn sẽ thấy thông báo 'Xóa CSS không sử dụng đã hoàn tất. ’ thông báo khi plugin đã hoàn tất quá trình

Bây giờ, hãy truy cập công cụ Google Pagespeed Insights và kiểm tra hiệu suất trang web của bạn

Loại bỏ CSS chặn kết xuất cho WordPress

WP Rocket cho phép bạn tối ưu hóa tệp CSS của mình và xóa CSS chặn hiển thị khỏi trang web của bạn

Để bắt đầu, bạn có thể điều hướng đến tab ‘Tối ưu hóa tệp’ trong WP Rocket. Từ đây, cuộn xuống phần Tệp CSS rồi chọn hộp bên cạnh tùy chọn 'Tối ưu hóa phân phối CSS'

Tùy chọn này tạo một tệp CSS chỉ chứa mã CSS cần thiết để hiển thị phần hiển thị trên trang web của bạn. Nó tải tệp đó trước, hiển thị trang cho khách truy cập của bạn, sau đó tải các tệp CSS khác bằng công nghệ gọi là tải chậm

Bằng cách loại bỏ CSS chặn kết xuất này, người dùng có thể xem trang web của bạn nhanh hơn nhiều so với khi bạn phải tải tất cả các tệp CSS trước khi trang được hiển thị

Sau khi bật tùy chọn 'Tối ưu hóa phân phối CSS', hãy nhấp vào nút 'Lưu thay đổi' và đợi WP Rocket tạo tệp CSS cần thiết cho tất cả các bài đăng và trang của bạn. Nó cũng sẽ tự động xóa bộ nhớ cache cho trang web của bạn

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 cách sử dụng Google Pagespeed Insights

Tinh chỉnh phân phối tệp bổ sung để tăng hiệu suất

WP Rocket cũng cho phép bạn xóa các chuỗi truy vấn khỏi các tệp tĩnh, kết hợp các tệp Google Fonts và thu nhỏ HTML. Tất cả những chỉnh sửa này đều bổ sung những cải tiến nhỏ cho tốc độ tổng thể của bạn, giúp tăng thêm trải nghiệm tải nhanh hơn cho khách truy cập của bạn

Bạn cũng sẽ thấy các tùy chọn để thu nhỏ và kết hợp các tệp CSS. Các tùy chọn này sẽ giảm các yêu cầu HTTP và tăng thêm tốc độ cho bạn

Tuy nhiên, bạn sẽ cần kiểm tra cẩn thận trang web của mình để đảm bảo rằng không có gì bị hỏng sau khi bật các cài đặt này

Ngoài ra, bạn có thể áp dụng tối ưu hóa tương tự cho các tệp JavaScript trên trang web của mình. Bạn có thể thu nhỏ và kết hợp chúng để phục vụ dưới dạng một tệp duy nhất và trì hoãn tải cho các tệp JavaScript để cải thiện hiệu suất

Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách thiết lập đúng cách WP Rocket trong WordPress

Phương pháp 2. Xóa CSS không sử dụng trong WordPress bằng cách sử dụng Asset CleanUp

Phương pháp này hơi tiên tiến nhưng cực kỳ mạnh mẽ và sẽ cho phép bạn dễ dàng xóa mọi CSS không sử dụng khỏi bất kỳ trang nào trên trang web WordPress của mình

Tuy nhiên, nó hơi phức tạp và bạn sẽ cần kiểm tra kỹ lưỡng chức năng và giao diện trang web của mình để đảm bảo không có gì bị hỏng

Trước tiên, bạn cần cài đặt và kích hoạt plugin Dọn dẹp tài sản. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress

Sau khi kích hoạt, bạn cần truy cập trang Dọn dẹp nội dung » Cài đặt và chuyển sang tab Chế độ kiểm tra. Từ đây, bạn cần bật tùy chọn ‘Enable Test Mode’

Điều này cho phép bạn thử các cài đặt khác nhau và kiểm tra chúng với tư cách quản trị viên mà không ảnh hưởng đến khách truy cập trang web

Sau đó, bạn cần truy cập trang Dọn dẹp nội dung » Trình quản lý CSS/JS. Từ đây, bạn có thể hủy tải các tệp CSS và JavaScript không mong muốn trên cơ sở từng trang

Trước tiên, nó sẽ tìm nạp trang chủ của bạn và sẽ hiển thị cho bạn tất cả các tệp CSS và JavaScript được tải trên trang đó

Bạn cần cuộn xuống và xem lại các tệp đã tải. Nếu bạn thấy một tệp mà bạn không cần, thì bạn có thể hủy tải tệp đó cho trang, loại bài đăng hoặc toàn trang web cụ thể đó

Plugin cũng cho phép bạn chọn các bài đăng hoặc trang cụ thể từ đây hoặc bạn có thể truy cập các tùy chọn tương tự bằng cách chỉnh sửa bài đăng hoặc trang như bình thường

Trên màn hình chỉnh sửa bài đăng, bạn sẽ thấy hộp Dọn dẹp nội dung ngay bên dưới trình chỉnh sửa bài đăng

Plugin sẽ tự động tìm nạp và liệt kê tất cả các tệp và nội dung được tải khi khách truy cập xem trang này trên trang web của bạn. Sau đó, bạn có thể chỉ cần hủy tải các tệp CSS hoặc JavaScript không sử dụng mà bạn không cần trên trang đó

Quan trọng. Đừng quên kiểm tra trang web của bạn sau khi xóa mọi CSS hoặc JavaScript không sử dụng để đảm bảo rằng mọi thứ đều hoạt động tốt

Khi bạn đã hoàn tất việc tải và xóa các tệp CSS và JavaScript không sử dụng, bạn có thể quay lại trang cài đặt của plugin và tắt 'Chế độ kiểm tra'

Đừng quên nhấp vào nút Cập nhật tất cả cài đặt để lưu trữ các thay đổi của bạn

Giờ đây, bạn có thể kiểm tra trang web của mình bằng Google Pagespeed Insights để xem sự thay đổi trong thông báo CSS không được sử dụng

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng xóa CSS không sử dụng trong WordPress. Bạn cũng có thể muốn làm theo hướng dẫn đầy đủ của chúng tôi về chi phí để xây dựng một trang web và xem danh sách các dịch vụ lưu trữ WordPress được quản lý tốt nhất của chúng tôi

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook

Làm cách nào để xóa tệp CSS?

Các tệp CSS được sử dụng để làm gì?

Các tệp CSS có thể độc hại không?

Tôi có nên có các tệp CSS riêng biệt không?