VietNetwork.Vn

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 hoặc plugin WordPress của bạn mà bạn không thực sự cầ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 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 để 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 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 chi tiết về các 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 được sử dụng đượ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 tệp style.css duy nhất.

Ngoài CSS của giao diện, các plugin WordPress của bạn cũng sẽ tải CSS của riêng chúng. Ví dụ: WooCommerce sẽ tải CSS để hiển thị sản phẩm, plugin tạo trang sẽ thêm CSS của riêng nó để hiển thị các trang tùy chỉnh 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ữ 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 chúng.

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 WordPress của mình.

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à gỡ bỏ.

Điều đó nói rằng, Mình 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. 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 thể 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ị 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ệ được gọi là tải chậm.

Bằng cách loại bỏ CSS chặn 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 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 Google Pagespeed Insights.

Các 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 Google Fonts và rút gọn HTML. Tất cả các 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 sẽ 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á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ân phát thành một tệp duy nhất và hoãn tải 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 Asset CleanUp.

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 sẽ 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 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 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 Asset CleanUp » 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á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 Asset CleanUp »CSS / JS Manager . Từ đây, bạn có thể dỡ 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ể dỡ 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ẽ tìm thấy hộp Asset CleanUp 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 dỡ 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.