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

Quy tắc này chạy khi PageSpeed Insights phát hiện thấy một trang bao gồm việc chặn biểu định kiểu bên ngoài, điều này làm chậm thời gian kết xuất 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 cho trang hiện tại. Do đó, trình duyệt sẽ chặn hiển thị cho đến khi biểu định kiểu bên ngoài được tải xuống và xử lý. Việc này có thể yêu cầu nhiều lần trọn vòng và trì hoãn thời gian hiển thị lần đầu. Xem bài viết tạo, bố cục và vẽ cây hiển thị để tìm hiểu thêm về đường dẫn hiển thị quan trọng và chặn CSS hiển thị để biết 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 tài nguyên CSS bên ngoài nhỏ, bạn có thể chèn trực tiếp chúng vào tài liệu HTML, được gọi là cùng dòng. Việc đặt cùng dòng CSS nhỏ theo cách này cho phép trình duyệt tiếp tục kết xuất trang. Xin lưu ý rằng nếu tệp CSS có kích thước lớn, việc cùng dòng hoàn toàn với CSS có thể khiến PageSpeed Insights cảnh báo rằng phần trong màn hình đầu tiên của trang quá lớn thông qua tuỳ chọn Ưu tiên nội dung hiển thị. Trong trường hợp tệp CSS có kích thước lớn, bạn sẽ cần xác định và đặt 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 có dạ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ể cùng dòng với một CSS quan trọ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>

Quá trình 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 với 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 các mô-đun Tối ưu hoá tốc độ trang cho nginx, apache, IIS, ATS và Open Lightspeed khi bạn bật bộ lọc prioritize_critical_css.

Hãy xem thêm hàm loadCSS để giúp tải CSS không đồng bộ. Hàm này có thể hoạt động với Critical, một công cụ để trích xuất CSS quan trọng 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ùng dòng và được áp dụng ngay cho tài liệu. Nhỏ.css đầy đủ được tải sau khi vẽ trang lần đầu. Kiểu của khung hiển thị đượ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ợ việc 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 thông qua tính năng Nhập HTML.

Không dùng cùng dòng URI dữ liệu lớn

Cẩn thận khi cùng dòng URI dữ liệu trong tệp CSS. Mặc dù việc sử dụng có chọn lọc URI dữ liệu nhỏ trong CSS có thể hợp lý, nhưng việc cùng dòng 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, từ đó sẽ làm chậm thời gian hiển thị trang.

Không dùng các thuộc tính CSS cùng dòng

Cùng dòng thuộc tính CSS trên các phần tử HTML (ví dụ: Bạn nên tránh <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. Ngoài ra, 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).

Ý kiến phản hồi

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