스토리텔링

초코의 풀스택 도전기 12: 웹 성능 최적화와 CSS 파일 최적화 방법

ETHub 2024. 10. 7. 10:58

도입

Bootstrap을 사용해 웹사이트를 만들던 초코는 페이지가 무겁게 느껴지기 시작했다. 이미지가 많아지면 페이지 로딩 속도가 느려지는 현상을 깨달았다.

 

초코가 멘토에게 물었다.

 

"멘토님, 웹사이트를 만들고 나서 보니까 페이지 로딩 속도가 느려진 것 같아요. 특히 이미지가 많아지니까 더 그런 것 같아요. 이걸 개선할 수 있는 방법이 있을까요?"

 

멘토는 웃으며 말했다.

 

"물론이지, 초코야! 웹 성능 최적화를 통해 페이지 로딩 속도를 개선할 수 있어. 특히 CSS 파일 최적화는 중요한 부분이야. 오늘은 그 방법들을 중점적으로 알아보자."

 

1. CSS 파일 최적화란?

멘토는 CSS 파일 최적화가 왜 중요한지 설명했다.

 

"웹 성능 최적화의 핵심은 페이지 로딩 속도야. 사용자가 웹페이지에 들어왔을 때, 로딩이 느리면 페이지를 금방 나가버릴 수 있어. CSS 파일은 웹페이지의 스타일을 정의하기 때문에, 파일이 크고 불필요한 코드가 많으면 페이지 로딩 속도가 더 느려질 수 있지."

 

초코는 이를 듣고 물었다.

 

"그렇다면 어떻게 CSS 파일을 최적화할 수 있죠?"

 

2. 불필요한 CSS 제거

멘토가 설명을 시작했다.

 

"먼저, 불필요한 CSS 코드를 제거하는 게 첫 번째야. 특히, Bootstrap 같은 CSS 프레임워크를 사용할 때는 다양한 스타일이 미리 정의되어 있지만, 우리가 실제로는 그 중 일부만 사용하게 돼. 그러면 사용하지 않는 스타일들이 많이 남아서 CSS 파일이 커지게 되는 거야."

 

큰 CSS 파일은 웹페이지가 로딩될 때 더 오랜 시간이 걸리기 때문에 최적화가 필요하지.

 

"이럴 때 사용할 수 있는 도구가 바로 PurifyCSS야," 멘토가 설명했다.

PurifyCSS는 무엇인가?

PurifyCSS는 CSS 파일을 최적화하는 도구로, HTML과 JavaScript 파일을 분석해서 실제로 사용하지 않는 CSS 스타일을 찾아서 제거해줘. 이를 통해 최종 CSS 파일의 크기를 줄일 수 있고, 페이지 로딩 속도도 빨라지게 돼. 불필요한 코드가 제거되면, 브라우저가 스타일을 적용하는 데 걸리는 시간도 줄어들어 페이지가 더 빠르게 표시되겠지.

PurifyCSS 설치 및 사용 방법

PurifyCSS를 사용하려면 먼저 Node.js가 설치되어 있어야 해. Node.js는 JavaScript의 실행 환경으로, PurifyCSS와 같은 다양한 개발 도구들을 설치하고 사용할 수 있게 도와줘.

PurifyCSS 설치 및 사용 방법:

1. PurifyCSS 설치: 터미널에 아래 명령어를 입력해 PurifyCSS를 설치할 수 있어 :

npm install purify-css -g

 

여기서 -g 옵션은 전역 설치를 의미해, 이 옵션을 사용하면 터미널에서 어디서든 PurifyCSS 명령어를 사용할 수 있게 돼.

 

2. 사용되지 않는 CSS 제거: 다음 명령어를 사용해 불필요한 CSS를 제거하고 최적화된 파일을 생성할 수 있어 :

purifycss input.css --content index.html --output output.css

 

  • input.css: 원본 CSS 파일이야. 이 파일에서 사용되지 않는 스타일을 제거할 거야.
  • --content index.html: PurifyCSS는 HTML 파일과 JavaScript 파일을 분석해서 실제로 사용되는 스타일만 남기고 나머지를 제거해.
  • output.css: 최종적으로 최적화된 CSS 파일이 이 이름으로 저장돼.

예를 들어, input.css에 100줄의 CSS 코드가 있다고 가정할 때, 페이지에서 실제로 60줄만 사용되고 나머지는 사용되지 않으면, PurifyCSS는 그 40줄을 제거하고 더 작은 크기의 output.css 파일을 만들어줘. 이렇게 하면 페이지가 로딩될 때 작아진 CSS 파일을 더 빠르게 처리할 수 있게 되지.

