이미지 최적화 (2) 썸네일형 리스트형 [트러블 슈팅] Next.js에서 이미지 최적화로 FCP 및 LCP 성능 개선하기: 이미지 압축을 통한 로딩 속도 향상 lighthouse를 통해 성능을 측정했을 때 이미지 파일이 커서 초기 로딩 성능이 저하되는 문제가 있어서 이미지 파일을 압축해 로딩 속도를 개선한 내용을 공유하려고 합니다. 발생한 오류 🔥성능 측정 이미지 사이즈가 큰 콘텐츠를 렌더링 할 때 `Lighthouse`를 통해 성능을 측정해 보니 `FCP`와 `LCP`가 지연돼 페이지의 초기 렌더링이 느리다는 문제를 확인했습니다. 성능 지표 `FCP (First Contentful Paint)`: 사용자가 처음 콘텐츠를 확인할 수 있는 시점`LCP (Largest Contentful Paint)`: 페이지에서 가장 큰 요소가 표시되는 시점 ❗이 두 지표는 사용자가 페이지를 빠르게 인식할 수 있도록 하는 중요한 요소입니다. 해결 과정 🔎Next.js의 ``.. Next.js 알아보기 6 (Asset 최적화) 이미지 최적화 📖next.js는 자동으로 이미지 크기를 최적화해주는 이미지 컴포넌트 `Image` 컴포넌트를 제공해 줍니다. `크기 최적화`: 각 기기에 맞는 크기의 이미지를 자동으로 제공하고, Webp 및 AVIF와 같은 최신 이미지 형식을 사용합니다.`시각적 안정성`: 이미지가 로딩될 때 레이아웃 이동을 자동으로 방지합니다.`빠른 페이지 로드`: 네이티브 브라우저 지연 로딩을 사용해 이미지가 뷰포트에 들어올 때만 로드됩니다.`자산 유연성`: 원격 서버에 저장된 이미지도 포함해 필요에 따라 이미지 크기 조정. 사용 방법로컬 이미지 사용하기import Image from 'next/image'import profilePic from './me.png'export default function Page(.. 이전 1 다음
