성능 최적화
페이지 표시 시간에 따라 사용자가 이탈할 확률이 높아진다.
즉, 성능 최적화가 높은 수준의 UX, 가입률, 낮은 이탈률을 가능하게 한다.
렌더링 성능
Front가 Back으로부터 가져온 자원을 얼마나 효율적으로 보여줄 수 있는지에 대한 성능이다.
프로젝트마다 다르므로 여러 성능 측정 도구를 사용해서 때에 맞게 튜링한다.
로딩 성능
Back이 자원들을 Front에 얼마나 효율적으로 전달하는가에 대한 성능이다.
효율적으로 자원을 전달하기 위해서는,
- 다운로드 대상의 수와 용량을 낮춘다
- 지연 로딩을 사용한다. ( 필요할 때 다운로드를 하며 코드를 분할 해 필요한 시점에 필요한 자원만 로딩되도록 한다. )
- 자원에 우선순위를 부여해 우선적으로 로딩돼야 할 자원을 먼저 다운로드하게 한다.
LightHouse
Mode
- Navigation : Lighthouse의 기본 값으로, 초기 페이지 로딩 시 발생하는 성능 문제를 분석
- Timespan : 사용자가 정의한 시간 동안 발생한 성능 문제 분석
- Snapshot : 현재 상태의 성능 문제를 분석
Categories
- Performance : 웸 페이지 로딩 과정에서 발생하는 성능 문제를 분석
- Accessibility : 서비스의 사용자 접근성 문제를 분석
- Best practice : 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석
- SEO : 검색 엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는지 분석
- Progressive Web App : 서비스 워커와 오프라인 동작 등 PWA와 관련한 문제를 분석
성능 검사
- 종합 성능 점수 : 아래 5개의 지표(metrics)에 가중치를 적용해 평균 낸 점수. 이러한 5개의 지표들을 Web Vitals라 부름
- First Contentful Paint(FCP) : 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫번째 부분을 렌더링 하는데 걸리는 시간에 관한 지표
- Speed Index(SI) : 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표
빨리 더 많은 컨텐츠를 보여줄 수록 가산점을 받음
- Largest Contentful Paint(FCP) : 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타내는 지표
- Total Blockint Time(TBT) : 페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간을 종합한 지표. 메인 스레드를 독점하여 다른 동작을 방해하는 작업에 걸린 시간을 총합
- Cumulative Layout Shift(CLS) : 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표.
- 레이아웃 이동이란 화면상에서 요소의 위치나 크기가 순간적으로 변하는 것을 의미
성능 결과
OPPORTUNITIES
로드 속도에 도움이 되는 제안들
DIAGNOSTICS
로드 속도와는 관련 없지만 성능과 관련된 기타 정보
이미지 사이즈 최적화
Web은 width 기준 2배, App은 width 기준 3배의 크기로 이미지 리소스를 전달하는게 효율적이다.
만일 필요 container의 width가 120px이고, 리소스가 1200px이라면
Properly size images 검사 항목이 나타나게 된다.
서버 DB에 있는 이미지의 경우 편집 툴로 바꿔주면 된다.
API로 받아오는 이미지의 경우 이미지 CDN을 사용한다.
이미지 CDN
Content Delivery Network란 물리적 거리의 한계를 극복하기 위해 소비자(사용자)와 가까운 곳에 콘텐츠 서버를 두는 기술이다.
미국에 있는 서버를 미리 한국으로 복사해 두고 사용자가 이미지를 다운로드 시 미국이 아닌 한국에서 다운로드하도록 하는 것!
이미지 CDN은 이미지에 특화된 CDN으로,
- 이미지 사이즈 줄이기
- 포멧 변경하기
를 제공한다. 이런 이미지 CDN을
- 자체 개발
- Imgix Cdn solution
- Unsplash
을 통해 사용할 수 있다.
병목 코드 최적화
개발자 도구의 lighthouse 혹은 performance 패널을 확인하면, 병목 현상이 발생한 작업을 확인할 수 있음.
리소스를 이미 다운로드 했음에도 렌더링을 하는데 시간이 많이 걸린 경우!
이런 때 알고리즘을 최적화하거나, 작업을 분할해 최적화를 진행할 수 있다.
코드 분할
- 네트워크 탭에서 다운로드가 오래 걸래는 번들을 확인한다.
- cra-bundle-analyzer 패키지로 번들이 사용하는 패키지를 확인
- 사용자 작성 코드 : main.뭐시기.chunk.js
외부 코드 : 번호.뭐시기.chunk.js
react-dom과 refactor가 가장 큰 크기를 차지하는 것을 알 수 있는데 react-dom의 경우 리액트를 사용하기 위해 필수적인 모듈이므로 refactor 패키지가 포함된 컴포넌트를 코드분할 시켜 최적화를 진행한다.
코드 스플리팅
페이지 별 분할
모듈 별 분할
텍스트압축
- Opportunities 세션에서 Enable text compression 결과를 확인한다.
- 텍스트 기반 압축 알고리즘을 통해 리소스 전송을 빠르게 한다. ( Gzip 알고리즘 사용 )
- 압축 여부는 http 헤더에서 content-encoding : gzip 을 찾아보면 된다.
텍스트 압축은 웹서버의 종류에 따라 설정 방법이 다르므로 참고만 하자!