12장: 최적화와 성능

웹 페이지의 성능은 사용자 경험에 큰 영향을 미칩니다. 이 장에서는 CSS 최적화와 성능 향상 기법을 다룹니다. 이를 통해 웹 페이지의 로딩 속도를 개선하고, 효율적인 스타일링을 구현할 수 있습니다.

### 12.1 CSS 최적화 기법

CSS 최적화는 웹 페이지의 성능을 향상시키기 위해 CSS 파일의 크기를 줄이고, 불필요한 스타일을 제거하는 과정입니다. 다음은 CSS 최적화에 유용한 몇 가지 기법입니다.

#### 12.1.1 불필요한 코드 제거

사용되지 않는 CSS 코드를 제거하여 파일 크기를 줄입니다. 이를 통해 로딩 시간을 단축할 수 있습니다.

예제:
/* 사용되지 않는 코드 */
.old-class {
    color: red;
}

#### 12.1.2 CSS 파일 병합

여러 CSS 파일을 하나로 병합하여 HTTP 요청 수를 줄입니다. 이를 통해 웹 페이지의 로딩 속도를 향상시킬 수 있습니다.

예제:
<!-- 여러 CSS 파일 -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css">

<!-- 병합된 CSS 파일 -->
<link rel="stylesheet" href="all-styles.css">

#### 12.1.3 CSS 축소화

CSS 축소화(minification)는 코드의 공백, 주석 등을 제거하여 파일 크기를 줄이는 과정입니다. 이를 통해 로딩 시간을 단축할 수 있습니다.

예제:
/* 원본 CSS */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* 축소화된 CSS */
body{font-size:16px;line-height:1.5;}

### 12.2 파일 크기 줄이기

웹 페이지의 성능을 최적화하기 위해 CSS 파일의 크기를 줄이는 것이 중요합니다. 이를 위해 다양한 도구와 기법을 사용할 수 있습니다.

#### 12.2.1 Gzip 압축

Gzip 압축을 사용하여 CSS 파일을 압축하면 서버에서 전송되는 데이터의 크기를 줄일 수 있습니다. 대부분의 웹 서버는 Gzip 압축을 지원합니다.

#### 12.2.2 CSS 스프라이트

CSS 스프라이트를 사용하여 여러 이미지를 하나의 이미지 파일로 결합하면 HTTP 요청 수를 줄일 수 있습니다. 이를 통해 웹 페이지의 로딩 속도를 향상시킬 수 있습니다.

예제:
.icon {
    background-image: url('sprite.png');
}

.icon-home {
    background-position: 0 0;
}

.icon-user {
    background-position: -50px 0;
}

### 12.3 로딩 속도 향상

웹 페이지의 로딩 속도를 향상시키기 위해 다양한 기술과 최적화 기법을 사용할 수 있습니다.

#### 12.3.1 비동기 로딩

비동기 로딩을 사용하여 CSS 파일이 로드되는 동안 다른 리소스를 병렬로 로드할 수 있습니다.

예제:
<link rel="stylesheet" href="styles.css" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

#### 12.3.2 크리티컬 CSS

크리티컬 CSS는 페이지의 처음 렌더링에 필요한 최소한의 CSS를 인라인 스타일로 포함하여 빠른 렌더링을 가능하게 합니다.

예제:
<style>
    body {
        font-size: 16px;
        line-height: 1.5;
        color: #333;
    }
</style>
<link rel="stylesheet" href="styles.css">

#### 12.3.3 캐싱

브라우저 캐싱을 사용하여 자주 변경되지 않는 CSS 파일을 캐시하면, 다음 방문 시 빠르게 로드할 수 있습니다.

예제 (Apache 서버 설정):
<filesMatch "\.(css|js|jpg|jpeg|png|gif|ico)$">
    ExpiresActive On
    ExpiresDefault "access plus 1 year"
</filesMatch>

### 12.4 성능 측정 도구

성능 측정 도구를 사용하면 웹 페이지의 로딩 속도와 성능을 분석하고, 최적화할 수 있는 영역을 식별할 수 있습니다. 다음은 몇 가지 유용한 도구입니다.

#### 12.4.1 Google Lighthouse

Google Lighthouse는 웹 페이지의 성능, 접근성, SEO를 테스트하고 개선 사항을 제안하는 도구입니다. Chrome DevTools에 내장되어 있습니다.

#### 12.4.2 WebPageTest

WebPageTest는 웹 페이지의 로딩 속도를 테스트하고, 상세한 성능 보고서를 제공합니다.

#### 12.4.3 GTmetrix

GTmetrix는 웹 페이지의 성능을 분석하고, 최적화할 수 있는 영역을 제안하는 도구입니다.

### 연습 문제

1. 사용되지 않는 CSS 코드를 찾아 제거해 보세요.
2. 여러 CSS 파일을 하나로 병합하여 HTTP 요청 수를 줄여 보세요.
3. CSS 파일을 축소화하여 파일 크기를 줄여 보세요.
4. Gzip 압축을 사용하여 CSS 파일을 압축해 보세요.
5. CSS 스프라이트를 사용하여 여러 이미지를 하나로 결합해 보세요.
6. 비동기 로딩을 사용하여 CSS 파일을 병렬로 로드해 보세요.
7. 크리티컬 CSS를 사용하여 페이지의 처음 렌더링을 빠르게 해 보세요.
8. 브라우저 캐싱을 설정하여 자주 변경되지 않는 CSS 파일을 캐시해 보세요.
9. Google Lighthouse, WebPageTest, GTmetrix를 사용하여 웹 페이지의 성능을 측정하고, 개선할 수 있는 영역을 식별해 보세요.