Skip to content

이미지 레이지 로딩과 폰트 서브셋으로 Lighthouse 퍼포먼스 100점 찍기

lybell edited this page Aug 22, 2024 · 2 revisions

배경상황

스크린샷 2024-08-19 오전 11 53 46

저희 페이지는 실시간성이 중요한(실시간 이벤트가 존재함) 이벤트 페이지이기 때문에, 사용자에게 더 빠르게 컨텐츠를 보여주어야 해요. 그래서 크롬 Lighthouse의 Performance 점수를 올리는 걸 4주차의 목표로 삼고 있었어요. 저희는 Static Site Generation을 채택하고 있기 때문에, 당연히 fcp와 lcp가 빨리 나올 것이라고 기대하고 있었어요. 하지만, 이게 웬걸! (PC 기준) FCP가 5초 이상, LCP가 10초 이상 걸리는 것이었어요. 분명 클라이언트 사이드 렌더링에 비해서 스태틱 사이트 제너레이션은 자바스크립트 파싱 후 레이아웃 변경 과정을 생략해서 렌더링 속도를 개선한다고 알고 있었는데, 그렇지 않았던 것이었어요.

이미지 lazy loading

우선 가능한 전략은 이미지에 lazy loading을 적용시키는 것이었어요. 저희의 페이지는 스크롤 위주로 구성된 긴 페이지였어요. (작성중) 스크린샷 2024-08-19 오후 12 22 18

폰트 프리로드

(작성중) 스크린샷 2024-08-21 오후 2 16 01

폰트 서브셋

(작성중) 스크린샷 2024-08-22 오후 6 29 24

Clone this wiki locally