LCP 개선하기 / 아워홈 사전과제

1. Why?

아워홈 과제는 상품 리스트 + 장바구니 페이지 만들기. 도메인 특성을 고려했을 때, 클라이언트 단에서 어떤 부분을 고려해서 개발해야할까 고민했다.

 

쇼핑몰 사이트니까 이미지가 미친듯이 쏟아진다는 특성이 있다는 것을 떠올리고 Lighthouse로 랜더링 시간을 측정해보았다. 측정해보니까 LCP(Largest Contentful Paint)시간이 지나치게 길어서 점수가 낮게 나왔다. 점수를 올려보자.

---

2. How?

Font 바꾸기

font 형식을 ttf에서 woff2로 변경. 호환성이 낮은 woff2보다는 용량이 30%정도 크더라도 호환성이 높은(물론 ttf만큼은 아니지만)woff로 하고 싶었으나, suit가 woff가 없어서 woff2로 설정. 폰트 파일 사이즈가 570, 578kb에서 166, 169kb로 축소.

Lazy Loading

처음 보여지는 이미지만 우선 가져오고, 다른 이미지들은 사용자가 이미지가 보여지는 위치로 이동했을때 불러오는 방식.

직접 json으로 예시 데이터를 만들었어서 32개 기준으로 미세하게 LCP가 개선되었음. 만약 더 많은 이미지가 있었다면 더 큰 차이가 있었을 듯. 

추가로 할 수 있는 일

Next/Img 처럼 이미지를 jpg대신 webp로 변경시켜서 출력하도록 하면 꽤 유의미한 성능 차이가 있을 듯 하다.

---

3. 래퍼런스

https://tech.kakao.com/2023/06/13/fe-performance-improvement-1/

FE 성능개선기 1부: 주문하기

https://tech.kakao.com/2023/06/13/fe-performance-improvement-2/

FE 성능개선기 2부: 카카오 비즈니스폼

https://medium.com/idus-tech/%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94-%EC%97%AC%EC%A0%95-1-aws-serverless-image-handler-d14ad6af8ce8

이미지 최적화 여정(1): AWS Serverless Image Handler

https://velog.io/@apro_xo/%EC%9B%B9-%ED%8F%B0%ED%8A%B8%EC%99%80-%EC%9B%B9-%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94