LCP 817% 향상시키기

문제가 생겼어

문제가 생겼다. 이미지 로딩이 너무 느리다. 2024년 단페스타 앱에서 사용자의 이목을 끌기 위해 초기 페이지에 크게 라인업 이미지를 띄워 주었는데, 이미지 로딩에 너무 오랜 시간이 소요되고 있다. 첫 페이지에 보이는 이미지를 최적화해서 LCP를 줄여보자.

우선순위 설정하기

첫번째로 찾은 문제는 캐러셀이었다. 여러 날짜의 라인업 이미지들을 캐러셀로 보여주고 있었는데, 사용자가 스크롤을 하지 않아도 이미지들을 미리 로딩하고 있었다.

블러 이미지 '올바르게' 사용하기

이런 저런 고비 있다가 알고보니 plaiceholder를 이용해서 만들어주던 blurImage base64 때문에 느렸던 것