Ngày xuất bản: ngày 30 tháng 10 năm 2024
Việc giới thiệu chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP) làm chỉ số Core Web Vitals vào đầu năm 2024 đã tạo ra nhiều sự quan tâm hơn đến hiệu suất kết xuất. Một phần của INP tập trung vào thời gian cần thiết để trình duyệt vẽ khung hình tiếp theo sau khi người dùng bắt đầu tương tác với trang. Việc giữ INP của trang web ở mức thấp có nghĩa là người dùng sẽ cảm thấy trang web phản hồi các hoạt động tương tác của họ nhanh chóng và mượt mà nhất có thể.
Một điều quan trọng khác là công việc kết xuất cần diễn ra khi trang tải, điều này có thể trì hoãn các lượt tương tác ngay từ đầu. Bạn nên tìm cách giảm lượng công việc xảy ra trong phần quan trọng này của vòng đời trang. Thuộc tính content-visibility CSS là một cách để bạn có thể đạt được điều này. Chúng tôi rất vui mừng được thông báo rằng thuộc tính này hiện là Mới có trong đường cơ sở kể từ tháng 9 năm 2024!
content-visibility là một thuộc tính CSS yêu cầu tác nhân người dùng trì hoãn việc hiển thị các phần tử cho đến khi chúng đến gần khung nhìn. Đối với các trang có nhiều phần tử DOM, điều này có thể có lợi vì tức là tải ban đầu của trang sẽ khởi động ít công việc kết xuất hơn. Thay vào đó, công việc sẽ diễn ra ngay trước khi người dùng cần xem.
content-visibility: auto cho các vùng nội dung được chia nhỏ sẽ giúp tăng hiệu suất kết xuất gấp 7 lần trong lần tải ban đầu. Hãy đọc tiếp để tìm hiểu thêm.
Để bật tính năng tối ưu hoá này cho các phần tử ngoài màn hình, hãy áp dụng quy tắc content-visibility: auto cho các phần tử đó trong CSS của trang web:
.render-me-later {
content-visibility: auto;
}
content-visibility hoạt động theo một số hành vi được xác định cho thuộc tính contain trong vùng chứa CSS. Mục tiêu của tính năng chứa CSS là tách biệt các phần của cây DOM. Điều này cho phép hoạt động hiển thị trong phạm vi một phần cụ thể của cây DOM, vì vậy, bố cục sẽ không hợp lệ và chỉ được làm lại cho một tập hợp con của cây DOM. Mặc dù áp dụng thuộc tính này để tăng hiệu suất kết xuất, nhưng bạn cần phải khá quen thuộc với nhiều giá trị của thuộc tính contain và cách sử dụng các giá trị đó một cách hiệu quả.
Khi content-visibility: auto được áp dụng cho các phần tử, các phần tử đó sẽ tự động nhận một số thuộc tính do thuộc tính contain cung cấp. Kết quả là các phần tử bị ảnh hưởng ban đầu sẽ được kết xuất với chiều cao là 0px, nghĩa là các phần tử này không được kết xuất.
Tuy nhiên, cách này có một số tác dụng phụ. Ví dụ: thanh cuộn của trang có thể dịch chuyển và thay đổi chiều cao khi người dùng cuộn đến các phần tử chưa hiển thị trước đó. Các phần tử này sẽ hiển thị đúng lúc để người dùng có thể xem. Để giảm thiểu vấn đề này, hãy áp dụng thuộc tính contain-intrinsic-size.
Vì content-visibility mới được cung cấp trong Baseline mới, nên bạn có thể gặp một số vấn đề về người dùng có trình duyệt chưa cập nhật để sử dụng thuộc tính mới. Vì content-visibility là một thuộc tính CSS, bạn không nên lo lắng quá mức! Những trình duyệt hiểu được thuộc tính này sẽ sử dụng thuộc tính này và những trình duyệt không hiểu được thuộc tính này sẽ không sử dụng. Điều này có nghĩa là ngoài những lợi ích về hiệu suất mà bạn nhận được từ các trình duyệt hỗ trợ content-visibility, bạn có thể mong đợi rằng các trang sẽ hoạt động như nhau.
content-visibility mang lại lợi ích bổ sung. Nếu có trường hợp bạn có thể sử dụng content-visibility để giảm công việc kết xuất trong quá trình tải trang, bạn nên cân nhắc sử dụng content-visibility để đảm bảo rằng các trang của bạn có nhiều sức mạnh xử lý nhất có thể khi cần nhất. Giờ đây, tính năng hữu ích này đã có trong Baseline mới, bạn có thể sử dụng tính năng này để người dùng có thể hưởng lợi từ công việc kết xuất mà tính năng này tránh cho đến khi cần thiết.