Lighthouse 성능 분석 및 WebP 이미지 사용해보기

웹 페이지의 성능을 측정하고 진단하기 위한 도구로 Google Chrome의 Lighthouse의 권고사항 중 하나인 WebP, AVIF와 같은 차세대 이미지 형식을 사용하는 방법을 알아 보겠습니다.

 

 

이번 포스트에서는 기존의 이미지를 WebP 형식으로 변환하여 웹 페이지에서 사용할 수 있는 방법을 설명하겠습니다.

 

로컬 페이지로 성능 테스트

먼저 로컬에 JPEG 형식의 이미지를 하나 표시하는 페이지를 만든 후 Chrome Lighthouse로  성능을 테스트합니다. 이미지는 그냥 제 이전 포스트를 캡쳐한 이미지를 사용하겠습니다.

Chrome Lighthouse 사용하기

 

위 그림과 같이 크롬 개발자 도구를 열고 Lighthouse 탭으로 이동하여 [Analyze page load] 버튼을 선택하면 아래와 같이 성능을 분석한 결과가 표시됩니다. 물론 로컬에 있는 페이지를 불러온 것이고 달랑 이미지만 하나 넣었으므로 성능 지수는 부족함이 없이 나오지만 권장 사항 중에 아래와 같은 내용이 표시됩니다. (실제 웹 페이지를 분석해 보면 많은 내용들이 나옵니다.)

차세대 이미지 형식 권장

 

현재 사용 중인 JPEG 포맷 대신 WebP나 AVIF 포맷을 사용ㅇ하면 126.8 KiB가 발생하는 트래픽을 73.0KiB 까지 줄일 수 있다는 내용입니다. 이번 포스트에서는 이 중 WebP 포맷으로 변환하여 사용해 보겠습니다.

 

WebP 변환 Command-Line 도구 다운로드

Photoshop 플러그인 형태로도 사용할 수 있지만 우리는 Command-Line 도구를 다운로드 하여 기존 이미지를 변환하는 방법으로 진행해 보겠습니다. 아래 URL로 가서 각자가 사용하는 환경에 맞는 버전을 다운로드 합니다.

https://developers.google.com/speed/webp/docs/precompiled

Precompiled Utilities  |  WebP  |  Google Developers

 

다운로드를 완료하면 각자 사용을 원하는 경로에 압축을 해제합니다. 환경변수 PATH에 등록하면 어느 경로에서든지 사용할 수 있습니다. 저 같은 경우는 C:\tools\libwebp-1.2.3-windows-x64 경로 아래 압축을 해제 했으며, 필요한 명령어들은 C:\tools\libwebp-1.2.3-windows-x64\bin 아래 있습니다.

 

이미지 변환해보기

이제 로컬 페이지에서 사용한 JPEG 형식의 이미지를 WebP로 변환해 보겠습니다. 연습 과정이니 PATH를 등록하지 않았다면 그냥 bin 디렉토리 아래 해당 이미지를 복사합니다. 변환 전 이미지의 크기를 확인해 보겠습니다.

변환 전 이미지 크기 확인

 

변환 전 blog_capture.jpg 이미지 파일의 크기는 129,872 Bytes  입니다. 아래 명령어를 입력하여 이미지를 변환해 봅니다.

C:\tools\libwebp-1.2.3-windows-x64\bin>cwebp -q 50 blog_capture.jpg -o blog_capture.webp

 

위 명령은 이미지 품질을 50%으로 하여 WebP 형식으로 이미지를 변환하겠다는 의미입니다. cwebp 명령어로 WebP 인코딩을 위한 명령에 대한 상세 설명은 아래 페이지를 참고하시면 됩니다.

https://developers.google.com/speed/webp/docs/cwebp

cwebp  |  WebP  |  Google Developers

 

변환을 완료한 후 이미지 크기를 확인해 보면 아래와 같습니다.

변환 후 이미지 크기 확인

40,124 Bytes로 이미지 크기가 감소했습니다. 압축률이 상당히 좋아 보입니다.

 

 

변환한 이미지 사용하기

WebP 이미지 사용을 위해서는 WebP를 지원하지 않는 브라우저 지원을 위해 <picture> 태그를 사용해야 합니다. 변환 전에는 아래와 같은 마크업을 사용해서 이미지를 표시했습니다.

<img src="img/blog_capture.jpg">

 

WebP 이미지를 사용하기 위해서는 아래와 같이 마크업을 변경합니다.

<picture>
    <source type="image/webp" srcset="img/blog_capture.webp">
    <source type="image/jpeg" srcset="img/blog_capture.jpg">
    <img src="img/blog_capture.jpg">
</picture>

 

위와 같이 마크업을 구성하면 WebP를 지원하지 않는 브라우저에서는 jpeg 형식의 이미지를 사용하고, WebP를 지원하는 브라우저에서는 webp 형식의 이미지를 사용합니다.

 

변경 확인

Chrome의 [Network] 탭에서 사용한 이미지의 종류를 확인해보면 아래와 같이 WebP 이미지를 로딩했음을 확인할 수 있습니다.

WebP 이미지 사용 확인

 

Lighthouse에서 다시 Analyze 해보면 차세대 이미지를 사용하라는 권장 사항이 사라진 것도 확인할 수 있습니다.

Lighthouse 확인