페이지 스피드 인사이트로 블로그 성능측정을 진행하니 진단결과 중 차세대 형식을 사용해 이미지 제공하기 항목이 표시되었다. 이미지용량은 웹페이지로딩 속도에 큰 영향을 미쳐 SEO(검색엔진 최적화)측면에서 매우 중요하며 호스팅비용 및 스토리지용량 절감에 큰 도움이 되므로 워드프레스에 차세대 이미지 형식을 사용하여 이미지를 적용해 보도록 한다.
차세대 형식을 사용해 이미지 제공
WebP(웹피) 이미지형식은 구글에서 개발한 손실 및 무손실 압축으로 웹의 다양한 이미지를 이미지 손실없이(사람의 눈으로 구분이 어려울정도로 이미지 품질저하 없이 용량을 감소) JPEG 및 JPEG 2000보다 평균 30% 압축효율이 높다고 한다. 또한 대부분의 웹브라우저에서 지원하므로 큰 문제는 없을 것 같다.
Performance Lab 플러그인 설치
다양한 플러그인 중 페이지스피드인사이트에 언급된 Performance Lab 플러그인을 설치해 보았다. 해 플러그인은 이미지파일을 업로드할때 자동을 WebP파일로 변환하여 업로드를 해준다. WP관리자>플러그인>새플러그인추가를 선택하고 플러그인 검색에 Performance Lab을 입력하여 검색한 뒤 설치하고 설정을 선택한다.
Performance Lab 플러그인 설정
WP관리자>설정>퍼포먼스에서 모던 이미지 포맷을 활성화 하고 설정으로 진입한다.
이제 모던 이미지 포맷을 설정한다.
- 이미지 출력 형식 : WebP로 설정. AVIF지원은 호스팅 제공업체에만 활성화 된다고 한다.
- 출력 폴백 이미지 : WebP호환성문제발생시 대체 되는 이미지. WebP형식과 원본형식들이 저장된다. 저장공간을 절약하려면 설정하지 않는다.
- 모든 대체 이미지 크기 생성 : 사용자 지정 크기를 포함한 모든 대체 이미지 생성. WebP형식과 원본형식들이 저장된다. 저장공간을 절약하려면 설정하지 않는다.
- 사진요소 : 실험적 기능이라 설정하지 않았다.
적용결과
테스트에 사용된 파일은 1024×686픽셀에 300DPI 사진파일이다. 용량은 203KB에서 109KB로 46%정도 감소하였으며 이미지품질은 눈으로 보아서는 차이를 느낄 수 없었다. 또한 페이지스피드인사이트를 다시 실행하여 진단경고가 사라진 것도 확인하였고 성능점수도 향상되었다.
마치며
WebP이미지 변환을 워드프레스 Performance Lab 플러그인으로 간단하게 끝낼 수 있었다. WebP를 지원하는 다른 플러그인도 많이 있으므로 꼭 설치하여 적용하도록 하자.