프론트엔드 성능 개선기 - 이미지 최적화
관련 피드백을 받지 못했던 걸 보면 나만 느낀 것일 수도 있는데, 우리 프로젝트를 이용하면서 처음 화면 렌더링 시간이 좀 느린 것 같다는 생각이 들었다. 그래서 간단하게 라이트하우스(Lighthouse; 웹페이지의 품질을 측정하기 위한 오픈소스 자동화 도구)를 돌려보게 되었다.
크롬 개발자 도구에 들어가
이렇게 설정을 하고(모바일 환경에서 이용되는 경우가 많아 기기는 모바일로 선택), 분석 버튼을 누르니
이런 결과 화면이 나왔다. 역시 좀 느린 게 맞았어..!
여기서 눈에 띄는 항목으로 최대 콘텐츠 렌더링 시간(Largest Contentful Paint)이라는 것이 있는데, LCP라고 불리는 이 지표는 최대 텍스트 또는 이미지가 표시되는 시간을 의미한다고 한다. 즉, 페이지 주요 내용의 렌더링 완료 시점을 결정하는 지표인 것이다.
화면을 좀 더 내리면,
이렇게 렌더링 시간 개선을 위한 방법도 추천해 주는데, 이 중에 나는 '이미지 크기 적절하게 설정하기'와 '차세대 형식을 사용해 이미지 제공하기', 즉 이미지 최적화를 해보기로 했다. 첫 화면에 프로젝트를 소개하기 위해 PNG 파일을 세 개 넣어뒀는데, 아무래도 이게 문제가 되는 것 같았다.
각 내용을 클릭하면 더 자세한 정보가 나온다. '이미지 크기 적절하게 설정하기'는 반응형으로 이미지를 제공하거나 SVG와 같은 벡터 기반 이미지 형식을 사용하라는 것이었고, '차세대 형식을 사용해 이미지 제공하기'는 WebP와 같은 이미지 형식을 이용해 보라는 것이었다. 이 중에 나는 더 호환성이 좋은 SVG 형식을 사용해 보기로 했다. (WebP의 경우 iOS 16 이하의 iPhone에서는 작동하지 않는다.)
잠깐, PNG와 SVG의 차이?
| PNG (Portable Network Graphics) | SVG (Scalable Vector Graphics) | |
| 유형 | 픽셀 기반의 래스터 이미지 포맷 (너무 확대하면 입자가 거칠어지는 픽셀화 현상이 나타남) |
선, 점, 도형, 알고리즘의 복잡한 수학적 조합으로 만든 벡터 기반의 파일 포맷 (크기를 변경해도 해상도가 저하되지 않음) |
| 크기 | 큼 (고해상도 지원) |
작음 (이미지가 복잡해질수록 속도를 저하시킬 수 있음) |
| SEO (검색 엔진 최적화) |
비교적 덜 좋음 | 좋음 (텍스트로 작성되기 때문에 스크린 리더와 검색 엔진이 분석하기 용이함) |
| 호환성 | 좋음 | 비교적 덜 좋음 (IE8 이하 지원 X) |
| 애니메이션 | 지원하지 않음 | 지원함 |
| 투명도 | 둘 다 조절 가능 | |
(출처: https://www.adobe.com/kr/creativecloud/file-types/image/comparison/png-vs-svg.html)
먼저, 아래 사이트를 이용해 이미지 파일을 SVG 형식으로 변환해 주었다.
https://onlineconvertfree.com/convert-format/png-to-svg/
PNG to SVG online - OnlineConvertFree
Convert png to svg files online in seconds with OnlineConvertFree ✨ Convert png images to svg quickly, efficiently and safely 🔁
onlineconvertfree.com
그다음 .png 파일이 있던 자리에 .svg 파일을 넣어주면 되는데,
변환된 파일의 이 부분(드래그한 부분)을 복사 붙여넣기 해주면 된다.
(+) 여기서 나는 어차피 우리 사이트의 해당 이미지들은 300px * 300px 로 고정되어 렌더링 되기 때문에 width와 height을 300px로 바꿔서 넣어 주었다. (주황색 밑줄 부분)
(+) 이미지 고유 크기 자체를 300px * 300px 로 바꿔보기도 했는데, 성능도 94점까지 올라가고, 파일 크기도 거의 10분의 1로 줄었지만, 이미지 해상도가 너무 떨어져서 추천할 만한 방법은 아닌 것 같다.
이렇게 파일 형식을 바꾸고 다시 배포를 한 다음 라이트하우스를 돌린 결과!
- Lighthouse 성능 점수 15점 향상 (70점 → 85점)
- 최대 콘텐츠 렌더링 시간(LCP) 약 189.74% 개선 (7.4초 → 3.9초)
실제로 체감되는 첫 화면 렌더링 속도도 많이 빨라졌다.
이번 경험으로 신경 쓰이던 부분을 해결해서 정말 뿌듯했고, 수치적으로 확인을 하니 중간중간 내가 잘 하고 있는 건지 알 수 있어서 좋았다. 그동안은 기능 구현이 더 급해서 성능에 신경을 많이 못썼는데, 앞으로는 성능적인 부분도 좀 더 신경 쓰고 공부해 나가야겠다는 생각이 들었다. 작지만 이런 부분이 모여 사용자 경험을 만들고, 성공적인 비즈니스를 만드는 것이라고 생각한다.