25-02-28 lighthouse 성능 검사 개선

Dustin Jung·2025년 2월 27일

웹최적화 최적화

프로젝트 CLAYN

목록 보기

6/10

lighthouse 검사

렌더링 차단 리소스 제거하기

문제 발생 이유:

브라우저는 HTML을 파싱하는 도중 또는 <link rel="stylesheet"> 또는 <script> 태그를 만나면 해당 파일을 다운로드할 때까지 렌더링을 멈춤.

특히 Google Fonts, 외부 CSS, 일부 JS 파일이 로딩될 때 화면 렌더링이 지연될 수 있음.

현재 문제는 폰트 관련 CSS 파일들이 로딩될 때, 렌더링이 지연되고 있음.

해결방안 => 외부 cdn rel=stylesheet 에서 preconnet로

브라우저가 미리 폰트 리소스를 가져오도록 preconnect 설정 추가

외부 cdn으로 가져온 font파일이나 swiper.css 파일들의 rel 속성을 preconnect로 수정함.

단, swiper.css의 경우 수정을 했다면 preconnect가 아닌 stylesheet를 써야 함.
왜냐하면 swiper.css를 stylesheet로 다운받아야지만, 내부 css에서 그 style을 집어서 수정 가능하기 때문.

그게 아니라면 swiper 또한 preconnect로 사용해도 무방함.

외부 cdn을 preconnect로 전환함으로써 렌더링을 줄이는 효과 발생.

이미지 요소에 width 및 height 명시

이 문제가 발생하는 이유:

이미지가 로드되기 전에는 브라우저가 이미지 크기를 모르기 때문에, 해당 공간을 0px로 처리함.
이후 이미지가 로드되면서 갑자기 해당 영역이 커지면서 다른 콘텐츠가 밀리는 현상이 발생함.
이로 인해 CLS 점수가 높아지고, 페이지 UX가 나빠짐.

해결방안 => aspect-ratio , 이미지에 크기 명시

css상으로 aspect ratio로 이미지 비율을 알려주고

html상에서 이미지 원본 크기를 명시해주면 해결 가능함.

이를 통해 페이지 CLS 점수가 높아지는 사태를 막아 UX 점수를 유지할 수 있음.

네트워크 페이로드가 커지지 않도록 관리하기

문제 발생 이유?
로드 속도를 줄이기 위해 이미지 최적화가 필요함.

해결 방안 -> 기존 img 파일들을 svg와 차세대 이미지 파일 형식으로 교체함

아이콘같은 요소에는 품질 변화를 막고 용량을 최소화 하기 위해서 SVG 파일 채용

다른 이미지 파일에 쓰일 PNG파일의 경우 차세대 이미지 포맷인 AVIF를 채택함.

변환 방식은 Squoosh 사용

기존 PNG 파일에서 90% 품질로 손실 압축을 진행하였으며, 이로 인해 기존 각각의 PNG 파일 대비 최소 70%에서 최대 86%의 파일 크기 절감 효과를 봄.

또한 낮은 용량에도 품질이 우수하고, 압축률이 높아 네트워크 사용량 절감을 통해 페이지 렌더링 시간에 매우 유리함.

그러나 본래 정석적인 방법으로는 이런식으로 써야 함.

<picture>
  <!-- AVIF 지원 브라우저에서 먼저 로드 -->
  <source srcset="image.avif" type="image/avif">
  <!-- WebP 지원 브라우저에서 AVIF가 지원되지 않으면 로드 -->
  <source srcset="image.webp" type="image/webp">
  <!-- AVIF와 WebP가 지원되지 않는 브라우저에서는 PNG 사용 -->
  <img src="image.png" alt="이미지 설명">
</picture>

하지만 본 프로젝트에서는 이 방식보다는

<img src="image.avif" alt="이미지 설명">

이렇게 기존 PNG 파일을 avif로만 대체하였음.

그 이유로는

실제 웹 배포보다는 포트폴리오 용도로 활용될 프로젝트이기 때문.

이 프로젝트는 상용 서비스가 아닌 개인 포트폴리오로 사용될 예정입니다.
따라서, 웹 호환성을 100% 고려해야 하는 대규모 배포 환경이 아니라, 최적화된 최신 포맷을 우선 적용하는 것이 더 적절하다고 판단했습니다.

AVIF 미지원 브라우저 사용 가능성이 극히 낮음

AVIF는 크롬, 엣지, 파이어폭스 등 대부분의 최신 브라우저에서 기본 지원됨
포트폴리오를 열람할 이용자는 개발자 또는 디자이너일 가능성이 높으며, 구형 브라우저(IE, 구버전 사파리)를 사용할 확률이 거의 없음을 고려함

GitHub 기반의 정적 호스팅 환경에서 용량 최적화 필요
- 본 프로젝트는 Git을 통해 배포되며, 별도의 서버 최적화 기능을 사용할 수 없음.
- 특히, GitHub의 파일 크기 제한을 고려할 때, AVIF로의 변환은 매우 효과적인 선택임

압축

CLAYN 프로젝트의 텍스트 기반 리소스(HTML, CSS, JS) 파일이 압축되지 않아, 113KiB 정도를 추가로 절감할 수 있는 상황, 이를 해결하면 페이지 로딩 속도를 개선하고, 네트워크 사용량을 줄일 수 있음.

해결방안 -> 자동 minify

현재 프로젝트는 Git으로 commit and push 하는 방식.

페이지 제공도 git에서 하기 때문에, picture 태그 안에서 source로 avif를 제공하지 않고, avif 파일 자체로 변경했던 방식 처럼, 프로젝트 폴더 내 .git/hook/pre-commit파일을 만들어서 css와 js 파일을 자동 minify하도록 수정, 그 결과