Cách xóa CSS không sử dụng trong WordPress
Bạn có muốn xóa CSS không sử dụng trong WordPress để trang web của bạn tải nhanh hơn không?
CSS không được sử dụng là bất kỳ mã CSS nào được thêm vào bởi giao diện . Xóa mã CSS này sẽ 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, mình sẽ hướng dẫn bạn cách dễ dàng loại bỏ CSS không sử dụng trong WordPress mà không làm hỏng trang web của bạn.
CSS không được sử dụng trong WordPress là gì?
CSS không được sử dụng 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 để .
Mã bổ sung có thể làm cho 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 kết quả tìm kiếm cao cấp của bạn, dẫn đến việc 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 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ề các tệp CSS đang ảnh hưởng đến thời gian tải của bạn.
Tại sao CSS không được sử dụng và được thêm vào WordPress?
CSS được sử dụng để tạo kiểu cho giao diện trang web WordPress của bạn. giao diện WordPress của bạn bao gồm CSS, với hầu hết nó được bao gồm trong một kiểu tệp. css duy nhất.
Đỡ CSS của giao diện, plugin WordPress của bạn cũng sẽ tải CSS của riêng chúng tôi. Ví dụ. WooCommerce sẽ tải CSS để hiển thị sản phẩm, plugin chỉnh sửa trang sẽ bổ sung CSS của riêng nó để hiển thị các tùy chọn trang của bạn và plugin 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ữ chữ biểu tượng và các yếu tố khác cũng cần thêm tệp CSS của riêng họ.
Thông thường, những tệp này rất nhỏ và tải nhanh chóng. Tuy nhiên, nếu trang web WordPress của bạn có nhiều trong số chúng, thì các hiệu ứng có thể tăng lên và có tác động đáng kể đến tốc độ trang web của bạn.
Làm thế nào để loại bỏ CSS không sử dụng trong WordPress?
Có một số cách khác nhau để bạn có thể giảm bớt CSS không sử dụng trên trang web .
Tuy nhiên, sẽ là một nhiệm vụ khá khó khăn để loại bỏ hoàn toàn tất cả các CSS không sử dụng trong WordPress. Do cách thức hoạt động của WordPress, một số CSS không sử dụng có thể khó tìm và loại bỏ.
Điều đó nói rằng, Mình sẽ chỉ chọn 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. Loại bỏ 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 khích cho người mới bắt đầu. Nó cải thiện đáng kể việc phân phối tổng hợp các tệp CSS trên trang web WordPress của bạn, bao gồm cả việc loại bỏ hầu hết các CSS không sử dụng.
Mình 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à cũng tạo cảm giác nhanh chóng cho người dùng của bạn.
Đầ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 mình 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. Từ đây, bạn cần 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 tệp CSS chỉ chứa mã CSS cần thiết để hiển thị các 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 tệp CSS khác bằng công nghệ được gọi là tải chậm.
Bằng cách loại bỏ chặn CSS hiển thị 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 CSS phân phối', 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 Google Pagespeed Insights.
Tinh chỉnh cung cấp 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 Phông chữ Google và rút gọn HTML. Tất cả những người 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 mang đến 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 yêu cầu HTTP và tăng tốc độ cho bạn.
Tuy nhiên, bạn cần phải 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à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ân phát thành một tệp duy nhất và tải xuống 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 mình về cách thiết lập đúng cách WP Rocket trong WordPress.
Phương pháp 2. Loại bỏ CSS không sử dụng trong WordPress bằng cách dọn dẹp nội dung.
Phương pháp này hơi nâng cao một chút nhưng cực kỳ mạnh mẽ và sẽ cho phép bạn dễ dàng xóa bất kỳ CSS nào không sử dụng khỏi bất kỳ trang nào trên trang web WordPress của bạn.
Tuy nhiên, nó hơi phức tạp và bạn cần phải kiểm tra chức năng và giao diện trang web của mình kỹ lưỡng để đảm bảo không có gì bị hỏng.
Trước hết, 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 mình 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 Dọn dẹp Nội dung » và chuyển sang tab Chế độ kiểm tra. Từ đây, bạn cần bật tùy chọn 'Bật Chế độ Kiểm tra'.
Điều này cho phép bạn thử 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ể tải xuống các tệp CSS và JavaScript không mong muốn trên từng trang cơ sở.
Đầu tiên, nó sẽ tìm tải 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 xuống trên trang đó.
Bạn cần cuộn xuống và xem lại các tệp đã tải xuống. Nếu bạn thấy một tệp mà bạn không cần, thì bạn có thể đặt nó xuống cho trang, loại bài đã đăng hoặc 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ạn thường làm.
Trên màn hình chỉnh sửa bài đăng, bạn sẽ thấy hộp Dọn dẹp tài sản ngay bên dưới trình chỉnh sửa bài đăng.
Plugin sẽ tự động tìm tải và hiển thị danh sách tất cả các tệp và nội dung được tải xuống khi khách truy cập xem trang này trên trang web của bạn. Sau đó, bạn chỉ có thể cần 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 bất kỳ CSS hoặc JavaScript không sử dụng nào để đảm bảo rằng mọi thứ đều hoạt động tốt.
Sau khi hoàn tất việc dỡ bỏ 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 sử dụng.
Mình hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng loại bỏ 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 mình 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 mình.