Critical CSS 생성기

1 month ago 6

Critical CSS는 페이지의 "처음에 보이는 영역(above the fold)"을 렌더링하는 데 필요한 최소한의 CSS만 추출한 것으로, 이를 HTML에 인라인하면 FCP(First Contentful Paint) 등 Core Web Vitals가 개선됨
HTML의 <head>에 인라인하여 브라우저가 전체 스타일시트를 기다리지 않고 빠르게 콘텐츠를 렌더링할 수 있도록 함
인식되는 로딩 속도 향상, Lighthouse 점수 상승, SEO 및 UX 개선 등의 이점이 있음
비필수 CSS는 <body> 끝에 <link>로 로드하거나, JavaScript로 지연 로딩해 성능을 더욱 최적화할 수 있음
사용자가 직접 CSS 링크 경로 및 자산 참조를 조정해야 함을 유의해야 함

Critical CSS Generator

Critical CSS Generator는 웹페이지에서 꼭 필요한 최소한의 CSS 코드만 추출해주는 도구로 사용 목적에 최적화된 CSS 추출이 가능함
Critical CSS는 페이지에서 처음 보이는 영역을 스타일링하는 데 필요한 최소한의 CSS 규칙
이 방식은 브라우저가 모든 스타일시트 로딩을 기다리지 않고, 바로 주요 컨텐츠를 보여줘 성능과 Core Web Vitals(FCP 등) 개선에 도움이 됨

<style> 태그 안에 Critical CSS를 삽입하여 HTML <head> 가장 위쪽에 배치
다른 스타일시트나 스크립트보다 먼저 배치해야 함
내부 asset 경로는 필요에 따라 수정 필요 <style> /* Critical CSS for your page */ /* ... CSS content ... */ </style>

원래의 <link> 태그는 <head>에서 제거하고, </body> 바로 앞에 위치시킴
이렇게 하면 Critical CSS만으로 초기 렌더링이 진행되고, 비필수 CSS는 나중에 로딩됨 <html> ... <body> ... <link rel="stylesheet" href="/css/vendors.min.css"> <link rel="stylesheet" href="/css/style.min.css"> </body> </html>

페이지 로딩 완료 후 JavaScript로 비필수 CSS를 동적으로 로딩
네트워크 속도가 느릴 때 성능 향상 가능
기존 <head>에서 모든 비필수 CSS <link>는 제거해야 함 window.addEventListener("DOMContentLoaded", function () { console.log("✅ Page loaded, now loading non-critical stylesheets..."); let stylesheets = [ // "/css/vendors.min.css", // "/css/style.min.css", ]; let loadedCount = 0; function checkAllStylesLoaded() { loadedCount++; if (loadedCount === stylesheets.length) { console.log("✅ All non-critical stylesheets loaded..."); } } stylesheets.forEach(function (href) { var link = document.createElement("link"); link.rel = "stylesheet"; link.href = href; link.onload = checkAllStylesLoaded; link.onerror = () => console.warn(`Failed to load stylesheet: ${href}`); document.head.appendChild(link); }); });