TIL - 성능, LCP 개선 중

강연주·2025년 9월 19일

📚 TIL

목록 보기
174/186

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

profile
아무튼, 개발자

0개의 댓글