ページ読み込みが3秒以上かかると53%のユーザーが離脱

※ Google Developers Japan 보다 인용

자사 서비스도 계측한 결과, 읽어들이기에 10초 이상 걸려 있고, PageSpeed ​​Insights 에서의 점수에서는 30점대로 낮은 수치가 되고 있었습니다.


※PageSpeed ​​Insights도

시스템·크리에이티브의 소수 정예로 사이트 최적화·고속화의 개선을 반년 이상 걸려 실시해, 웹사이트의 표시 속도를 2초대까지 줄여, 최적화의 점수도 최대로 80점대를 내는 데 성공했습니다 했다.

그 중 개선 항목 중 하나이기도 한 "화상 최적화"에 대해 간단히 이야기하고 싶습니다.

이미지 최적화

웹 페이지의 다운로드 용량을 조사한 결과 대부분이 이미지에서 차지했습니다.
최적화하면 웹 페이지 용량을 크게 줄이고 성능을 향상시킬 수 있습니다.

이미지 압축은 명령줄에서

지금까지 외부 웹 서비스의 「TinyPNG」를 이용해 이미지 압축을 실시해 왔습니다만, 커멘드 라인을 사용한 플로우로 변경했습니다.

장점

導入が楽
引数にオプションつければなんでもできる
作業スピードの短縮にも大きく繋がった

압축하자.

확장자 png 는 pngquant 를 사용.

확장자 jpg는 jpegoptim 를 사용.

설치

brew install pngquant //PNG
brew install jpegoptim //JPG

사용법

pngquant

sample.png를 압축해 봅니다.

pngquant --ext .png --force sample.png

--ext 및 --force는 선택 사항입니다.--ext 는 확장자 등.--ext -new.png로 설정하면 sample.png가 sample-new.png로 저장됩니다.--force는 덮어 쓰기 옵션입니다.

jpegoptim

sample.jpg를 압축해 본다.

jpegoptim --max=80 sample.jpg

--max는 선택 사항입니다.
위 예제의 --max=80는 품질 80%로 압축합니다.

압축 전·후의 화상을 비교

가로폭 150px 세로폭 94px의 화상을 커맨드 라인으로 압축한 비교가 이하가 됩니다.


보기에도 거의 변함없이 용량을 -2KB 줄일 수 있었습니다.
이번에 예로 든 이미지는 용량이 낮았지만 500KB 가까이 용량이 있는 이미지 등도 있습니다. 이 경우 이미지 크기를 줄이고 거기에서 압축하여 5 ~ 6KB 정도 압축합니다.
이 작업을 이미지 서버에 올린 단계에서 자동으로 압축하는 구조도 생각했습니다만, 이미지에 따라서는 거칠어져 보이기 어려워지는 문제도 있었기 때문에, 꾸준히 수작업으로 하나하나 압축해, 육안으로 화상 확인하려고합니다.

꾸준히 이러한 흐름을 밟으면서 이미지 최적화 작업을 진행하고 있습니다. 수수한 작업일지도 모르지만, 대폭으로 사이트 퍼포먼스를 개선할 수 있었습니다.
사이트가 무겁다고 느낀 분은, 꼭 이 플로우를 도입해 봐도 좋을지도 모릅니다.