Critical CSS Extraction

Creator
Creator
Seonglae ChoSeonglae Cho
Created
Created
2020 Sep 6 13:40
Editor
Edited
Edited
2024 Jan 10 2:24
Refs
Refs
Client-side Rendering(CSR)을 사용하는 앱은 번들 사이즈가 커지면서 지연되는 First Paint(FP)등의 성능 지표를 최적화 하기 위해 SSR을 고려하기 시작
SSR을 도입하는 순간 전에 없던 문제들이 생기기기 시작합니다.
 
 
  1. 그릴 수 있는 마크업이 먼저 등장하면서 "Flash of unstyled content" (FOUC) 문제가 발생합니다.
  1. FOUC를 방지하기 위해 필요한 CSS 스타일시트를 우선적으로 로딩할 필요가 생깁니다.
  1. 마크업과 스타일시트가 각각 들어가면서 Critical rendering path가 길어집니다.
 
 

Recommendations