왜 PurifyCSS가 중요한가?

이 도구는 특히 대규모 웹사이트나 프레임워크 기반의 웹 개발에서 매우 유용해. 예를 들어, Bootstrap처럼 방대한 CSS 프레임워크를 사용하면, 대부분의 스타일은 불필요할 수 있어. 페이지에 적용되지 않는 스타일이 많은데도 CSS 파일을 그대로 사용하면, 파일이 불필요하게 커지고 성능에 악영향을 줄 수 있지. PurifyCSS는 이런 불필요한 스타일들을 찾아서 자동으로 제거해주기 때문에, 개발자가 수작업으로 정리할 필요가 없어.

 

멘토는 설명을 덧붙였다. "이 과정을 통해 불필요한 코드가 제거된 깔끔한 CSS 파일을 얻게 돼. 결과적으로 웹페이지가 더 빠르게 로딩될 거야."

PurifyCSS의 작동 방식

PurifyCSS는 다음과 같은 과정을 거쳐 CSS를 최적화해:

  1. HTML 및 JavaScript 파일 분석: 페이지에서 실제로 사용되는 모든 HTML 요소와 클래스, ID를 분석해.
  2. 사용되지 않는 스타일 식별: CSS 파일에서 해당하는 요소에 적용되지 않는 스타일 규칙들을 찾고, 사용되지 않는 스타일을 제거해.
  3. 최적화된 파일 생성: 이렇게 남은 스타일만 포함된 최적화된 CSS 파일을 생성해.

이 과정은 대규모 프로젝트에서 반복적인 유지보수 작업을 줄여주고, 성능을 개선할 수 있어.

 

3. CSS 파일 압축하기 (Minification)

멘토는 CSS 파일의 크기를 줄이는 두 번째 방법을 설명했다.

 

"이제 Minification(압축)이라는 방법을 사용해보자. CSS 파일에서 불필요한 공백, 주석, 그리고 줄바꿈을 제거하면 파일 크기가 줄어들고, 페이지 로딩 속도도 빨라질 수 있어."

CSSNano 설치 및 사용 방법:

1. CSSNano는 CSS 파일을 압축하는 도구야. Node.js에서 설치하려면 아래 명령어를 사용하면 돼:

npm install cssnano -g

 

2. 그런 다음, 아래 명령어로 CSS 파일을 압축할 수 있어:

cssnano input.css output.min.css

 

멘토는 덧붙였다. "파일 크기를 줄이면 웹페이지가 더 빠르게 로딩될 수 있어."

설명: CSSNano는 CSS 파일에서 불필요한 부분을 제거하여 파일을 최소화(minify)해. 예를 들어, 여러 줄의 주석, 공백, 줄바꿈 같은 부분들이 모두 없어져서 CSS 파일의 크기를 줄일 수 있지. 작고 효율적인 파일이 로딩 속도에 긍정적인 영향을 줄 수 있어.

 

4. CSS 파일 분리하기

"모든 페이지에서 하나의 큰 CSS 파일을 로딩하는 대신, 페이지별로 필요한 CSS만 로딩하는 것도 성능을 개선하는 방법이야," 멘토가 설명을 이어갔다.

 

"이렇게 CSS 파일을 분리해서 필요한 스타일만 로딩하면 성능이 더 좋아질 수 있어."

예시 코드:

<head>
  <!-- 모든 페이지에서 사용하는 공통 스타일 -->
  <link rel="stylesheet" href="common.css">
  <!-- 특정 페이지에서만 사용하는 스타일 -->
  <link rel="stylesheet" href="about.css">
</head>
설명: common.css는 모든 페이지에서 공통으로 사용하는 스타일이고, about.css는 특정 페이지에서만 필요한 스타일을 정의하는 파일이야. 이렇게 필요한 CSS 파일만 로딩하면, 불필요한 파일을 로딩하지 않아서 페이지 성능을 개선할 수 있어. 특히 큰 CSS 파일을 하나로 관리하는 것보다 더 효율적인 방법이지.

 

 

5. 웹 성능 최적화 기법

멘토는 CSS 최적화 외에도 웹 성능을 전반적으로 향상시키기 위한 몇 가지 기법을 소개했다.

1. Lazy Loading

큰 파일(예: 이미지나 비디오)을 처음부터 모두 로딩하는 대신, 사용자가 해당 부분을 스크롤할 때 로딩하는 방식이야. 이를 통해 페이지의 초기 로딩 속도를 크게 개선할 수 있어.

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy-load" alt="이미지 설명">

 

