Nâng CaoCSS iconCSS

Cách optimize Largest Contentful Paint (LCP) bằng CSS?

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

Xem toàn bộ CSS cùng filter theo level & chủ đề con.

Mở danh sách CSS