Với những ai có căn bản về web, bạn hiểu khá rõ về HTML, CSS, JS và có thể là một ngôn ngữ lập trình web phổ biến như PHP. Khi ấy các giải thích về citical CSS không khó khăn để hiểu.
Tuy nhiên nếu bạn là người ngoại đạo, việc giải thích critical CSS là các đoạn mã được dùng để style cho nội dung thuộc màn hình đầu tiên, còn các đoạn mã CSS khác được trì hoãn tải có vẻ khó tiếp thu.
Nếu bạn rơi vào trường hợp này, thì đây là bài viết dành cho bạn.
Hãy tưởng tượng việc tải CSS giống như việc xây dựng một biệt thự cao cấp rộng lớn. Người đó sẽ xây căn biệt thự chính dành để ở, cộng với khu nhà bếp riêng, rồi khu bể bơi, tập luyện thể thao và cả một khoảnh đất dành để thư giãn với hàng trăm loại cây cảnh khác nhau.
Khi đó về cơ bản có 2 cách xây dựng khu biệt thự này:
- Thợ xây sẽ dàn trải ra tất cả các phần khác nhau, sẽ có một toán xây dựng khu chính, một toán xây khu thể thao, và một toán xây sân vườn.
- Thợ xây sẽ tập trung xây dựng khu nào mà gia chủ cho là quan trọng nhất trước, và ở đây chính là căn biệt thự chính dành để ở.
Việc tải toàn bộ CSS rồi phân tích, và cuối cùng mới hiển thị trang giống như cách làm số 1.
Còn việc tải critical CSS trước rồi phân tích ngay để hiển thị phần nội dung ngay đầu giống như cách làm số 2, tức là tập trung cho phần quan trọng trước.
Hy vọng là so sánh này sẽ giúp bạn dễ hiểu hơn về critical CSS.