웹 성능 최적화 여정(0) - 이미지 최적화를 통한 성능 개선 방법

아직 기술블로그 이전을 제대로 하지 못했지만 그냥 올려버리는 글!ㅎㅎ

 

릴리즈 준비 과정에서 현재 우리 서비스의 가장 큰 문제는 바로 이미지 로딩 속도라고 느꼈습니다.

서비스 특성상 다양한 여러 이미지들을 등록하고 불러와야 하는데, 용량 때문에 로딩이 굉장히 길어져 사용성이 떨어졌습니다.

 

사용한 성능 검사 툴과 관련된 내용은 아래 글에서 더 자세히 볼 수 있습니다.

[서비스 성능 검사하기 - Lighthouse, PageKeeper]

 

따라서 프론트와 백 모두 이미지 최적화를 통한 서비스 성능 개선을 진행하기로 결정했습니다.

우리가 진행할 이미지 최적화 방법은 아래와 같습니다.

 

[프론트]
1. 이미지 업로드 시 이미지 용량 압축 라이브러리 사용(react-image-file-resizer)
2. 서버에서 가져오는 이미지는 CDN을 활용해 이미지 크기 조정 및 webP 포맷 사용
3. 프론트에서 가지고 있는 이미지는 가능한 경우 webP 포맷으로 변환해서 사용하기
4. layout shift 발생하는 경우 최소화하기
5. 스켈레톤 UI 적용
6. lazy loading 적용

[백]
- CDN(cloudFront) 도입으로 최적화 진행

 

 

내용이 길어질 것 같아서 앞으로 진행할 최적화 방법들에 대한 글을 하나씩 올릴 예정!