[CLS 개선] Lighthouse 성능 개선 기록: 76점 → 82점까지 올린 과정

회사 사이트의 웹페이지 품질을 측정하고 개선하기 위해 Google Lighthouse를 활용했습니다.

최초 측정 결과 성능 점수 76점을 받았고, Lighthouse에서 제안한 개선 사항 중 일부를 적용하여 82점까지 끌어올릴 수 있었습니다.

 

 

 

이번 글에서는 구체적으로 어떤 부분을 개선했는지, 그리고 그 과정에서 어떤 점을 고려했는지 정리해보겠습니다.

 

📂 목차

 

---

1.  Lighthouse에서 제안한 개선 항목

Lighthouse는 웹페이지 성능 저하 요인으로 여러 항목을 제안했으며, 이 중 두 가지를 주요 개선 포인트로 선정했습니다.

 

 

• 이미지 요소에 width 및 height 속성이 명시되지 않음
• CSS 파일 최적화(축소 및 중복 제거 필요)

이 두 가지는 단순해 보이지만 실제로는 CLS(Cumulative Layout Shift), 렌더링 성능, 네트워크 전송량에 직결되는 부분입니다.

CLS(Cumulative Layout Shift): 사용자가 예기치 않은 레이아웃 변화를 얼마나 자주 경험하는지 측정하는 항목

 

 

2.  개선 과정

(1) 이미지 요소의 width/height 미지정 → aspect-ratio 적용

Lighthouse에서는 모든 <img> 요소에 width와 height를 명시하라고 안내합니다.
이는 CLS 최소화와 밀접한 관련이 있습니다.

 

문제점

• HTML에서 이미지 크기를 지정하지 않으면 브라우저는 이미지를 로딩하기 전까지 레이아웃 크기를 알 수 없습니다.
• 그 결과 이미지 로딩이 늦으면 기존 배치가 밀리거나 흔들리는 CLS 문제가 발생합니다.

개선 방법

기존 코드:

<img src="/images/footer_bnr.jpg" alt="푸터이미지" style="width:100%;" />

 

수정 코드:

<img src="/images/footer_bnr.jpg" alt="푸터이미지" style="aspect-ratio: 64/5; width:100%;object-fit: cover;" />

→ 브라우저가 이미지의 비율을 먼저 계산하여 레이아웃이 안정되고 CLS 점수가 개선되었습니다.

 

(2) CSS 축소 및 Google Fonts 최적화

Lighthouse는 불필요하게 큰 CSS 파일과 중복된 Google Fonts import를 성능 저하 요인으로 지적했습니다.

 

문제점

• 프로젝트 내 여러 CSS 파일에서 Google Fonts를 중복 선언하고 있었습니다.
• 동일한 리소스를 여러 번 요청하면서 네트워크 요청 중복과 CSS 용량 증가가 발생했습니다.

개선 방법

Google Fonts import를 공통 CSS로 통합했습니다.

/* Before: 각 CSS 파일마다 중복 선언 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

/* After: 공통 CSS에 한 번만 선언 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Nanum+Gothic:wght@400;700;800&family=Nanum+Gothic+Coding&display=swap');

→ Google Fonts를 공통 CSS에 통합하고, CSS를 minify하여 로딩 속도를 개선했습니다.

 

3.  개선 결과

 

• 성능 점수: 76점 → 82점 (+6점)
• CLS 개선: 이미지 aspect-ratio 적용으로 시각적 안정성 확보
• 네트워크 요청 최적화: Google Fonts 중복 제거 및 CSS 축소

물론 아직 캐싱 정책, JS 번들링 최적화 등 개선 여지는 많지만, 이번 단계에서 작은 노력으로 성능을 눈에 띄게 향상시킬 수 있었습니다.

4.  마무리

Lighthouse의 제안은 단순한 경고가 아니라, 실제 사용자 경험(UX)과 성능에 직결되는 중요한 힌트입니다.
이번 개선 과정을 통해 “사소해 보이는 부분”이 실제 성능 점수와 체감 속도에 얼마나 큰 영향을 미치는지 확인할 수 있었습니다.

앞으로는 이미지 최적화, 캐시 정책 개선, JS 번들링 최적화 등을 적용하여 더 높은 점수를 목표로 개선해 나갈 계획입니다.