CSSLCP đo thời điểm phần tử nội dung lớn nhất trong màn hình đầu vẽ xong. Ngưỡng tốt: ≤ 2.5s.
Phần CSS đóng góp vào LCP theo bốn hướng:
1. Không để CSS chặn render lâu. <link rel="stylesheet"> chặn vẽ cho tới khi tải xong — nhúng phần CSS tối thiểu và tải phần còn lại không chặn.
2. Tránh @import trong CSS.
/* SAI: tạo chuỗi tải nối tiếp — browser phải tải a.css rồi mới biết cần b.css */
@import url('b.css');Dùng nhiều thẻ <link> để tải song song.
3. Ưu tiên tải tài nguyên của phần tử LCP.
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" fetchpriority="high" width="1200" height="630" alt="">4. Dùng <img> thay background-image cho phần tử LCP. Browser phát hiện <img> ngay khi quét HTML, còn ảnh nền chỉ được biết sau khi CSS tải và tính style xong — chậm hơn hẳn một nhịp.
Thêm: font-display: swap để chữ hiện ngay bằng font dự phòng, không phải chờ font tuỳ chỉnh.
Lưu ý: loading="lazy" đặt nhầm lên ảnh hero làm LCP tệ đi rõ rệt — browser hoãn tải đúng thứ đang cần đo. Chỉ lazy-load ảnh nằm ngoài màn hình đầu.
Cách xác định phần tử LCP: Lighthouse chỉ đích danh trong mục "Largest Contentful Paint element" — đừng đoán.