Tối ưu hoá phân phối CSS

Quy tắc này kích hoạt khi PageSpeed Insights phát hiện thấy một trang có chứa tùy chọn chặn hiển thị bên ngoài biểu định kiểu, trì hoãn thời gian hiển thị lần đầu.

Tổng quan

Trước khi có thể hiển thị nội dung, trình duyệt phải xử lý tất cả thông tin về kiểu và bố cục trang hiện tại. Do đó, trình duyệt sẽ chặn hiển thị cho đến khi các biểu định kiểu bên ngoài được được tải xuống và xử lý. Điều này có thể yêu cầu nhiều lượt trọn vòng và trì hoãn thời gian kết xuất lần đầu. Xem tạo, bố cục và tô màu cây kết xuất để tìm hiểu thêm về đường dẫn kết xuất quan trọng, và kết xuất hình ảnh chặn CSS để tham khảo các mẹo về cách bỏ chặn hiển thị và cải thiện hoạt động phân phối CSS.

Đề xuất

Nếu các tài nguyên CSS bên ngoài nhỏ, bạn có thể chèn trực tiếp các tài nguyên đó vào tài liệu HTML, được gọi là cùng dòng. Việc chèn CSS nhỏ vào cùng dòng theo cách này cho phép trình duyệt tiếp tục hiển thị trang. Xin lưu ý rằng nếu tệp CSS lớn, hoàn toàn nội dòng với CSS có thể khiến PageSpeed Insights cảnh báo rằng trong màn hình đầu tiên phần trang của bạn quá lớn thông qua mục Ưu tiên nội dung hiển thị. Trong trường hợp có tệp CSS lớn, bạn sẽ cần xác định và đặt nội tuyến CSS cần thiết để hiển thị nội dung trong màn hình đầu tiên và trì hoãn việc tải các kiểu còn lại cho đến sau nội dung trong màn hình đầu tiên.

Ví dụ về nội tuyến một tệp CSS nhỏ

Nếu tài liệu HTML trông giống như sau: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
Và tài nguyên small.css có dạng như sau: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
Sau đó, bạn có thể chèn CSS quan trọng vào cùng dòng như sau: 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Sự chuyển đổi này, bao gồm cả việc xác định CSS quan trọng/không quan trọng, cùng dòng cho CSS quan trọng và trì hoãn tải CSS không quan trọng, có thể được thực hiện tự động bằng Mô-đun Tối ưu hoá PageSpeed cho nginx, apache, IIS, ATS và Open Lightspeed, khi bạn bật bộ lọc prioritize_critical_css.

Xem thêm loadCSS giúp tải CSS không đồng bộ, có thể hoạt động với Nghiêm trọng, một công cụ trích xuất CSS quan trọng từ một trang web.

Các kiểu quan trọng cần thiết để tạo kiểu cho nội dung trong màn hình đầu tiên sẽ được nội tuyến và áp dụng cho tài liệu ngay lập tức. Small.css đầy đủ sẽ được tải sau lần vẽ trang đầu tiên. Kiểu của phần tử này được áp dụng cho trang sau khi tải xong mà không chặn lượt hiển thị ban đầu của nội dung quan trọng.

Lưu ý rằng nền tảng web sẽ sớm hỗ trợ tải biểu định kiểu theo cách không chặn hiển thị mà không cần phải sử dụng JavaScript bằng cách sử dụng tính năng Nhập HTML.

Đừng chèn các URI dữ liệu lớn vào cùng dòng

Hãy cẩn thận khi đưa URI dữ liệu vào cùng dòng trong tệp CSS. Mặc dù việc sử dụng có chọn lọc các URI dữ liệu nhỏ trong CSS của bạn có thể hợp lý, cùng với việc URI dữ liệu lớn có thể khiến kích thước của CSS trong màn hình đầu tiên lớn hơn, điều này làm chậm thời gian hiển thị trang.

Đừng chèn các thuộc tính CSS vào cùng dòng

Đặt cùng dòng các thuộc tính CSS trên các phần tử HTML (ví dụ: <p style=...>) nếu có thể, vì điều này thường dẫn đến việc trùng lặp mã không cần thiết. Hơn nữa, CSS cùng dòng trên các phần tử HTML bị chặn theo mặc định bằng Chính sách bảo mật nội dung (CSP).

Phản hồi

Trang này có hữu ích không?