CSS và vấn đề chặn hiển thị (Render-Blocking)
Khi trình duyệt tải một trang web, nó bắt buộc phải tải xuống và phân tích cú pháp toàn bộ các tệp CSS được liên kết trước khi có thể vẽ những pixel đầu tiên lên màn hình. Đây được gọi là tài nguyên chặn hiển thị. Tệp CSS càng nặng, thời gian người dùng phải nhìn màn hình trắng càng lâu.
Tác động trực tiếp lên chỉ số Core Web Vitals của Google
Google đánh giá thứ hạng website của bạn dựa trên trải nghiệm thực tế của người dùng qua các chỉ số:
- FCP (First Contentful Paint): Thời gian xuất hiện phần tử đầu tiên. Nén CSS giúp trình duyệt xử lý nhanh hơn, giảm FCP đáng kể.
- LCP (Largest Contentful Paint): Thời gian hiển thị phần tử lớn nhất. Giảm dung lượng file CSS giúp giải phóng băng thông để tải các tài nguyên quan trọng như ảnh biểu ngữ (hero image) nhanh hơn.