Critical CSS trong WordPress: Nó là gì và cách tối ưu hóa phân phối CSS

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.

Critical CSS trong WordPress: Nó là gì và cách tối ưu hóa phân phối CSS
trong WordPress: Nó là gì và cách tối ưu hóa phân phối CSS

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é.

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.

Critical CSS trong WordPress: Nó là gì và cách tối ưu hóa phân phối CSS
? Critical CSS nằm ở màn hình đầu tiên
Critical CSS khiến bạn phải suy nghĩ lại về cách trình duyệt tải CSS: bạn cần ưu tiên CSS cho nội dung trong màn hình đầu tiên.

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?

Critical CSS trong WordPress: Nó là gì và cách tối ưu hóa phân phối CSS
Trên cùng: tải trang có CSS chặn hiển thị. Dưới cùng: CSS quan trọng nội tuyến (nội dung trong màn hình đầu tiê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:

Critical CSS trong WordPress: Nó là gì và cách tối ưu hóa phân phối CSS

Đườ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.

Critical CSS trong WordPress: Nó là gì và cách tối ưu hóa phân phối CSS
Đườ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.

Critical CSS trong WordPress: Nó là gì và cách tối ưu hóa phân phối CSS
Nội dung trong màn hình đầu tiên khác nhau cho Máy tính để bàn, Máy tính bảng và Điện thoại thông minh – Nguồn: Kinsta

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.
Inlined critical CSS in my HTML – source: WebDev

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.
Tối ưu hóa CSS trong hai lần nhấp với WP Rocket
  • 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.
Tối ưu hóa CSS với plugin Autoptimize
  • 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).
Tệp CSS nội tuyến với Asset Clean-Up

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ó.
Loại bỏ CSS không sử dụng hoặc tải CSS không đồng bộ – Nguồn: WP Rocket

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.

Fallback critical CSS – WP Rocket
Loại bỏ CSS không được sử dụng là cách được khuyến nghị để loại bỏ CSS chặn hiển thị. Lưu ý rằng không thể kích hoạt cả hai.

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.

Giảm CSS không sử dụng – Kiểm tra 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.

Lighthouse Scoring Calculator – Nguồn: Lighthouse

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 đỏ:

Điểm trang web WordPress của tôi trên thiết bị di động (không có WP Rocket) – Nguồn: PSI

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”.

Remove Unused CSS option – Source: WP Rocket

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.

Kết quả hoạt động với WP Rocket

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”.

Passed audits with WP Rocket – Source: PSI

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

Bạn nghĩ sao về bài viết này?
+1
0
+1
0
+1
0
+1
0
+1
1


Lưu ý:
→ Vui lòng bình luận bằng tiếng Việt có dấu.
→ Hãy dùng tên và email thật của bạn khi comment.
→ Không sử dụng keyword trong ô Name.
→ Nếu có ý định Spam link thì hãy quên đi nhé.
→ Tất cả bình luận đều được kiểm duyệt vì thế hãy cẩn thận trước khi comment.
Xin cám ơn!

Add Comment

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.