댕댕어디가 리팩토링 - #2 검색 페이지

📌 검색 페이지는 반려동물동반가능시설을 현재 위치에 가까운 순으로 보여주기도 하고, 장소명을 검색하거나 지역, 시설타입에 맞춰 필터링 검색도 가능한 페이지이다.

 

최적화 시작하기도 전에 카테고리 2개가 목표치를 넘어가 있어서 순조로울 거라고 생각했는데... 아니었다..ㅎㅎ

 

📌 1️⃣ Performance (성능)

 

✅LCP(Largest Contentful Paint)란?

LCP(최대 콘텐츠 페인트)는 웹페이지의 핵심 콘텐츠가 화면에 표시되는 데 걸리는 시간을 측정하는 성능 지표로, 핵심개념은 사용자가 웹페이지 방문 시 가장 큰 이미지나 텍스트 블록이 언제 렌더링되는지를 측정하는 것이다.

구글은 LCP가 2.5초 이하여야 좋은 성능으로 평가하는데, 기존코드에서 지도가 뜨는데 오래 걸릴 시 나오게 한 로딩 컴포넌트는 LCP요소로 잡히지 않아서 맵이 뜨는 걸 기준으로 하다보니 4.6초로 측정된 것 같다.

 

그래서 로딩컴포넌트 대신 maps static api를 사용해 static map을 먼저 보여주는 방식을 시도해봤다.

 

오른쪽의 지도 이미지를 로딩 컴포넌트 대신 지도 자리에 뜨게 했다가 구글 맵 로드가 끝나면 없어지게 하는 방법이었는데, 기존의 맵 로딩 방식에는 적용하기 힘들어서 코드 구조를 좀 바꿔야하는 어려움이 있었지만.. 결국 해냈다..!

LCP요소가 staticmap.png로 잡히면서 약 2초가량 줄어들었다.

 

 

📌 2️⃣  Best Practices (권장 사항)

✅ 서드파티 쿠키(Third-Party Cookie) 란?

사용자가 방문한 웹사이트(퍼스트 파티)와 다른 도메인이 저장하는 쿠키로, 주로 광고추적, 사이트 간 사용자 데이터 수집 등에 사용된다.

 

우리 페이지도 네이버 애널리틱스와 구글 광고 스크립트가 들어가서 서드 파티 쿠키가 사용되고 있었는데,

크롬에서 2024년부터 점점 서드파티 쿠키를 제거하고 있어서 이렇게 점수가 깎이는 요인이 된 것이다.

 

그래서 간단한 해결방법으로는 네이버 애널리틱스와 구글 광고 스크립트 코드를 없애는 방법이 있었는데, 사용자 모집을 더 이상 하지 않을 거였기 때문에 일단 이 방법으로 진행했다.

 

그리고 브라우저 오류는 대부분 컴포넌트에 prop값이 기대하던 값과 달라서 이거나 불필요한 props가 DOM에 전달돼떴던 것들로 $ prefix 방법을 적용해 콘솔 오류들을 없애 점수를 93점까지 올릴 수 있었다.

 

 

그리고 콘솔 오류들을 없앴더니 TBT시간이 크게 줄어들면서 성능 카테고리의 점수도 약 9점 정도 올랐다!

 

로컬 점수

배포 후 점수