이미지 최적화전에 이미지 로딩 속도가 16900ms 로 굉장히 느린 것을 확인 할 수 있다.
해당 페이지로 접속하거나 페이지 이동을 통해 해당 페이지에 접속하면 배경이미지가 거의 2초 후에 로딩되서
사용자 경험을 굉장히 떨어트리는 이슈가 발생하였다.
따라서 UX 개선을 위해 이미지 최적화를 진행했다.
1. svg ⇒ webp 로 파일 형식 바꾸기
SVG
장점:
- 확장성 : SVG는 벡터 형식이므로, 크기를 조정해도 품질 저하가 없다.
- 편집 용이성: 텍스트 파일로 저장되기 때문에 XML 형식으로 쉽게 편집할 수 있으며, 스타일 변경, 애니메이션 추가 등도 가능하다.
- 반응형 디자인: CSS와 쉽게 연동되어 반응형 웹 디자인에서 유용하다.
- 브라우저 지원: 대부분의 현대 브라우저에서 지원된다.
WebP
장점:
- 효율적인 압축: WebP는 무손실 및 손실 압축을 모두 지원하며, 기존의 JPEG, PNG 형식보다 더 작은 파일 크기를 제공한다. 이로 인해 웹페이지 로딩 속도가 개선된다.
- 품질 유지: 손실 압축 방식에서도 높은 품질을 유지하면서 파일 크기를 줄일 수 있다.
따라서 정적인 배경 이미지의 경우 svg 에서 webp 로 바꿨는데 큰 성능 개선을 이루지 못했다.
lighthouse 성능 분석에서 1000ms 정도 단축되었지만 여전히 로딩속도가 굉장히 길었다…
2. 고화질 이미지에서 이미지 압축하기
이미지 압축을 통해 고화질에서 저화질로 바꿨는데 로딩속도에서 확실한 개선이 있었다..!
또한 화질을 낮췄음에도 불구하고 비교했을때 그렇게 큰 차이가 없어서 채택하게 되었다.
하지만 새로고침시 깜빡거림 문제나 진입할때 흰 배경에서 이미지가 바뀌는 문제가 있었다.
3. preload 방식 적용
이미지 Preload는 웹 페이지 로드 시 이미지를 미리 로드하여 사용자가 실제로 이미지를 필요로 할 때 즉시 표시되도록 하는 방식이다.
장점
- 사용자 경험 개선:
- 이미지를 미리 로드함으로써 사용자가 페이지의 특정 섹션에 도달했을 때 이미지가 즉시 표시된다. 이는 페이지 로드 중 이미지가 늦게 나타나는 현상을 방지해 줍니다.
- 캐싱 활용:
- 미리 로드된 이미지는 브라우저 캐시에 저장되므로 이후에 같은 이미지를 사용할 때 로드 시간이 거의 없다. 이를 통해 페이지 간 이동 시 이미지 로딩 속도가 향상된다.
단점
- 초기 로드 시간 증가:
- 프리로드를 과도하게 사용하면, 페이지 초기 로드 시 모든 프리로드된 리소스가 동시에 요청되어 네트워크 병목 현상이 발생할 수 있다. 이는 페이지 로드 성능을 저하시킬 수 있다.
- 불필요한 데이터 사용:
- 사용자가 실제로 보지 않을 이미지를 미리 로드하는 경우 불필요한 데이터 사용을 초래할 수 있으며, 특히 모바일 환경에서 사용자 데이터 소모를 증가시킬 수 있다.
따라서 이미지 로딩이 오래되는 배경이미지에만 preload 를 진행하는 방식으로 진행했다.
적용 방법
<head>
<link
rel="preload"
href="./src/assets/images/newCarIntroBg.webp"
as="image"
/>
</head>
rel="preload": 브라우저에 리소스를 미리 로드하도록 지시한다.href: 미리 로드할 이미지의 URL을 지정한다.as="image": 미리 로드할 리소스의 타입이 이미지임을 명시한다.
4. LazyLoading 방식 적용
이미지 Lazy Loading은 웹 페이지의 성능 최적화를 위해 사용되는 기법으로, 페이지가 로드될 때 모든 이미지를 한 번에 불러오는 대신, 사용자가 스크롤하여 이미지가 화면에 나타날 때 필요한 이미지만 로드하는 방식이다. 이를 통해 초기 로딩 시간을 줄일 수 있다.
장점
- 빠른 초기 페이지 로드 : 처음에 필요한 이미지만 로드하므로 페이지 로딩 속도가 빨라진다.
- 리소스 절약: 사용자가 스크롤하지 않은 영역의 이미지를 로드하지 않아 네트워크와 메모리 리소스를 절약한다.
단점
- 첫 노출 지연 : 사용자가 빠르게 스크롤할 때 이미지가 늦게 나타날 가능성이 있다.
- 추가적인 JavaScript 의존성 : Intersection Observer를 사용하거나 수동으로 구현해야 하는 경우 추가 코드가 필요하다.
적용 방법
<img src={item.imageSrc} loading="lazy"/>`loading="lazy": 이미지를 화면에 보일 때 로드한다는 뜻으로 해당 키워드를 붙여 간단하게 구현 가능하다.
결론
원래 위에서 제시한 방법중 2번이나 3번중 한가지 방식을 채택해서 진행하려고 했다.
하지만 2번만 적용한 경우 깜빡거림 문제도 발생했고, 텍스트가 이미지보다 빨리 로딩되어 불편함이 생기는 문제가 발생했다.
3번만 적용한 경우 이미지 로딩이나 깜빡거림 문제는 해소했지만 페이지 진입 속도 자체가 느려지는 문제가 있었다.
결론적으로 1,2,3,4번 방식을 모두 사용했고 페이지 진입 속도와 이미지 로드가 빨라지는 결과를 얻을 수 있었다.