이 예시에서 data-src 속성은 실제 이미지 파일 경로를 나타내며, 페이지가 처음 로드될 때는 placeholder.jpg라는 임시 이미지가 보이고, 사용자가 스크롤하면 실제 이미지를 로딩하게 돼. 이를 통해 초기 페이지 로딩 시간을 단축할 수 있어.

2. Gzip 압축

웹 서버에서 파일을 전송할 때 Gzip 압축을 사용하면, 파일 크기가 줄어들어 전송 속도가 빨라져. 서버에서 Gzip을 활성화하면, 클라이언트가 파일을 요청할 때 서버에서 압축된 파일을 전송하고, 브라우저가 이를 해제해 웹페이지를 보여줘. 이 설정은 서버 측에서 이루어져야 해.

3. 이미지 최적화

이미지는 웹페이지에서 큰 용량을 차지하기 때문에, 이미지 파일 크기를 줄이는 것도 성능 최적화에 매우 중요한 방법이야. 다음과 같은 방법으로 이미지를 최적화할 수 있어:

  • WebP 포맷: 기존 JPEG나 PNG보다 파일 크기가 작고, 품질이 떨어지지 않는 WebP 포맷으로 이미지를 변환하는 것이 좋아. 대부분의 최신 브라우저가 WebP 포맷을 지원해.
  • 이미지 압축 도구: TinyPNG나 ImageOptim 같은 도구를 사용해 이미지 품질을 크게 손상시키지 않으면서 파일 크기를 줄일 수 있어.

4. 파일의 비동기 로딩 (Async/Defer)

JavaScript 파일이나 CSS 파일을 비동기적으로 로딩하면, 페이지 로딩 속도를 개선할 수 있어. 일반적으로 JavaScript는 페이지 로딩이 끝날 때까지 로딩을 막기 때문에 성능에 영향을 미칠 수 있어.

  • async: 외부 스크립트 파일을 비동기적으로 로드하며, 페이지 로딩과 스크립트 로딩이 동시에 진행돼.
<script src="script.js" async></script>

 

defer: 스크립트 로딩을 뒤로 미뤄서, 페이지 로딩이 끝난 후 스크립트가 실행돼.

<script src="script.js" defer></script>

5. 캐싱 (Caching)

캐싱을 설정하면, 사용자가 페이지를 재방문할 때 페이지의 정적 자원(이미지, CSS, JS 등)을 다시 다운로드하지 않고 브라우저에 저장된 캐시된 버전을 사용하게 돼. 이를 통해 반복적인 요청을 줄이고 페이지 로딩 속도를 개선할 수 있어.

  • 브라우저 캐싱: HTML 파일, CSS 파일, 이미지 등을 캐시하면, 사용자에게 더 빠르게 페이지를 보여줄 수 있어.
  • Content Delivery Network(CDN): CDN을 사용하면, 사용자와 가까운 서버에서 콘텐츠를 제공해 전송 속도를 더욱 향상시킬 수 있어.

6. CSS 및 JavaScript 파일 최소화

멘토는 CSS 파일 최소화와 비슷하게, JavaScript 파일도 불필요한 주석이나 공백을 제거하여 **최소화(minify)**할 수 있다고 설명했다. 이를 통해 파일 크기를 줄이고 성능을 개선할 수 있어.

  • CSS와 JavaScript를 최소화하는 도구로는 UglifyJS, Terser, CSSNano 등이 있어.

 

6. 최적화가 사용자 경험에 미치는 영향

멘토는 최적화된 웹페이지가 사용자 경험에 미치는 영향도 설명했다.

 

"최적화된 웹페이지는 사용자들이 빠르게 접근할 수 있기 때문에 긍정적인 인상을 줄 수 있어. 로딩 속도가 빨라지면 사용자들은 더 오래 머무르고, 사이트에 대한 신뢰도도 높아지지."

 

멘토는 브라우저 개발자 도구의 Network 탭을 사용해 각 파일의 로딩 시간을 확인하는 방법도 보여주었다.

 

"이 탭에서 파일들이 얼마나 빨리 로딩되는지 확인할 수 있어. 최적화가 잘 적용되었는지 확인하는 좋은 방법이야."

 

결론

결국, 초코는 웹 성능 최적화와 CSS 파일 최적화를 통해 웹페이지의 속도와 효율성을 높이는 방법을 배웠다.

 

"이제 CSS 파일을 최적화하고, 웹 성능을 높이는 방법을 알았으니 더 빠르고 효율적인 웹사이트를 만들 수 있겠어요!" 초코가 기쁘게 말했다.

 

멘토는 미소를 지으며 말했다. "맞아, 웹 성능 최적화는 웹 개발에서 매우 중요한 부분이야. 최적화를 통해 더 나은 사용자 경험을 제공할 수 있을 거야."