📖 이전 성능 개선 편을 참고해주세요.

1. 성능 개선 #1. LightHouse로 성능 파악해보기
2. 이미지 용량 줄이기

최적화를 정~말 많이 해야되겠다는 것을 전편 LightHouse를 통해서 알게 되었다. 아무리 클라이언트 서버이지만 52점은 개선해야할 부분이 많다는 의미를 내포하고 있다.
그래도 이번 포스트부터는 하나하나 고쳐나가는 절차를 밟아 보려고 한다!

이미지 용량 최적화

먼저 예제인 CampUs 에서는 Splash Page 후에 메인 페이지에 네비게이트 되는 구조로 되어 있기에, 메인페이지를 기준으로 진단한 정보를 토대로 다룰 예정이다.

처음 렌더링 되면 이런 페이지가 나오게 되는데, 일부분만 보여져서 그렇지 이미지를 많이 사용한 페이지이다.

그럼 해당 페이지를 LightHouse 는 어떻게 판단했는지 봐보도록 하자.

LightHouse로 문제점 파악하기

이전에 스캔했던 LightHouse 분석표를 가져와봤다. 그리고 현재 성능은 52라고 노란색 표시가 되어있으며, 하단에 치수별 색깔 즉, 심각성을 눈여겨볼 수 있다.

그리고 아래의 그림을 한번 보자.

해당 이미지는 이미지 크기에 관련한 문제를 다루고 있는 분석표다. 물론 위의 지표에서 점수가 저렇게 나온 이유 중 몇 가지를 하단에서 다루는 데, 그중 큰 부분을 차지하고 있다.
빨간색으로 표시가 되어있으며 적절한 크기의 이미지를 게재 모바일 데이터를 절약하고 로드 시간을 단축하세요 라고 나와있다.

해당 이미지를 계속 사용하게 된다면 로딩도 느려질 뿐더러, 큰 용량으로 이루어져있는 이미지를 로드하는데 데이터도 많이 든다는 것이다.

이미지파일 Webp 확장자로 변환

우선 api로 받는 이미지가 아닌, 직접 이미지를 import 하여서 그린 컴포넌트의 로딩 기간을 단축시키는 방법이 있다.

기존 이미지 파일인 jpg, png 등은 용량이 상대적으로 크기 때문에 용량을 줄이게 된다면 렌더링 시간을 단축시켜 퍼포먼스 적으로 우수한 모습을 보이는데 도움을 줄 수 있다. 바로 Webp 형식으로 변환하여 사용하면 된다!

webp란

구글에서 만든 이미지 포맷으로 Web 에서만 상용가능한 파일 형식이다.
최대의 장점은 이미지 포맷 (GIF, PNG, JPEG)을 모두 아우르며, 손실 압축 (JPEG) 포맷보다 30% 작은 용량으로, 비손실 압출 포맷 (PNG, GIF) 보다 20 ~ 30% 작은 용량의 파일로 형성이 가능하다.

다만 해당 확장자를 지원하지 않는 브라우저, 기기 등의 환경이 몇 존재한다는 단점이 있긴하다.

ConvertIo

이번엔 이미지 형식을 webp로 변환해보자.
ConvertIo 라는 사이트가 있는데 들어가보면 쉽게 알아볼 수 있다.
그래서 일단 내가 변환을 해오긴 했다. 아래 사진을 참고하길 바란다.

image1.jpg를 위의 ConvertIo 에서 변환한 것이 바로 아래의 image1.webp 이다.

그리고 파일의 우측을 보면 340kb 이였던 파일이 90.1kb 까지 줄어진 것을 확인할 수 있다.

import 하는 이미지는 이런 형식으로 크기를 대폭 줄일 수가 있다.

최적화 진행해보기

자 어떻게 해야되는지 알게되었으니 바로 프로젝트에 적용해보자.

위의 사진은 메인페이지를 이루고 있는 Carousel Slider 중 jpg 파일을 import 해서 작성한 코드의 일부분이다.

원래는 jpg 의 형식이였으나, 위에서 언급했던 webp로 전환하여 다시 LightHouse를 통해 검사해보았다.

성능이 조금이나마 좋아졌다는 것을 확인할 수 있다.. (물론 52 -> 57 이지만..)
조금 오른 이유는 이러하다. 현재 이미지 파일들의 9할 이상이 api에서 따온 url 주소라서 직접적으로 관여할 수 없기에, 그나마 변형 가능한 이미지들만 처리했기에 그렇다.

어쨋든 성능 최적화의 'ㅅ' 만큼은 했다는 것에 의의를 두려고한다.

다음 포스트에서는 api로 부터 받아온 이미지 URL을 클라이언트 서버로 돌릴 때 용량 감소 처리할 수 있는 방법을 알아본 뒤에 다뤄볼까 한다.

여담

금일 역삼의 어느 곳에서 면접을 봤는데, 그 동안 만들었던 서비스에 패치노트를 작성하여 버전관리한 부분에서 칭찬을 받았다.
이 얘기를 왜하냐면, 그 서비스 또한 계속해서 공부한 내용을 바탕으로 추가적으로 유지보수 및 성능 최적화 등을 하였기에 버전관리를 할 수 있기 때문이다.
생각보다 꽤나 좋게 봐주셔서 기분이 쪼금 좋다🥰 (하지만 너무 떨어서, 질문과 다른 방향으로 몇 번 입밖으로 말이 헛나가서.. 오늘은 이불을 걷어차면서 잘 예정이다.)

고로 프로젝트 최적화는 정말 어떻게보면 신입 프론트엔드 개발자들에게 강한 경쟁력을 주는 요소일지도 모른다는 생각이 확고해져간다.

이 부족하디 부족한 프론트엔드 개발자의 글을 본 주니어분들은 성능 개선을 한번 다뤄보고, 더나아가 Github ReadMe에 변경점을 패치노트로 버전관리하여 해당 배포한 PR이나 Commit을 태그로 달아보는 활동을 해보는 것을 추천한다.

물론! 내가 붙게된다면 신빙성이 있는 말이 되겠지만

Webp < AVIF

최근에 알게되었는데 AVIF 라는 확장자가 Webp 보다 약 40% 가량 용량이 작다.
하지만 최신에 나온 확장자라 안되는 브라우저가 존재하니 사용에 유의를 두는 것이 좋다고 하네요~