Hiểu CSS WordPress
Trước khi đi sâu vào, hãy hiểu CSS thông thường hoạt động như thế nào trong WordPress.
Mỗi chủ đề WordPress bao gồm style.css chứa tất cả các mã cần thiết để tạo kiểu cho trang web của bạn. Các nhà phát triển chủ đề nên hỗ trợ tất cả các tính năng của WordPress, bao gồm bài đăng blog, nhận xét, trang sản phẩm, trang thành viên, biểu mẫu, v.v. Các plugin khác mà bạn cài đặt cũng có thể thêm bảng định kiểu css tương tự.
Điều này có thể làm cho các tệp css bị cồng kềnh và có kích thước lớn từ 200kb trở lên.
CSS đường dẫn quan trọng là gì?
Khi các tệp CSS của bạn phát triển, trình duyệt của bạn cần tải xuống các tệp lớn đó, phân tích cú pháp và hiển thị chúng. Còn được gọi là chặn hiển thị. Nó cũng sẽ tăng lần hiển thị có ý nghĩa đầu tiên và lần hiển thị có ý nghĩa đầu tiên.
Critical Path CSS là CSS cần thiết để hiển thị nội dung trên trên mọi trang web. Đúng như tên gọi, CSS "quan trọng", giúp trình duyệt nhanh chóng vẽ và hiển thị nó trước khi tải các tệp CSS đầy đủ.
Thông thường css của đường dẫn quan trọng được nhúng trong tiêu đề và tệp css nguồn được tải không đồng bộ hoặc trong chân trang để dễ sử dụng.
Tại sao CSS đường dẫn quan trọng lại quan trọng như vậy?
Bạn hẳn đã thấy cảnh báo từ các công cụ như Google PageSpeed Insights hoặc GTmetrix nói rằng "tối ưu hóa phân phối css" hoặc "hoãn lại css không sử dụng".
CSS quan trọng không liên quan gì đến thời gian tải trang. Nó không làm tăng / giảm thời gian tải. Nhưng mang lại trải nghiệm người dùng tốt hơn nhiều. Nó giúp nhanh chóng "hiển thị" hoặc "tô màu" một trang web.
- Cải thiện bản vẽ nội dung đầu tiên (FCP)
- Cải thiện khoản thanh toán quan trọng đầu tiên (FMP)
- Loại bỏ CSS không sử dụng (về mặt kỹ thuật, không xóa nó, nhưng ưu tiên CSS "hữu ích")
Đây là hai ảnh chụp màn hình blog của tôi có và không có CSS quan trọng.
Như bạn có thể thấy trong phần "không có đường dẫn css quan trọng", mất gần 5 giây để hiển thị cho người dùng điều gì đó hữu ích trên thiết bị di động. Trình duyệt phải thực hiện một yêu cầu HTTP bổ sung cho tệp css, tải xuống, phân tích cú pháp để bắt đầu hiển thị. Nhưng khi sử dụng css quan trọng, tất cả các css cần thiết phải được nội tuyến và trình duyệt có thể bắt đầu hiển thị ngay sau khi tải tệp HTML trong một giây hoặc ít hơn.
Làm thế nào để tạo CSS quan trọng trong WordPress?
Có một số cách để tạo CSS quan trọng trong WordPress.
Sử dụng plugin bộ nhớ đệm
WP Rocket là một plugin bộ nhớ đệm cao cấp hoạt động thực sự tốt.
Một trong những lý do tôi sử dụng WP Rocket trên mọi trang web là bản thân việc tạo CSS quan trọng. Họ tạo CSS quan trọng riêng biệt cho trang chủ, trang bài viết, trang danh mục, trang sản phẩm, v.v. và nhúng nó vào. Họ sẽ khôi phục CSS quan trọng nếu có thay đổi đối với chủ đề hoặc cài đặt.
Mọi thứ có thể được thực hiện chỉ bằng một nút bấm.
Các plugin bộ nhớ đệm khác có thể tạo CSS quan trọng
Swift Performance và LiteSpeed (yêu cầu máy chủ LiteSpeed / OpenLiteSpeed) là các plugin tương tự có thể tạo CSS quan trọng. Cả hai plugin này đều có đám mây và bộ nhớ cache đầy đủ được tích hợp trong máy chủ của chúng.
Sử dụng Autoptimize + Free Critical CSS Generator
Có các công cụ trực tuyến của bên thứ ba cung cấp css quan trọng bằng cách nhập URL trang web của bạn. pegasaas là một công cụ miễn phí tuyệt vời.
Đây là cách thực hiện:
Bước 1. Truy cập https://pegasaas.com/critical-path-css-generator/ và nhập URL của bạn. Sao chép "CSS đường dẫn tới hạn" đã tạo.
Bước 2 Trong cài đặt tự động tối ưu hóa (bật cài đặt nâng cao), trong "Tùy chọn CSS", chọn "Nội tuyến và trì hoãn CSS" và dán CSS đã sao chép.
Ưu điểm:
- Là miễn phí
Điểm trừ:
- Không có CSS quan trọng riêng cho các loại trang khác nhau (ví dụ: trang chủ, trang bài đăng, trang danh mục, trang sản phẩm, v.v.)
- Không tự động tạo lại khi thay đổi chủ đề / cài đặt
Tại sao WordPress không thể tự tạo CSS quan trọng?
Như bạn có thể đã nhận thấy, việc tạo một đường dẫn quan trọng css cho phép các dịch vụ bên ngoài. Vậy tại sao WordPress không thể tự tạo ra nó?
Việc tạo CSS quan trọng có thể thực hiện được nhờ các dự án mã nguồn mở như Critical (của Google), CriticalCSS hoặc căn hộ áp mái. Tất cả các dự án này đều dựa trên NodeJS, không phải PHP. Vì vậy, bạn cần cài đặt NodeJS trên máy chủ của mình. Hầu hết các nhà cung cấp dịch vụ lưu trữ được chia sẻ / được quản lý không cho phép điều này vì một số lý do.
