CSSTố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
To improve LCP (the time it takes to render the largest element in the viewport) with CSS: inline critical CSS directly in <head> so the browser can render above-the-fold content immediately without waiting for external CSS files.
- Preload hero images and fonts with
<link rel="preload">for the earliest possible loading. - Avoid
@importin CSS as it creates a serial loading chain — use multiple<link>tags instead for parallel loading. - For web fonts, use
font-display: swapso text appears immediately with a fallback font. - If the LCP element uses a background image, switch to an
<img>tag since the browser detects<img>earlier during parsing. - Finally, reduce CSS file size through minification and removing unused CSS.