[ 성능 테스트 결과 ]

1. Main / Frame 페이지에 들어가는 이미지 확장자 변환

   (png → webp)

2. Main 페이지에서 가장 큰 파일을 미리 로드 하는 방법 적용

3. 폰트 및 사이트 주소 / DNS 서버 미리 로드

[ 이미지 최적화 성능 테스트 ]

1. 성능 테스트 전

   

   

   성능 테스트 전	수치
   FCP	0.7s
   Speed Index	1.2s
   LCP	2.7s
   Time to Interactive	1.2s
   CLS	0.12
   Total Blocking Time	110ms

   

   성능 테스트 전 이미지의 크기가 png, jpg 형태이기 때문에 이미지 크기를 줄여야 한다.

   이미지 크기 때문에 초기 렌더링에서 2.52s나 걸리고 있다.

   이미지에 관한 부분만 차지하고 있는 부분이 크기 때문에 확장자명을 일단 먼저 변경해보기로 했다.

2. webp 확장자로 50%로 압축 테스트

   

   성능 테스트 전	테스트 전→ 후
   FCP	0.7s → 0.7s
   Speed Index	1.2s → 1.1s
   LCP	2.7s → 1.1s
   Time to Interactive	1.2s → 1.1s
   CLS	0.12 → 0.12
   Total Blocking Time	110ms → 100ms

   • webp 파일로 변경 후 테스트하니 LCP 속도가 1.2s → 1.1s 줄어들었다.

3. 이미지 width와 height를 명시적으로 지정해 주므로 줄여주는 작업을 진행했다.

   누적 레이아웃 이동(CLS)를 최적화 해주기 위한 작업이다.

   <aside> 💡 CLS(Cumulative Layout Shift) 누적 레이아웃 이동 사용자 입력 500ms 이내에 발생하지 않는 레이아웃 이동에 대한 점수를 합산하여 콘텐츠의 불안정성을 측정 뷰포트에서 가시적인 콘텐츠가 얼마나 이동했는지와 영향을 받은 요소가 이동한 거리를 확인

   </aside>

   크기가 정해지지 않으면 CLS 값이 발생할 수 있다

   

   <img src={group2} alt="group" style={{ width: "200px" }} />
   

4. 폰트 및 DNS 서버 미리 로드하는 작업을 추가로 진행했다.

   // index.html
   <link rel="preconnect" href="<https://photo-pie.store/>" />
   <link rel="dns-prefetch" href="<https://photo-pie.store/>" />
   <link rel="preload" as="font" />
   

[ 트러블 슈팅 ]

하지만 문제는 50% 압축했기 때문에 확대를 하면 이미지가 깨져서 나오는 경우가 생긴다.

그리고 초기 렌더링은 되었는데 약 10분 후 새로고침 해보니 이미지가 깨져서 아무것도 보이지 않는 상황이었다.

로컬 상태에서는 깨지지 않지만 배포 후 이미지가 깨진다.

이상한 건 최초로 렌더링 했을 때는 화면이 잘 나오지만 시간이 지나면 출력되지 않는다.

avif 파일로 다시 테스트해보고 이미지가 깨지면 다른 방법을 시도하려고 한다.

1. avif 확장자로 평균 약 40%로 압축 테스트

   

   성능 테스트 전	테스트 전→ 후
   FCP	4.4s → 2.5s
   Speed Index	9.0s → 4.2s
   LCP	18.7s → 4.8s
   Time to Interactive	6.4s → 4.9s
   CLS	0.491 → 0.101
   Total Blocking Time	680ms → 580ms

   avif 확장자로 변경했을 때도 배포 후 이미지가 깨지는 현상이 발생했다.

   이번에는 초기 렌더링에서도 출력되지 않는다.

   이미지 자체가 깨져서 나오기 때문에 수치가 정확하지 않을 것 같아서 다른 방법으로 다시 시도해 보아야겠다.

2. 경로 변경 테스트

3. HTML에서 사용하기

🚨 서버 배포 후 webp 파일 이미지 깨짐 현상 해결 방법