PageSpeed 점수, WebP 적용만으로 올라갈 수 있을까
이미지 용량만 줄이면 점수가 오를 거라는 기대는 절반만 맞습니다⠀
Serve images in next-gen formats 경고가 떠서 WebP로 바꿔봐도 점수가 그대로인 경우가 있습니다⠀
사이트 속도를 점검할 때 이 항목 하나만 보고 판단해도 되는지 짚어보겠습니다⠀
⠀⠀⠀
⠀⠀⠀
새로고침만 반복하다 발견한 경고 하나⠀
⠀⠀⠀
⠀⠀⠀
⠀⠀⠀
처음엔 사진 몇 장 올렸다고 느려질까 싶어 새로고침만 몇 번 해보게 되는데요⠀
PageSpeed Insights 진단 결과를 열어보면 Serve images in next-gen formats라는 항목이 눈에 걸립니다⠀
JPEG나 PNG로 올린 이미지를 WebP로 바꾸라는 안내인데, 이게 LCP 수치와 맞물려 있다는 점을 알게 됩니다⠀
⠀⠀⠀
구글이 공개한 자체 테스트에서는 손실 WebP가 동급 화질의 JPEG보다 약 25~35% 작다는 결과가 나왔습니다⠀
숫자만 보면 이미지 용량이 그만큼 줄어드니 점수도 비례해서 오를 거라 기대하게 됩니다⠀
⠀⠀⠀
용량은 줄어도 화질은 그대로였을까⠀
⠀⠀⠀
용량이 줄어드는 만큼 사진이 흐려지는 건 아닌지가 다음으로 궁금해지는 부분입니다⠀
구글이 웹상의 이미지 약 100만 장을 WebP로 재인코딩한 결과를 보면 화질 손상 없이 평균 39%의 용량 감소가 나타났습니다⠀
화질을 눈으로 구분하기 어려운 수준에서 파일 크기만 줄어든 결과라는 점이 이 테스트의 핵심입니다⠀
⠀⠀⠀
⠀⠀⠀
100만 장이라는 숫자가 걸리는 이유⠀
⠀⠀⠀
⠀⠀⠀
⠀⠀⠀
이 결과를 내 사이트에 그대로 적용해도 되는지 판단하려면 테스트 대상이 무엇이었는지부터 보게 됩니다⠀
대상은 대부분 JPEG이고 일부 PNG·GIF가 섞인 웹상의 이미지 약 100만 장이었습니다⠀
한두 장을 변환해 본 결과가 아니라 대규모 샘플을 평균 낸 값이라는 점에서, 개별 이미지 하나의 결과와는 성격이 다릅니다⠀
⠀⠀⠀
사진이 유난히 많은 포트폴리오 페이지나 상품 목록 페이지를 운영하는 분이라면 이 평균값이 자기 페이지에도 똑같이 나올 거라 기대하기보다는, 직접 몇 장을 변환해 비교해 보는 편이 판단에 도움이 됩니다⠀
⠀⠀⠀
25~35%와 39%, 숫자가 둘로 나뉜 이유⠀
⠀⠀⠀
본문 앞쪽에서 본 25~35%와 뒤에 나온 39%가 같은 수치처럼 보이지만 기준이 다릅니다⠀
25~35%는 손실 WebP를 동급 화질의 JPEG와 1장씩 비교했을 때 나온 압축 범위입니다⠀
39%는 100만 장을 한꺼번에 재인코딩해 낸 평균값이고, 이 두 수치는 비교 대상과 집계 방식이 각자 다릅니다⠀
⠀⠀⠀
⠀⠀⠀
그래서 확인된 건 용량, 점수는 아니었다⠀
⠀⠀⠀
⠀⠀⠀
⠀⠀⠀
지금까지 나온 수치를 다시 모아보면 확인된 사실은 이미지 용량이 줄어든다는 것까지입니다⠀
그 폭이 동급 화질 비교에서는 25~35%, 100만 장 평균에서는 39%까지 나타났다는 점이 WebP 적용으로 검증된 전부입니다⠀
PageSpeed 점수 자체가 오른다는 결과는 이 테스트 어디에도 나오지 않습니다⠀
⠀⠀⠀
점수는 LCP, CLS, INP 같은 여러 지표를 합쳐 계산되고, 같은 WebP 적용이라도 LCP 이미지를 미리 불러오는 설정이나 서버 응답 속도가 같이 바뀌는 사례가 많아 용량 감소분이 점수에 그대로 반영된다고 보기는 어렵습니다⠀
개인적으로는 WebP 적용 전후로 PageSpeed Insights의 LCP 수치만 따로 적어 두고 비교하는 쪽이, 전체 점수 변화만 보는 것보다 원인을 가리는 데 낫다고 봅니다⠀
⠀⠀⠀
이미지가 많은 페이지 하나를 골라 지금 점수와 LCP 수치를 메모해 두고, WebP 적용 뒤 같은 페이지를 다시 진단해 두 숫자를 나란히 적어 두면 됩니다⠀
You May Also Like
Semantic SEO란 무엇인가: 키워드 반복을 멈추고 의미를 채우다
블로그 제목 정하는 법, 검색 노출과 클릭률 높이기
