Tối ưu LCP bằng CSS gồm: inline critical CSS, preload hero assets, tránh @import, font-display: swap, và dùng <img> thay background-image cho LCP element.
- Inline critical CSS vào
<head>: browser render above-the-fold ngay, không chờ file CSS ngoài - Preload hero images + fonts:
<link rel="preload"> - Tránh
@import: tạo serial loading chain — dùng nhiều<link>tags song song thay thế font-display: swap: text hiện ngay với fallback font- Dùng
<img>thay background-image: browser phát hiện<img>sớm hơn khi parse HTML