CSS quan trọng hoạt động như thế nào?

Trong một cuộc nói chuyện (rất được khuyến nghị) gần đây của Addy Osmani trong khuôn khổ web của Chrome. nhà phát triển/sự kiện trực tiếp, Addy giải thích cách Chloé đã tối ưu hóa trang web của họ để đạt hiệu suất và các chỉ số quan trọng về web cốt lõi của Google. Có rất nhiều điều tuyệt vời rút ra từ buổi nói chuyện, một số trong đó có thể được áp dụng vào dự án của riêng bạn một cách tương đối dễ dàng;

Để tự động tạo CSS quan trọng, chúng tôi đã phát triển một tập lệnh chạy trong thời gian xây dựng, trích xuất tất cả các khối CSS chứa thuộc tính critical: this tùy chỉnh và đưa chúng vào phần đầu của trang. Các quy tắc CSS nội tuyến bị xóa khỏi các tệp CSS gốc, được tải với mức độ ưu tiên thấp bằng kỹ thuật media=’print’

Phần trên được lấy từ nghiên cứu điển hình từ blog kỹ thuật của Chloé

Mục tiêu của nội tuyến CSS quan trọng là để ngăn nội dung không được tạo kiểu (FOUC). CSS là một tài nguyên chặn hiển thị, có nghĩa là nó cần được tải xuống và phân tích cú pháp để tạo CSSOM. Sau đó, điều này được kết hợp với DOM để tạo cây kết xuất, được sử dụng để bố trí các phần tử khác nhau và cung cấp quy trình vẽ, cuối cùng xuất các pixel ra màn hình. Việc có một tệp CSS lớn duy nhất sẽ làm chậm quá trình bắt đầu hiển thị, vì tất cả CSS, bất kể nó có được sử dụng hay không sẽ phải được tải xuống. Nội tuyến CSS cũng sẽ tránh yêu cầu mạng tải xuống tệp CSS

Nếu bạn đã từng thử tối ưu hóa hiệu suất trang web của mình, thì có thể bạn đã chạy trang web của mình thông qua Google Page Speed ​​và nhận được một số mẹo về những gì có thể được cải thiện để làm cho trang web của bạn nhanh hơn

Trong bài đăng này, chúng tôi sẽ xem xét kỹ hơn ý nghĩa của cụm từ “Loại bỏ tài nguyên chặn hiển thị” và giải thích từng bước cách bạn có thể khắc phục điều đó

Tài nguyên chặn hiển thị

Mẹo về tốc độ trang “Loại bỏ tài nguyên chặn hiển thị”

Khi mở một trang web, bạn thường thấy một trang trống trước khi nội dung đầu tiên được hiển thị. Điều này đôi khi mất vài giây, đặc biệt là trên thiết bị di động và trên mạng chậm (3G).  

Contentful Paint đầu tiên với các tài nguyên chặn hiển thị

The reason is that by default the browser delays the page rendering (First Contentful Paint) until it has finished loading, parsing and executing all the CSS files referenced in the of your page. It does this because it needs to calculate the layout of the page. This actually makes sense, because if your browser displayed the content before the styles were fully loaded, you would see a completely unstyled page with elements jumping around while your CSS loads. That’s not the best experience, right?

Vậy chúng ta có thể làm gì để làm cho trang hiển thị nội dung nhanh hơn nhưng vẫn có giao diện đẹp mắt?

CSS quan trọng nội tuyến

Critical CSS is the smallest set of CSS rules that is necessary to show the first screen’s worth of content (“above-the-fold”, the content that is visible without scrolling). It should be included as an inline