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ượt trả về và trì hoãn thời gian kết xuất lần đầu. Hãy xem bài viết tạo cây hiển thị, bố cục và vẽ để tìm hiểu thêm về đường dẫn hiển thị quan trọng và chặn CSS để biết các mẹo về cách bỏ chặn quá trình kết xuất 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 những 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ỏ 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, việc đặt hoàn toàn cùng dòng 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 tính năng Ưu tiên nội dung hiển thị. Đối với tệp CSS lớn, bạn sẽ cần xác định và 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ề cách chèn một tệp css nhỏ
- Không chèn cùng dòng URI dữ liệu lớn
- Không chèn các thuộc tính CSS cùng dòng
Ví dụ về cách chè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ể đặt cùng dòng 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 CSS quan trọng và trì hoãn việc 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á tốc độ trang cho nginx, apache, IIS, ATS và Open Lightspeed khi bạn bật bộ lọc prioritize_critical_css.
Ngoài ra, hãy xem hàm loadCSS để giúp tải CSS không đồng bộ. Hàm này có thể hoạt động với Critical (Quan 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ùng dòng và được áp dụng cho tài liệu ngay lập tức. Nhỏ.css đầy đủ sẽ được tải sau lần vẽ trang đầu tiên. Kiểu của mẫu đó sẽ được áp dụng cho trang sau khi trang tải xong mà không chặn quá trình hiển thị nội dung quan trọng ban đầu.
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 chặn không hiển thị mà không cần phải dùng JavaScript, thông qua tính năng Nhập HTML.
Không dùng các URI dữ liệu lớn cùng dòng
Cẩn thận khi nội tuyến URI dữ liệu 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ý, nhưng việc cùng dòng URI dữ liệu lớn có thể làm cho kích thước của CSS trong màn hình đầu tiên tăng lên, điều này sẽ làm chậm thời gian hiển thị trang.
Không chèn các thuộc tính CSS cùng dòng
Đặt cùng dòng thuộc tính CSS trên các phần tử HTML (ví dụ: <p style=...>) nên tránh 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 nội tuyến 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?