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