CSS Tối ưu hóa và PageSpeed ​​Insights

Question

Tôi đã chạy Google PageSpeed ​​Insights trên trang web của tôi - www.gpsheatmap.com, và nó đề nghị thay đổi tải stylesheets của tôi (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example) từ -

<link href="/static/css/landing-page.css" rel="stylesheet"> 

Để -

<script> 
    var cb = function() { 
    var l = document.createElement('link'); 
    l.rel = 'stylesheet'; 
    l.href = '/static/css/landing-page.css'; 
    var h = document.getElementsByTagName('head')[0]; 
    h.parentNode.insertBefore(l, h); 
    }; 
    var raf = requestAnimationFrame || mozRequestAnimationFrame || 
     webkitRequestAnimationFrame || msRequestAnimationFrame; 
    if (raf) raf(cb); 
    else window.addEventListener('load', cb); 
</script> 

Tôi đã thử điều này cho bảng định kiểu của tôi và nó rõ ràng đã thay đổi tải để bạn sẽ thấy chế độ xem trước css, sau đó một giây sau, bạn sẽ thấy biểu định kiểu được áp dụng. Đây là trong firefox

Tôi có nên bỏ qua cách tiếp cận này hay không, điều này có thể được khắc phục không?

Answer 1

Bạn nên xem xét đường dẫn quan trọng và cũng đặt tất cả các kiểu cần thiết trong phần head để tránh FOUC (chỉ là kiểu cho nội dung trong màn hình đầu tiên). Điều này có thể được thực hiện hoặc giải nén các phong cách bằng tay hoặc — cho các trang web lớn — với một nhiệm vụ tự động như critical-path-css-demo cho ngụm

Dù sao nếu bạn chọn để tải tất cả các stylesheets với javascript xem xét để vẫn bao gồm họ bên trong một khối <noscript>, vì vậy chúng cũng có thể được nạp khi JS không có sẵn.

<noscript> 
    <link rel="stylesheet" ...> 
</noscript> 

---

Là một tối ưu hóa hơn nữa for near-future browser (tại thời điểm này, nó chỉ hoạt động trên Chrome Canary) nó sẽ có thể để early preload stylesheets sử dụng

<link rel="preload" href="..." as="style"> 

và để tạo ra một bộ nạp async trong một cách đơn giản hơn

<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'"> 

---

Một cách tiếp cận thú vị và gần đây là described by Jake Archibald và được gọi là "Tải CSS nhiều giai đoạn": yêu cầu tải một đoạn CSS nhỏ ngay trước đánh dấu phải được tạo kiểu và do đó tránh được nhu cầu CSS quan trọng, ví dụ:

<link rel="stylesheet" href="/site-header.css"> 
<header>…</header> 

<link rel="stylesheet" href="/article.css"> 
<main>…</main> 

<link rel="stylesheet" href="/comment.css"> 
<section class="comments">…</section> 

Kế hoạch này là dành cho mỗi chặn render nội dung tiếp theo trong khi tải stylesheet, nhưng cho phép thể hiện các nội dung trước khi nó. Các bảng định kiểu tải song song, nhưng chúng được áp dụng theo chuỗi. Điều này làm cho hành vi tương tự như <script src="…"></script>.