Cách xóa (hoặc trì hoãn) CSS không được sử dụng trong trang web WordPress

Bạn có muốn xóa CSS không sử dụng trong WordPress và làm cho trang web của bạn nhanh hơn?

Mục tiêu chính của việc tối ưu hóa trang web là loại bỏ bất kỳ mã nào không cần thiết. Điều này làm giảm tổng kích thước của các trang trên trang web của bạn và dẫn đến thời gian tải trang nhanh hơn và trải nghiệm người dùng tốt hơn cho khách truy cập.

Một lĩnh vực mà bạn có thể giảm đáng kể kích thước của các trang web là tạo kiểu. Kiểu trang web được kiểm soát thông qua một ngôn ngữ dựa trên quy tắc có tên là Cascading Style Sheets, là một trong những khối xây dựng cốt lõi của World Wide Web cùng với HTML và Javascript.

Thường được viết tắt thành CSS, bảng định kiểu có thể được sử dụng để xác định màu trang, phông chữ, nền, kiểu hình ảnh, lề, phần đệm, v.v. Trong ví dụ bên dưới, mã CSS đảm bảo rằng các dòng tiêu đề được căn giữa và hiển thị bằng màu đỏ.

h1 {
 text-align: center;
 color: red;

}

Một trang web WordPress điển hình sẽ yêu cầu nhiều bảng định kiểu để hiển thị một trang chính xác. Ngoài kiểu CSS được sử dụng trong phiên bản cốt lõi của WordPress, các lệnh gọi CSS được thực hiện bởi chủ đề WordPress đã được kích hoạt và các plugin WordPress của bạn. Do đó, một trang web WordPress có thể yêu cầu hàng tá tệp CSS để tạo kiểu mọi thứ một cách chính xác.

Cascading Style Sheets có thể tăng thời gian tải trang nếu tệp quá lớn hoặc nếu quá nhiều tệp CSS được gọi. Một số kỹ thuật có thể được sử dụng để giải quyết vấn đề này như Trì hoãn, Giảm thiểu và Kết hợp.

Dưới đây là tóm tắt về các kỹ thuật này.

Nếu bạn muốn giảm trọng lượng của CSS hơn nữa, tôi khuyên bạn nên xóa các quy tắc CSS không sử dụng trong WordPress để khách truy cập chỉ tải xuống kiểu bắt buộc. Bằng cách ngăn trình duyệt tải mã CSS không cần thiết, bạn có thể tăng tốc độ tải trang và mang đến cho khách truy cập trải nghiệm người dùng tốt hơn.

Hãy xem xét kỹ hơn CSS không sử dụng và kiểm tra cách bạn có thể xóa mã CSS không sử dụng khỏi trang web WordPress của mình.

CSS không được sử dụng trong WordPress là gì và tại sao nó lại xảy ra?

CSS không được sử dụng đề cập đến bất kỳ quy tắc CSS nào không được gọi trên trang hiện tại. Điều này xảy ra thường xuyên vì các trang hiếm khi cần gọi mọi quy tắc CSS từ một biểu định kiểu. Ví dụ:biểu định kiểu của bạn có thể chứa quy tắc CSS để hiển thị tiêu đề bằng màu đỏ, nhưng điều này sẽ được phân loại là CSS không sử dụng nếu nó không thực sự được yêu cầu.

Vì các trình duyệt không yêu cầu các quy tắc CSS không sử dụng, nên mã làm tăng kích thước của các tệp CSS một cách không cần thiết. Do đó, bạn có thể cải thiện thời gian tải trang bằng cách xóa mã CSS không sử dụng trong WordPress.

Các chủ đề WordPress được yêu cầu sử dụng tệp styles.css làm biểu định kiểu chính, mặc dù các chủ đề thường sử dụng bảng định kiểu bổ sung cho phông chữ, giao diện chủ đề và các yếu tố thiết kế khác. Nhiều quy tắc CSS có trong các tệp CSS chủ đề chỉ được yêu cầu trong một số trường hợp nhất định. Mặc dù vậy, các tệp CSS này thường được tải trên mọi trang trên trang web của bạn.

Các plugin WordPress đặc biệt tệ khi chèn CSS không sử dụng vào các trang vì các nhà phát triển thường xuyên tải các biểu định kiểu trên tất cả các trang theo mặc định.

Bạn nên xóa CSS không sử dụng trong WordPress, nhưng nếu bạn xóa bất kỳ mã CSS nào quan trọng đối với thiết kế trang web của mình, thiết kế trang web của bạn sẽ bị hỏng.

Còn về CSS quan trọng?

Một thuật ngữ khác mà bạn có thể nghe thường xuyên là CSS quan trọng . Nó đề cập đến bất kỳ kiểu dáng nào được yêu cầu để hiển thị nội dung cho người dùng ngay lập tức mà không cần cuộn. Khu vực này được gọi là Trong màn hình đầu tiên và thời gian trình duyệt tải nội dung trong màn hình đầu tiên được gọi là Bức tranh có nội dung đầu tiên (FCP).

Google khuyên bạn nên trích xuất, rút ​​gọn CSS quan trọng và hiển thị nội tuyến trong phần tử HEAD để đảm bảo Sơn có nội dung đầu tiên tải nhanh chóng. Trì hoãn có thể được sử dụng để tải các tệp CSS không quan trọng sau này nhằm đảm bảo các tệp CSS ít quan trọng hơn không làm chậm quá trình tải trang ban đầu.