웹성능개선 (1) 썸네일형 리스트형 [refactor] Lv.4 LCP 성능 향상을 위한 이미지 최적화 전략 정리 React로 구현한 코딩존 예약 페이지를 Lighthouse로 분석해본 결과, LCP(Largest Contentful Paint)와 관련된 성능 이슈가 주요 문제로 드러났다. 그중에서도 이미지가 LCP 요소로 잡히면서 렌더링 지연이 전체 퍼포먼스를 떨어뜨리고 있었다.이 글에서는 Lighthouse 분석 결과를 기반으로 이미지 성능 최적화를 위한 다양한 방법들을 소개하고 그 중 어떤 전략을 선택해 적용했는지 그 이유까지 설명하고자 한다.실험 환경브라우저: Chrome시크릿 모드에서 Lighthouse 분석 진행대상 페이지: /coding-zone (React SPA 기반)문제 요소: img.no-classes-img (수업이 없을 때 노출되는 안내 이미지)Lighthouse에서 받은 주요 경고 Perfo.. 이전 1 다음
