성능개선 (1) 썸네일형 리스트형 [트러블 슈팅] Next.js에서 이미지 최적화로 FCP 및 LCP 성능 개선하기: 이미지 압축을 통한 로딩 속도 향상 lighthouse를 통해 성능을 측정했을 때 이미지 파일이 커서 초기 로딩 성능이 저하되는 문제가 있어서 이미지 파일을 압축해 로딩 속도를 개선한 내용을 공유하려고 합니다. 발생한 오류 🔥성능 측정 이미지 사이즈가 큰 콘텐츠를 렌더링 할 때 `Lighthouse`를 통해 성능을 측정해 보니 `FCP`와 `LCP`가 지연돼 페이지의 초기 렌더링이 느리다는 문제를 확인했습니다. 성능 지표 `FCP (First Contentful Paint)`: 사용자가 처음 콘텐츠를 확인할 수 있는 시점`LCP (Largest Contentful Paint)`: 페이지에서 가장 큰 요소가 표시되는 시점 ❗이 두 지표는 사용자가 페이지를 빠르게 인식할 수 있도록 하는 중요한 요소입니다. 해결 과정 🔎Next.js의 ``.. 이전 1 다음
