성능 최적화 (Lighthouse)

jinjoo-jung·2024년 5월 29일

lighthose란?
웹사이트의 성능을 측정하고 개선 방향을 제시해주는 툴

Lighthouse를 이용하여, 웹 사이트의 성능 점수를 측정하고 개선 가이드를 확인함으로써, 어떤 부분들을 최적화 해야하는지 알 수 있으며, 별도의 설치가 필요없이 크롬 개발자모드에서 사용할 수 있다.

모드

탐색(Navigation) : Lighthouse의 기본 값, 초기 페이지 로딩 시 발생하는 성능 문제를 분석한다.
기간(Timespan) : 사용자가 정의한 시간 동안 발생한 성능 문제를 분석한다.
스냅샷(Snapshot) : 현재 상태의 성능 문제를 분석한다.

이미지 최적화

이미지 최적화가 필요한 이유?
웹 페이지 로드 시간은 사용자가 페이지에 이탈하지 않도록 하는 가장 큰 요소이다.
웹 페이지 로드 시간을 줄이기 위한 최적화 기법에는 여러가지가 있다.

적절한 이미지 사이즈 사용하기 (로컬에 저장된 이미지라면 다양한 이미지 압축 사이트를 이용해서 압축된 이미지를 저장 할 수 있음)
이미지를 압축할 때에는 화면에 표시되는 크기의 2배 정도로 하는 것이 좋다. 요즘 사용되는 디스플레이들은 같은 공간에 더 많은 픽셀을 그릴 수 있기 때문
사이트를 통해 압축하는 것은 이미지가 로컬에 있으면 상관이 없으나, 이미지를 API에서 불러오는 경우는 이미지 CDN을 사용해야한다.

CDN이란?

CDN (Content Delivery Network) : 물리적 한계를 극복하기 위해 사용자와 가까운 것에 콘텐츠 서버를 두는 기술
오리지널 서버의 데이터를 다른 곳에 미리 복사해두고, 사용자가 이미지를 다운로드 하려고 할 때 오리지널 서버가 아닌 가까운 서버에서 다운로드 하도록 하는 기술
CDN은 이미지를 사용자에게 보내기 전에 특정한 형태로 가공하는 기능까지 있다.

--> 이번 웹 사이트는 주로 용량이 큰 이미지가 많이 들어가고 있으며, three.js를 이용하여 glb , fbx 또는 360 이미지를 보여줄 수 있는 hdr 등 무거운 이미지가 많이 들어가서 성능을 저하시키고 웹사이트 로딩이 너무 느려졌기 때문에 우선적으로 이미지 최적화를 통해 성능 최적화를 하고 싶었다

첫 번째 시도

처음에 성능 숫자와 색만보고 왜이렇게 높게 떴지?라고 생각했지만 페이지 로드가 너무 느려서 시간제한 내에 완료가 되지 않아 성능이 측정이 안 된 것이였다!

데스크탑

모바일

1. lazy loading

모든 이미지들에 loading='lazy'를 걸어서, 스크롤해야만 보이는 이미지들 ( 현재 화면에 보이지 않는 이미지)의 로딩을 나중에 하는 기술

주의해야 할 점 : 첫 화면에 나타나는 이미지에 Lazy Loading을 적용한다면 성능 저하가 발생할 수 있다.
React에서는 Image 컴포넌트를 사용하면 기본적으로 Lazy Loading이 적용되어 있다.
lazy loading을 통해서 첫 웹 사이트의 로딩 자체는 빨라졌으나, 다른 3d나 hdr같은 용량이 큰 이미지를 클릭했을 때 로드되는 부분들의 속도는 해결되지 않았다. -> 이러한 이미지 로딩 속도는 CDN이나 캐싱 등을 통해서 이미지를 가져와야 해결,.