웹 성능 최적화를 위한 Critical CSS with 예제
웹 페이지의 로딩 속도는 사용자 경험과 검색 엔진 순위에 매우 중요한 영향을 미친다.
특히 모바일 기기에서의 웹 사용이 늘어나면서 빠른 페이지 로딩이 더욱 중요해졌다.
만약 당신이 CSS 파일을 불러오면, 이때 렌더링은 멈추게 된다.
따라서, 초기에 중요한 CSS와 중요하지 않은 CSS를 구분하여 중요한 CSS를 먼제 제공하고 비동기적으로 중요하지 않은 CSS를 제공하면 더 빠른 웹페이지 로딩이 가능하다.
👻 CSS는 렌더링 차단 리소스: 브라우저는 페이지를 표시하기 전에 CSS 파일을 다운로드하고 파싱해야 한다.
👻 때문에 CSS 파일이 크거나 네트워크 상태가 좋지 않은 경우 CSS 파일을 요청하면 웹페이지를 렌더링하는 데 걸리는 시간이 크게 늘어날 수 있다.
즉, Critical CSS는 웹 페이지의 로딩 속도를 향상시키는 데 도움이 되는 기술 중 하나로, 이 기술을 사용하면 페이지의 핵심 스타일이 빠르게 로드되어 사용자가 페이지를 더 빨리 볼 수 있게 된다.
👻 Critical CSS란 무엇인가요?
Critical CSS는 웹 페이지의 렌더링에 필요한 가장 중요한 CSS 스타일 규칙을 식별하는 기술이다.
- 웹 브라우저가 페이지의 핵심 부분을 보여주기 위해 필요한 CSS를 먼저 로드할 수 있다.
- 페이지의 초기 렌더링 시간을 단축하고 사용자 경험을 향상시킬 수 있다.
🍎 예제: Critical CSS 구현하기
다음은 간단한 예제를 통해 Critical CSS를 구현하는 방법이다.
1. 웹 페이지 분석: 먼저 웹 페이지의 HTML 및 CSS를 분석하여 페이지의 핵심 요소를 식별해야 한다.
이 요소들은 페이지가 처음 로드될 때 보여져야 하는 부분이다.
2. Critical CSS 식별: 식별된 핵심 요소에 해당하는 CSS 스타일을 추출한다.
이는 페이지의 초기 렌더링에 필요한 최소한의 스타일만 포함해야 한다.
🎶 즉, 화면에 맨 처음 접근했을 때 보이는 Header 등을 의미한다.
3. 분리된 CSS 생성: 추출된 Critical CSS를 별도의 CSS 파일로 저장한다.
4. 웹 페이지에 Critical CSS 적용: HTML 문서의 `<head>` 섹션에 다음과 같이 Critical CSS 파일을 링크한다.
<link rel="stylesheet" href="critical.css">
5. 나머지 CSS 로드: 나머지 CSS는 페이지의 하단에 추가하거나 비동기적으로 로드하여 페이지의 로딩을 방해하지 않도록 한다.
🙌 예를 들면, body 태그 하단에 CSS를 불러온다.
😁예제 코드
다음은 간단한 HTML 파일에 Critical CSS를 적용하는 전체 HTML 예제 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
<link rel="stylesheet" href="critical.css"> <!-- Critical CSS -->
</head>
<body>
<header>
<h1>Welcome to Example Page</h1>
</header>
<main>
<p>This is the main content of the page.</p>
</main>
<footer>
<p>Footer content goes here.</p>
</footer>
<!-- 나머지 CSS 파일 -->
<link rel="stylesheet" href="styles.css">
</body>
</html>
위의 코드에서 `critical.css` 파일은 Critical CSS를 포함하고 있으며, `styles.css` 파일은 나머지 CSS 스타일을 포함하고 있다.
이처럼 Critical CSS 통해 페이지의 초기 렌더링 속도를 개선하고 사용자 경험을 향상시킬 수 있다.
🍎 참고 자료
https://web.dev/articles/extract-critical-css?hl=ko