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: thistù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ị
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].
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 -block as soon as possible in the section, so that it’s included in the first few TCP packets of response. The inline styles should be kept as small as possible, because it won’t be cached like other static resources, so it will be sent on each page load and we don’t want to delay the transmission of the rest of the HTML.
Mẹo chuyên nghiệp
- CSS quan trọng phải được chuyển với 14KB phản hồi đầu tiên – đó là kích thước xấp xỉ của chuyến đi khứ hồi TCP đầu tiên
Phần còn lại của CSS phải được hoãn lại ở chân trang hoặc được tải không đồng bộ sau khi tải trang. Nhưng hãy chú ý đến những phong cách này, vì chúng tôi không muốn chuyển quá nhiều css không sử dụng và lãng phí băng thông của người dùng
Vì vậy, thay vì điều này
Bạn sẽ cần phải viết cái này
Do đó, nội dung của bạn sẽ được hiển thị nhanh hơn nhiều
Cách tìm CSS quan trọng
Bạn có thể tạo CSS quan trọng của riêng mình theo cách thủ công bằng cách xóa tất cả biểu định kiểu khỏi trang web của mình và thêm lại quy tắc kiểu theo quy tắc cho đến khi bố cục chính và nội dung trong màn hình đầu tiên có vẻ ổn. Đây là một quá trình tẻ nhạt và một chu kỳ dài thay đổi và làm mới trong trình duyệt của bạn, đồng thời bạn sẽ cần kiểm tra nhiều kích thước màn hình và trình duyệt. Phải có một giải pháp tốt hơn
May mắn thay, có một số công cụ tuyệt vời có thể tự động tạo CSS quan trọng cho trang web của bạn
Critical được tạo bởi Addy Osmani là một mô-đun npm trích xuất CSS trong màn hình đầu tiên và có thể được tích hợp trong quy trình xây dựng giao diện người dùng của bạn với Gulp, Grunt hoặc Webpack. Nó sử dụng Penthouse và Puppeteer dưới mui xe
lộn ngược.
- tự động phát hiện tất cả các biểu định kiểu trên trang của bạn
- hỗ trợ nhiều độ phân giải màn hình
- theo tài liệu, src có thể là đường dẫn cục bộ hoặc chuỗi mã nguồn, nhưng trong các thử nghiệm của chúng tôi, nó cũng hoạt động với một URL bên ngoài
Nhược điểm.
- yêu cầu npm hoặc công cụ xây dựng
Cài đặt. npm i -D critical
Mã ví dụ
// index.js
const critical = require['critical'];
critical.generate[{
src: '//www.peterbagi.de/',
width: 1300,
height: 900,
inline: false
}, [err, criticalCSS] => {
console.log[criticalCSS];
}];
// run on command line:
// node index.jsCriticalCSS được tạo bởi FilamentGroup là một mô-đun npm khác cũng có sẵn dưới dạng CLI.
lộn ngược
- Bạn có thể sử dụng tùy chọn “bắt buộc bao gồm” để có nhiều quyền kiểm soát hơn đối với các quy tắc được bao gồm
Nhược điểm.
- bạn phải chỉ định tệp CSS mà bạn muốn trích xuất các quy tắc từ đó
- các tệp CSS và HTML phải tương đối và không thể sử dụng URL HTTP
Cài đặt. npm i -D criticalcss
mã ví dụ
// index.js
const criticalcss = require["criticalcss"];
criticalcss.getRules["path/to/styles.css", [err, output] => {
const allRules = JSON.parse[output];
criticalcss.findCritical["path/to/page.html", allRules, [err, output] => {
console.log[output];
}];
}];
// run on command line:
// node index.jsPenthouse là một công cụ mạnh mẽ và tuyệt vời nếu bạn có nhiều phong cách hoặc ứng dụng web động, chẳng hạn như. g. với góc.