Khi chạy kiểm tra hiệu suất trên Google PageSpeed Insights, bạn sẽ thấy rằng Google khuyên bạn nên “loại bỏ các tài nguyên chặn hiển thị” hầu như mọi lúc. Có nghĩa là bạn phải luôn ưu tiên tải CSS và JavaScript quan trọng của mình.
Nhưng làm thế nào để quyết định CSS nào là quan trọng và CSS nào không? Bạn nên “trì hoãn” phần nào trên trang web của mình để tăng tốc phần khác? Đó là tất cả về mức độ ưu tiên và tìm kiếm tài nguyên CSS nào là cần thiết và cách tối ưu hóa việc phân phối chúng.
Vậy Critical CSS là gì? Chúng ta cùng tìm hiểu qua bài viết bên dưới nhé.
Nội dung chính
Critical CSS là gì và tại sao nó lại quan trọng đối với hiệu suất?
Critical CSS là gì? Nó là một kỹ thuật trích xuất CSS trong màn hình đầu tiên để hiển thị trang nhanh nhất có thể. Nó giống như sử dụng CSS tối thiểu để hiển thị nội dung mà khách truy cập đang xem.
Nói cách khác, Critical CSS là chìa khóa để tối ưu hóa hiệu suất. Trước khi hiển thị trang, trình duyệt của bạn cần tải xuống và phân tích cú pháp các tệp CSS, biến các tệp đó trở thành tài nguyên chặn hiển thị. Các tệp CSS của bạn càng lớn, trình duyệt càng mất nhiều thời gian để xử lý chúng. Tất cả những yêu cầu được tạo bởi các tệp CSS nặng sẽ làm tăng thời gian tải trang web, gây khó chịu cho khách truy cập và Google.
Tốc độ trang cũng có thể ảnh hưởng đến hiệu suất SEO của bạn do yếu tố xếp hạng mới, bao gồm cả Core Web Vitals. Chúng là một tập hợp các yếu tố do Google triển khai để đo lường trải nghiệm người dùng – bao gồm cả tốc độ của một trang. Trải nghiệm càng tốt thì thứ hạng của bạn càng tốt.
Bạn có quen thuộc với sáu chỉ số Lighthouse đo lường hiệu suất không? Hai trong số đó – Nội dung đầu tiên (FCP) và Độ trễ đầu vào đầu tiên (FID) – đo tốc độ cảm nhận của trang web của bạn. Nếu những chỉ số đó hoạt động tốt, thì trải nghiệm người dùng của bạn cũng sẽ được Google đo lường. Tuy nhiên, nếu cả hai KPI đều có màu đỏ, tốt hơn bạn nên tối ưu hóa CSS quan trọng của mình.
Giải thích về Critical CSS bằng tiếng Anh thuần túy
Trong tiếng Anh đơn giản, Critical CSS là một nhiệm vụ tối ưu hóa. Nó giống như yêu cầu trình duyệt của bạn chỉ tải CSS đang được khách truy cập xem. Điều này giúp cải thiện tốc độ cảm nhận, có nghĩa là trang web có vẻ nhanh như thế nào đối với khách truy cập.
Hãy làm một bài tập nhanh với hình ảnh bên dưới. Hãy tưởng tượng bạn là một người dùng di động đang truy cập vào một trang web.
Tình huống số 1 – Trên cùng, có một trang có CSS chặn hiển thị. Bạn thấy một trang trống cho đến khi toàn bộ tệp CSS được tải.
Tình huống số 2 – Ở phía dưới, CSS quan trọng được hiển thị đầu tiên. Bạn bắt đầu xem trang sớm hơn vì trình duyệt đã bắt đầu tải biểu định kiểu quan trọng nhất.
Câu hỏi: Tình huống nào “cảm thấy” nhanh hơn đối với bạn?
Trả lời: Chúng tôi đều đồng ý rằng tốc độ cảm nhận của dòng dưới cùng là tốt hơn.
Khách truy cập của bạn sẽ cảm thấy thời gian tải trang giảm xuống do kết xuất trang nhanh hơn khi được thực hiện đúng cách.
Tại sao Critical CSS lại cần thiết?
Tải một biểu định kiểu CSS thường là cách bạn tạo kiểu cho trang web WordPress của mình. CSS là ngôn ngữ được sử dụng để mô tả một trang web, chẳng hạn như màu sắc, bố cục và phông chữ. Nếu không có CSS, web sẽ giống như cột bên trái của chúng tôi bên dưới:
Đường dẫn hiển thị Critical CSS có nghĩa là gì?
Đường dẫn kết xuất quan trọng là một loạt các tác vụ mà trình duyệt cần thực hiện để hiển thị một trang trên màn hình của khách truy cập. Ví dụ, những tác vụ đó bao gồm tải xuống ảnh, phông chữ và văn bản để hiển thị trên trang web.
Như đã thấy trước đây, trình duyệt cũng cần tải xuống các tệp CSS của bạn để hiển thị bố cục phù hợp của trang. Nếu tệp của bạn thực sự lớn, khách truy cập sẽ phải đợi cho đến khi toàn bộ tệp được tải xuống.
Nhưng điều gì sẽ xảy ra nếu trình duyệt có thể bắt đầu hiển thị CSS khi quá trình tải xuống diễn ra?
Hãy tưởng tượng một cách để giảm thiểu việc chặn và bắt đầu phân phối CSS càng sớm càng tốt. Kỹ thuật này được gọi chính xác là tối ưu hóa đường dẫn kết xuất quan trọng.
Trình duyệt làm theo năm bước cho đến khi hiển thị trang cho khách truy cập. Rất nhiều điều có thể xảy ra trong quá trình này. Đó là lý do tại sao chúng ta nên đảm bảo rằng mỗi bước được hoàn thành càng nhanh càng tốt.
Hai câu hỏi hiện đang xuất hiện: làm thế nào để tối ưu hóa từng bước? Làm thế nào để đảm bảo rằng chúng tôi có phân phối CSS hiệu quả nhất?
Những câu hỏi này sẽ đưa chúng ta đến phần tiếp theo. Bạn sẽ học cách cải thiện thời gian hiển thị bằng kỹ thuật Critical CSS (tối ưu hóa phân phối CSS) và loại bỏ lỗi CSS chặn hiển thị.
3 bước để tối ưu hóa phân phối CSS
CSS kiểm soát định dạng và kiểu trực quan của trang web WordPress của bạn, nhưng nếu tệp CSS không được phân phối một cách tối ưu, bạn có thể kết thúc bằng một trang web chậm.
Vì vậy, một trong những cách tốt nhất để cải thiện hiệu suất trang web WordPress của bạn là tối ưu hóa cách thức và thời điểm mã CSS được phân phối. Có ba bước chính để tối ưu hóa phân phối CSS cho trang web WordPress của bạn, đó là:
Bước 1: Tìm và tạo critical CSS
đó là xác định mã CSS tối thiểu bạn cần để hiển thị nội dung trong màn hình đầu tiên. Bạn cần tìm hiểu những gì người dùng có thể nhìn thấy trong khung nhìn khi họ tải trang lần đầu tiên. Việc xác định đúng CSS quan trọng cho một trang có thể phức tạp vì khách truy cập sử dụng nhiều kích thước màn hình khác nhau, chẳng hạn như máy tính để bàn, máy tính bảng và thiết bị di động.
Cách tìm Critical CSS
WebDev cung cấp cho bạn ba công cụ bạn có thể sử dụng để xác định CSS quan trọng:
- Critical – trích xuất CSS trong màn hình đầu tiên (đồng thời nội dòng và thu nhỏ nó)
- CriticalCSS – một mô-đun khác trích xuất CSS quan trọng
- Penthouse – một lựa chọn tốt nếu trang web của bạn có nhiều CSS
Bước 2: Nội dòng CSS quan trọng này – tức là thêm CSS quan trọng trong
của tài liệu HTML để loại bỏ tất cả các yêu cầu bổ sung để tìm nạp các kiểu này.Trong ví dụ WebDev bên dưới, họ đã đặt nội dung CSS quan trọng trong tệp
để trình duyệt có thể phân phối tệp đó nhanh hơn và hiển thị nội dung nào đó cho người dùng càng sớm càng tốt.
Bước 3: Tải không đồng bộ phần còn lại của CSS – điều đó đang trì hoãn CSS không quan trọng để CSS có thể được tải sau khi khách truy cập có thể xem nội dung trang web của bạn. Kỹ thuật này còn được gọi là “tải chậm”. WebDev giải thích toàn bộ quy trình thủ công rất tốt.
Bằng cách làm theo ba bước thủ công đó, bạn sẽ tối ưu hóa phân phối CSS và đường dẫn hiển thị quan trọng của mình. Tuy nhiên, có nhiều phương pháp đơn giản hơn để tối ưu hóa phân phối CSS của WordPress: bằng cách sử dụng một plugin WordPress!
Cách tạo Critical CSS và tối ưu hóa đường dẫn hiển thị quan trọng bằng plugin
May mắn thay, bạn có thể tối ưu hóa việc phân phối CSS quan trọng của mình và trì hoãn các tài nguyên ít quan trọng hơn bằng cách sử dụng plugin WordPress. Điều đó sẽ giúp bạn tiết kiệm thời gian và tránh sửa đổi các tệp mã của bạn theo cách thủ công. Chúng tôi đã tổng hợp một danh sách để bạn có thể kiểm tra công cụ nào phù hợp nhất với mình.
- WP Rocket – Plugin bộ nhớ cache hoàn chỉnh nhất giúp phát hiện CSS quan trọng của bạn để nội dòng và định nghĩa nó theo cách đơn giản nhất.
- Autoptimize – Đưa CSS vào đầu trang theo mặc định và cũng có thể nội dòng và trì hoãn CSS quan trọng.
- Asset Clean-up – Nội tuyến Tệp CSS (tự động & bằng cách chỉ định đường dẫn đến các bảng định kiểu).
Cách tối ưu hóa phân phối CSS với WP Rocket
Trong WP Rocket 3.10, tùy chọn Load CSS Asynchronously giải quyết đề xuất tốc độ trang mà chúng ta đã thấy trước đó: “Loại bỏ tài nguyên chặn hiển thị”. WP Rocket bao gồm hai cách tối ưu hóa CSS chính:
Nó tạo CSS quan trọng cần thiết để hiển thị phần hiển thị trên trang web của bạn (nội dung trong màn hình đầu tiên).
Nó tải tất cả các tệp CSS khác một cách không đồng bộ (ưu tiên cái nào nên được tải trước).
Để tối ưu hóa việc phân phối CSS, chỉ cần làm theo các bước sau trong trang tổng quan của WP Rocket:
- Đi tới Cài đặt -> WP Rocket
- Bấm vào tab File Optimization.
- Cuộn xuống phần Tệp CSS và nhấp vào hộp có nhãn Optimize CSS delivery.
- Chọn tùy chọn Remove Unused CSS – Xóa CSS không sử dụng (tùy chọn được khuyến nghị). Điều này sẽ chỉ trích xuất CSS cần thiết trên trang và nó cũng sẽ nội dòng nó.
Ngoài ra, WP Rocket cũng cho phép bạn tải CSS không đồng bộ và cung cấp tùy chọn dự phòng cho CSS quan trọng. Sử dụng trường dự phòng này trong trường hợp plugin không thể tạo đúng CSS quan trọng.
Cuối cùng nhưng không kém phần quan trọng, WP Rocket cũng giải quyết các đề xuất “Giảm CSS không sử dụng” từ PageSpeed Insights.
CSS không được sử dụng ảnh hưởng đến thời gian tải của trang vì trình duyệt vẫn phải tải chúng. Các chỉ số hiệu suất của Google như Sơn có nội dung lớn nhất (LCP) và Tổng thời gian chặn (TBT) cũng sẽ bị ảnh hưởng. LCP và TBT có tổng tỷ trọng là 55% đối với cấp Google PageSpeed và Core Web Vitals, vì vậy, điều quan trọng là phải giữ cho các chỉ số đó hoạt động tốt.
Hãy kiểm tra các tùy chọn WP Rocket đó trên một trang web WordPress có điểm kém trên PSI (thiết bị di động). Bạn sẽ thấy WP Rocket sẽ giúp chúng tôi như thế nào trong quá trình tối ưu hóa tốc độ trang của chúng tôi.
Trước khi tối ưu hóa CSS quan trọng của tôi, điểm hiệu suất của tôi chỉ đạt 43/100, điều này khiến trang web trên thiết bị di động của tôi có màu đỏ:
Tôi cũng nhận được hai cảnh báo: “Giảm CSS không sử dụng” và “Loại bỏ tài nguyên chặn hiển thị”.
Bây giờ, hãy cài đặt WP Rocket và kích hoạt tùy chọn “Xóa CSS không sử dụng”.
Kết quả hiệu suất hiện nay rất tuyệt vời trên thiết bị di động. Chúng tôi đã đạt 94/100 chỉ trong một vài cú nhấp chuột. WP Rocket đã tối ưu hóa đường dẫn hiển thị của tôi và cũng chăm sóc CSS quan trọng của tôi.
Cảnh báo “Loại bỏ tài nguyên chặn hiển thị” và cảnh báo “Giảm CSS không sử dụng” hiện nằm trong phần “kiểm tra đã vượt qua”.
Giống như tôi, bạn có thể sử dụng WP Rocket để tối ưu hóa việc phân phối CSS quan trọng của chúng tôi. Đó là một plugin đáng tin cậy và hiệu quả đã giúp tôi đạt được các mục tiêu hiệu suất đáng kinh ngạc trong một vài cú nhấp chuột.
Lời kết
Việc tối ưu hóa Critical CSS của bạn có vẻ khó khăn nhưng không nhất thiết phải theo cách này, nhờ vào các plugin như WP Rocket. Chúng tôi thấy rằng WP Rocket đã giúp loại bỏ các cảnh báo màu đỏ liên quan đến tài nguyên chặn hiển thị trên Google PageSpeed Insights.
Bạn sẽ tiết kiệm được một chút thời gian quý báu vì WP Rocket tự động áp dụng 80% các phương pháp hay nhất về hiệu suất web – và bạn sẽ thấy tốc độ cải thiện tức thì khi kích hoạt.
Đọc đến đây bạn đã biết Critical CSS là gì rồi đúng không? và nó ảnh hưởng đến website wordpress như thế nào? Nếu có thắc mắc gì về bài viết vui lòng comment bên dưới nhé.
Source: WPROCKET
Add Comment