CSSCSS tối thiểu cần thiết để render above-the-fold content (phần user nhìn thấy đầu tiên).
- Cách dùng: inline critical CSS trong
<style>tag ở<head>, phần CSS còn lại load async bằng<link rel="preload">hoặc JS injection. - Giải quyết vấn đề render-blocking CSS.
- Tools: Critical (npm), Critters (Webpack plugin).
- Cải thiện FCP và LCP đáng kể, đặc biệt trên mobile/3G.
The minimum CSS needed to render above-the-fold content (the first thing users see).
- Approach: inline critical CSS in a
<style>tag in<head>, and load the rest asynchronously via<link rel="preload">or JS injection. - Solves the render-blocking CSS problem.
- Tools: Critical (npm), Critters (Webpack plugin).
- Significantly improves FCP and LCP, especially on mobile/3G.