웹 페이지 로딩 성능 최적화를 위해 Critical CSS를 추출하고 인라인하는 기법에 대해 설명하고, 이 과정에서 발생할 수 있는 잠재적인 문제점(예: FOUC, 캐싱 문제)과 해결 방안을 논해주세요.

웹 페이지 로딩 성능 최적화를 위해 Critical CSS를 추출하고 인라인하는 것은 초기 렌더링에 필요한 스타일만 먼저 적용하여 사용자 경험을 개선하는 방법입니다. Above-the-fold 콘텐츠를 빠르게 표시하기 위해, 렌더링을 차단하는 CSS 파일을 분석하여 핵심 스타일만 추출하고 <head>에 인라인으로 삽입합니다. 나머지 스타일은 비동기적으로 로드합니다.

이 과정에서 FOUC(Flash of Unstyled Content)가 발생할 수 있는데, 이는 스타일이 적용되지 않은 콘텐츠가 잠깐 보이는 현상입니다. 이를 해결하기 위해 Critical CSS를 정확하게 추출하고, 필요하다면 JavaScript를 사용하여 스타일 로딩 완료 후 콘텐츠를 표시하도록 제어할 수 있습니다.

또 다른 문제는 캐싱 문제입니다. 인라인된 CSS는 HTML과 함께 캐싱되므로, CSS 변경 시 HTML 파일 전체를 다시 캐싱해야 합니다. 이를 해결하기 위해 파일 해싱 기법을 사용하거나, 서비스 워커를 통해 캐싱 전략을 세밀하게 관리할 수 있습니다. Critical CSS 추출은 critical과 같은 자동화 도구를 활용하면 효율적입니다. 미디어 쿼리를 고려하여 다양한 화면 크기에 대응하는 Critical CSS를 생성하는 것도 중요합니다.