본문 바로가기

Marketing

LCP 웹페이지 이미지 최적화 실패 (Performance Lab 플러그인 후기)

 

LCP 웹페이지 이미지 최적화하기

- Performance Lab 플러그인 후기 -

 

 

 

 

Performance Lab 플러그인 사용 전

플러그인 사용 전 모바일 성능 점수플러그인 사용 전 데스크탑 성능 점수
플러그인 설치 전 모바일, 데스크탑 성능

 

 

 

 

Performance Lab 플러그인 사용 후

 

Modern Image Formats & Auto-sizes for Lazy-loaded Images activated
Modern Image Formats & Auto-sizes for Lazy-loaded Images

 

차세대 모던 이미지 포맷 WebP 혹은 AVIF 변환을 위해 플러그인을 깔았는데, 그건 호스팅 제공업체에서 활성화 하란다. 

속았네 속았어.

 

Performance Lab한테 속았다. 모던 이미지 지원 안된단다.
Performance Lab한테 속았다. 모던 이미지 지원 안된단다.

 

2점 개선된 모바일 성능 점수

 

TBT 10점모바일 토탈 40점
TBT 수치가 조금 상승한 모바일 성능 점수

 

 

 

오히려 떨어진 데스크탑 성능 점수

 

CLS 1점LCP 5점데스크탑 성능 토탈 52점
데스크탑 성능은 또 왜 내려갔어?

 

 

 

 

진짜 왜이래

 

 

 

그래서 Image Prioritizer 를 활성화 해보았다.

그랬는데 웬걸? 9점으로 떨어짐ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

CLS 1점모바일 성능 9점
앵?

 

 

위기를 직감, html 태그 내 img 속성에 fetchpriority 를 추가했다.

 

<img class="js-img-src" alt="slider image" data-src-pc="<?php echo $landing_image_pc?>" data-src-mo="<?php echo $landing_image_mobile?>" fetchpriority="high">

 

그랬더니 성능 모두 올라갔으나, 초기보다 떨어진 상태...

 

 

데스크탑 67점
초기 점수 67점. 이정도로 충분하지 않다...

 

 

이럴거면 플러그인 왜 깔지? 싶어서 다 삭제했다.

 

 

 

그리고 마지막 희망으로 smush 설치

 

smush 대시보드
최적화중

 

 

데스크탑 71점
오???

 

 

 

오 smush는 효과가 있다.