과도한 네트워크 페이로드 방지

당사에서 운영하는 「소지 계획」라는 사이트가 있습니다.
최근 재빌드가 끝나 새로운 디자인으로 다시 태어났습니다.
그래서 PageSpeed ​​Insights등에서 사이트 퍼포먼스의 평가도 측정하게 되었습니다만,
좀처럼 어려운 결과가 됩니다.



거기서 1항목씩 요인을 파괴해 갈 것입니다만,
우선, 모자이크 디자인의 이미지가 무겁다는 것이 눈에 띄었습니다.

비록 퍼스트뷰의 이 부분,



중앙을 투명하게 빼낸 프레임 타입의 PNG 이미지, minify 후에 224KB 있었습니다.
멀티 디바이스 대응이라고 하는 것으로, 2480x1228도 있는 것이 타당한 사이즈는 있습니다만.


그 밖에도 같은 방식으로 종횡 사이즈가 크고, 그 다음에 파일 용량도 크다(최대 500KB 초과의 것)라고 하는 것이 몇 파일 있었으므로, 이 모자이크 화상을 어떻게든 하려고 되었습니다.

PNG 형식에서 SVG 형식으로 변경

제반의 사정으로 종횡 사이즈는 현상 그대로(2480x1228!)로 정해졌습니다.
그렇다면 패턴을 단순화합니까? 경계의 색상 수를 절약? 해상도 떨어뜨릴까요? 라고 아다 이렇게 생각했는데, 오로지 수고가 걸립니다. 정직, 효과도 의문이고 결과도 보이지 않기 때문에 마음이 진행되지 않습니다.

다행히 소재 데이터는 패스와 패턴을 조합한 ai 데이터로 만들었습니다.
「일단 화상 형식 바꾸어 볼까」라고 옆옷의 일심으로, SVG로 다시 내보냈습니다.


그렇다면 무려 44KB에!
패턴이라든지 외부 파일화해 읽고 있는 것도 아니고, 제대로 기대대로 이미지였습니다.

SVGOMG 에서 minify를 걸면 25KB까지 떨어졌습니다.


이 시점에서 1/10까지 파일 용량이 내려갑니다.
옆옷이 베스트 솔루션을 낳았습니다.

gzip 압축으로 더욱 가볍게!

소지 계획에서는 gzip을 이용하므로 XML 기반 벡터 이미지인 SVG 이미지는 압축 효과를 기대할 수 있습니다.
실제로 업 해 본 바, 무려 4.7KB에.
1~2할 정도 가벼워지면 좋겠다고 말했는데, 이것은 기대 이상이었습니다.


※파일명은 전술과 다릅니다.

결과: 놀라운 사이즈 다운

224KB(PNG)→44KB(SVG)→25KB(SVGminify)→4.7KB(gzip)

효과가 나온 이유(상상)

단조로운 컬러 디자인이었다

좌표 지정 가능한 타입의 간단한 패턴이 사용되고 있었다

PNG는 종횡 사이즈가 크면 용량도 폭 상승하기 때문에 비교하기 쉬웠다

이미지에 따라 적합한 형식이 있는 것은 알고 있듯이.
단지 지금까지 PNG로 만든 이미지를 SVG로 만드는 것도 생각해도 좋을지도 모릅니다.
보급의 넥이었던 IE 문제도 해결할 수 있기 때문에, 사용미치가 많다고 합니다.

작성상 막힌 곳

실은 화면 사이즈에 따라서는 패스의 틈이 눈에 띄는 일이 있었습니다. 좌표를 맞추어도 어긋났기 때문에, 소수점의 반올림 방법이라든가?
이번에는 배경에 얇은 노란색 전칠 레이어 놓고 틈이 있어도 눈에 띄지 않게하는 것으로 해결했습니다.

PSI 평가는?

1점 정도 올랐나?
계속 꾸준히 노력하겠습니다.