lighthouse (2) 썸네일형 리스트형 PerformanceObserver를 활용해 간단한 LCP 측정기 구현 오늘은 웹 페이지의 로딩 성능을 평가하는 중요한 지표 중 하나인 LCP를 `PerformanceObserver`를 사용해 간단한 LCP 측정기를 만들어 보겠습니다.PerformanceObserver란 📖`PerformanceObserver`는 웹 페이지의 성능 데이터를 감지하고 분석하는 API입니다.브라우저가 기록하는 다양한 성능 데이터를 실시간으로 수집할 수 있습니다.구문new PerformanceObserver(callback) 관찰된 성능 이벤트가 기록될 때 호출되는 콜백입니다. entryTypesPerformanceObserver를 사용할 때, `observe()` 메서드를 통해 감지할 항목을 설정할 수 있습니다.Entry Type설명paintfirst-paint, first-contentful.. [트러블 슈팅] Next.js에서 이미지 최적화로 FCP 및 LCP 성능 개선하기: 이미지 압축을 통한 로딩 속도 향상 lighthouse를 통해 성능을 측정했을 때 이미지 파일이 커서 초기 로딩 성능이 저하되는 문제가 있어서 이미지 파일을 압축해 로딩 속도를 개선한 내용을 공유하려고 합니다. 발생한 오류 🔥성능 측정 이미지 사이즈가 큰 콘텐츠를 렌더링 할 때 `Lighthouse`를 통해 성능을 측정해 보니 `FCP`와 `LCP`가 지연돼 페이지의 초기 렌더링이 느리다는 문제를 확인했습니다. 성능 지표 `FCP (First Contentful Paint)`: 사용자가 처음 콘텐츠를 확인할 수 있는 시점`LCP (Largest Contentful Paint)`: 페이지에서 가장 큰 요소가 표시되는 시점 ❗이 두 지표는 사용자가 페이지를 빠르게 인식할 수 있도록 하는 중요한 요소입니다. 해결 과정 🔎Next.js의 ``.. 이전 1 다음
