TIL - 성능, LCP 개선 중

LCP
지금 엉망진창임

• 개발환경 vs 배포환경 차이?
• 도대체 진짜 LCP는 무엇?
• priorty 적용? a link as image 태그 생성됐는데
• unoptimized={false/true}는 개발 환경에서 최적화 확인 어려움
  • 위 설정에 따라 LCP 요소가 바뀜
    • 근데 이게 priority={index===0} 적용 후 결과값임
  • LCP 요소가 콘솔과 라이트하우스에서 다르게 나옴
  • 로고에 priority를 적용해야 콘솔 경고가 안 뜸
    • fetchpriority 미적용 경고가 떴는데 실제 확인 필요
• 성능탭 보는 법
• sizes 코드 수정했는데 사실 이전에도 문제가 아니었던 건가..?
• TTFB
• 로드 지연 (현재 최악)
• 로드 시간
• 렌더링 지연

---

성능 (useCallback)

• props로 넘겨지는, 리렌더링 유발하는 함수 찾아 씌우기

---

도구

• Redux devTools는 RTK 상태 위주로 보는 거잖아
• TanstackQuery devTools는 쿼리, 쿼리키, 캐싱 위주
• 개발자 도구 성능탭 검사했더니 뭐가 막 나와...서 동공지진 제어 중

---

로컬과 배포 환경에서 LCP 개선하기
Fix Your LCP Score By Reducing Resource Load Delay
Why is my Load Delay really high for my LCP?
[Lighthouse] 적절한 이미지 크기 조정
[Next.js] Image