#1. Hiểu về bản chất của CSS trong WordPress
Trước khi đi sâu hơn, chúng ta sẽ tìm hiểu cách CSS (thông thường) sẽ hoạt động như thế nào trong WordPress.
Mọi giao diện (theme) WordPress đều bao gồm một file style.css bao gồm tất cả các đoạn mã cần thiết để tạo style cho website của bạn.
Nhà phát triển theme cần hỗ trợ tất cả các tính năng của WordPress bao gồm bài đăng blog, bình luận, trang sản phẩm, trang thành viên, form, vân vân. Các plugin khác mà bạn cài cũng có thể thêm các style css tương tự.
Điều này có khả năng làm file CSS phình to ra và có kích cỡ lên đến 200KB hoặc thậm chí còn cao hơn nữa.
#2. Đường dẫn CSS quan trọng là gì?
Khi file CSS của bạn lớn dần lên, trình duyệt của bạn phải tải những file lớn này, phân tích nó và từ đấy render (kết xuất / hiển thị) website. Nó còn được biết tới với tên gọi chặn hiển thị (render-blocking / bản chất của CSS là chặn hiển thị).
Điều này cũng làm gia tăng FCP (First Contentful Paint – Thời gian đo lường khi người dùng nhìn thấy hình ảnh phản hồi đầu tiên từ trang) và FMP (First Meaningful Paint – Thời gian đo lường khi người dùng nhìn thấy nội dung chính của trang, có vẻ như Google đã phát triển một chỉ số mới hơn để thay thế FMP, đó là Largest Contentful Paint).
Đường dẫn CSS chính / quan trọng (Critical Path CSS) là CSS phải có để xuất nội dung nằm trên màn hình đầu tiên (above the fold) giúp trình duyệt nhanh chóng có khả năng “style” trang và xuất (hiển thị) nó ra, thay vì phải tốn thời gian tải toàn bộ file CSS (cồng kềnh).
Thông thường các đường dẫn CSS quan trọng được inline (chèn trực tiếp vào trong thẻ style nằm ở <head>, còn được gọi là “nội tuyến”) và file CSS gốc được tải không đồng bộ (asynchronously) hoặc được đưa vào phần chân trang (footer) để có được trải nghiệm tốt nhất cho người dùng.
#3. Tại sao đường dẫn CSS quan trọng lại có nhiều ý nghĩa đến vậy?
Bạn chắc hẳn đã nhì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 “trì hoãn tải CSS không sử dụng”.
CSS quan trọng không tác động gì đến thời gian tải toàn bộ website. Nó không làm giảm, cũng chẳng làm tăng thời gian tải của trang. Nhưng nó đem đến trải nghiệm người dùng tốt hơn. Nó giúp “xuất” hay “hiển thị” trang web nhanh hơn.
- Cải thiện FCP;
- Cải thiện FMP;
- Loại bỏ các CSS không sử dụng (không loại bỏ về mặt kỹ thuật, đúng hơn là nó ưu tiên các CSS “có ích”).
Dưới đây là hai hình chụp màn hình blog của tôi khi có và không có critical CSS.
Như bạn có thể thấy, trong trường hợp “không có đường dẫn CSS quan trọng”, nó cần đến gần 5 giây để hiển thị nội dung nào đó có ích cho người dùng trên thiết bị di động.
Trình duyệt phải thực hiện các yêu cầu HTTP gia tăng cho file CSS, tải nó, phân tích nó theo thứ tự để 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 được inline (nội tuyến) và trình duyệt có khả năng xuất nó ngay lập tức sau khi tải file HTML, chỉ trong khoảng một giây hoặc ít hơn.
#4. Làm thế nào để tạo ra được CSS quan trọng trong WordPress?
Có một số cách giúp tạo ra được đường dẫn CSS quan trọng trong WordPress.
a. Sử dụng plugin cache
WP-Rocket là plugin trả phí làm việc này thực sự tốt (ngoài ra còn có FlyingPress, Swift Performance và LiteSpeed cache).
Một trong các lý do tôi sử dụng WP-Rocket trong mọi trang là bởi tính năng tạo đường dẫn CSS quan trọng của nó. Chúng tạo từng CSS quan trọng riêng cho trang chủ, trang post, trang thư mục, trang sản phẩm, vân vân và nội tuyến (inline) nó.
WP-Rocket xây dựng lại các CSS quan trọng nếu có điều gì đó thay đổi trong giao diện hoặc điều gì đấy được tinh chỉnh.
Mọi thứ được thực hiện chỉ với một click.
b. Các plugin cache khác có khả năng tạo ra đường dẫn CSS quan trọng
Swift Performance và LiteSpeed (yêu cầu máy chủ LiteSpeed/OpenLiteSpeed) là những plugin tương tự có khả năng tạo ra CSS quan trọng.
Tất cả những plugin này đều dựa trên cloud và toàn bộ cache được xây dựng trên các máy chủ của họ.
c. Sử dụng Autoptimize + Ứng dụng tạo CSS quan trọng miễn phí
Có những ứng dụng trực tuyến của bên thứ 3 sẽ cung cấp CSS quan trọng bằng cách nhập URL của trang. Pegasaas là một công cụ miễn phí như vậy, công năng của nó khá ấn tượng.
Dưới đây là cách làm:
Bước 1: Truy cập vào trang https://pegasaas.com/critical-path-css-generator/ và nhập URL của bạn vào (bạn nên chọn bài có định dạng phổ biến trên trang, nếu nó là bài có lưu lượng truy cập lớn thì càng tốt). Copy nội dung “Đường dẫn CSS quan trọng / Critical Path CSS” được tạo ra.
Bước 2: Trong phần thiết lập Autoptimize (bật tùy chọn cài đặt nâng cao), dưới phần “CSS Options / Tùy chọn CSS” kiểm tra “Inline and defer CSS / Nội tuyến và trì hoãn CSS” và paste đoạn CSS vừa copy vào.
Ưu điểm:
- Miễn phí;
Nhược điểm:
- Không tạo ra các CSS riêng rẽ cho các kiểu trang khác nhau (ví dụ: trang chủ, trang bài đăng / post, trang thư mục, trang sản phẩm, vân vân);
- Không tự động xây dựng lại CSS quan trọng khi giao diện thay đổi hoặc có tinh chỉnh nào đó xảy ra, nói cách khác khi có các thay đổi lớn bạn phải cập nhật thủ công, nhiều khi chúng ta lười hoặc quên mất không làm;
#5. Tại sao bản thân WordPress không thể tạo ra được critical CSS
Có thể bạn đã để ý thấy rằng tạo ra các đường dẫn CSS quan trọng liên quan đến các dịch vụ bên ngoài. Vậy tại sao bản thân WordPress không thể tự tạo ra được? (vì rõ ràng là tính năng này cực kỳ quan trọng).
Tạo ra đường dẫn CSS quan trọng (Generating Critical CSS) được thực hiện bởi các dự án nguồn mở như Critical (từ Google) hoặc CriticalCSS hoặc penhouse. Tất cả các dự án này dựa trên NodeJS chứ không phải PHP. Vì thế bạn sẽ cần cài đặt NodeJS trên máy chủ của bạn. Hầu hết các công ty hosting sẽ không cho phép điều này vì một số lý do.
#6. Kết luận
WP-Rocket là người chiến thắng trong vấn đề này mà không có gì phải bàn cãi. Mặc dù có nhiều giải pháp khác, không có giải pháp nào có thể tạo ra đường dẫn CSS quan trọng cho từng kiểu trang khác nhau một cách tự động như cách mà WP-Rocket đang làm.
[Cập nhật]: hiện tại có nhiều plugin có thể cạnh tranh tốt với WP-Rocket trong việc tạo ra critical CSS, chẳng hạn như LiteSpeed cache hay FlyingPress (của chính tác giả bài gốc tiếng Anh này- Gijo Varghese).
(Được dịch từ bài viết: How to Generate Critical Path CSS in WordPress, tác giả: Gijo Varghese, website: WPSpeedMatters)