렌더링과 로딩최적화로 퍼포먼스 점수 30% 개선
📍 개선 전 퍼포먼스 점수
내 프로젝트 랜딩페이지의 초기 Lighthouse 점수는 73점이었다. 만족스럽지 못한 점수로 최적화를 진행하기로 했다.
📍 성능저하 원인 분석
Lighthouse 퍼포먼스 지표에 대해 알아보았다.
TTI - 사용자가 처음으로 이벤트를 발생시킬 수 있기까지 걸리는 시간
FCP - 브라우저에 첫번째 컨텐츠가 로딩되는 시간
SI - 컨텐츠가 얼마나 빠르게 로딩 되는 지
LCP - 가장 큰 컨텐츠가 로딩되는 시간
TBT - 로딩 중 중간중간 Block이 발생한 시간
그리고 지표를 기반으로 점수를 분석해보았고, 크게 두 가지 원인으로 성능이 저하된 거라 판단하였다.
1) 가장 큰 컨텐츠인 배너 이미지의 로딩 시간이 길다
2) 렌더링 차단 요소가 차지하는 시간이 길다
배너이미지 로딩시간 단축과 렌더링 차단요소인 스크립트와 스타일 시트 제어에 집중하여 최적화를 진행해보았다.
📍 시도한 방법
1) 배너 이미지 preload
preload를 사용하면 리소스를 우선적으로 가져올 수 있기 때문에 로딩 시간을 줄일 수 있다.
배너이미지는 큰 리소스었기 때문에 preload를 사용해주었다.
<link
rel="preload"
href="./src/assets/banner1_wp.webp"
as="image"
type="image/webp"
/>
2) webp로 배너 이미지 포맷 변환
webp 이미지 포맷은 이미지 품질은 유지하면서 크기는 줄여준다. 크기가 작아지기 때문에 로딩 시간을 줄일 수 있다.
랜딩페이지에 보이는 상품 이미지는 webp 포맷의 썸네일용 이미지를 통해 최적화를 거친 상태였지만 정적 파일로 갖고있는 png로 로딩되고 있었기 때문에 새롭게 변환해 추가해주었다.
네트워크 탭으로 속도를 측정해본 결과 28ms -> 5ms로 줄어든 것을 확인할 수 있었다.
+) 최근 webp는 대부분의 브라우저에서 지원하긴 하지만, 혹시 지원하지 않는 브라우저가 있다면 picture태그를 사용하여 브라우저별 지원하는 이미지 포맷에 맞출 수 있다.
<picture>
<source srcSet={banner1wp} type="image/webp" />
<source srcSet={banner1} type="image/png" />
<img src={banner1} alt="배너이미지"/>
</picture>;
3) 스크립트 실행 시기 제어
스크립트는 렌더링 차단 요소로 분류된다. 렌더링 중 스크립트를 마주하게 되면 해당 스크립트가 다운로드되고 실행될 때까지 렌더링 과정이 중단되기 때문이다.
이를 방지하기 위해 스크립트의 defer 속성을 사용할 수 있다.
defer 속성은 스크립트가 백그라운드에서 다운로드되고 렌더링이 끝난 후 실행될 수 있도록 지연시킨다.
나는 결제SDK를 사용하기 위한 스크립트를 필요로 했기 때문에 해당 스크립트에 defer 속성을 추가하여 지연 실행되도록 하였다.
<script defer src="https://cdn.iamport.kr/v1/iamport.js"></script>4) 폰트 최적화 ( 폰트 preload )
스타일 시트도 렌더링 차단 요소로 분류된다. 브라우저는 정확한 스타일 계산을 위해 CSS 파싱이 끝난 후에 렌더링이 진행된다. 그래서 웹 폰트 로딩이 지연되면 렌더링도 지연되는 것이다.
이를 방지하기 위해 preload로 웹폰트를 비동기적으로 로드할 수 있다.
비동기 로드가 완료되면 onload 이벤트 리스너를 통해 rel 속성을 스타일시트로 변경하여 실제 스타일시트로 적용되도록 한다. 그리고 이벤트 리스너가 한번 실행된 뒤에는 메모리 누수 방지를 위해 명시적으로 제거한다.
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap"
rel="preload"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
📍 개선 후 퍼포먼스 점수
96점으로 30%정도 향상된 점수를 받았다. 이외에도 더 최적화할만한 요소가 있는 지 찾아봐야겠다 ~~~
