[CS Fundamental] 웹 성능 진단하기

 

1) 개요

- 브라우저로 하나의 페이지를 요청하여 응답받기까지 지연시간이 걸릴 요소는 다양합니다.

  이를 개선하기 위해 각 구간별로 다음과 같은 사항을 고민해봅니다. 

 

 

2) 웹 성능 측정하기

 

- WebPageTest 를 사용하면 연결을 시도하는 위치, 환경부터 Repeat View(캐싱 등 테스트),

  동일한 조건으로 여러 차례 테스트할 수 있다.

  그리고 테스트한 결과를 영상으로 기록해준다. 

 

 

(1) First Byte Time: 웹 서버에서 받은 컨텐츠의 첫 번째 바이트가 얼마만에 도착했는가?

(2) Keep-Alive Enabled: TCP 연결을 재사용하기 위한 Keep-Alive 설정이 되어 있는가?

(3) Compress Transfer: 스크립트 파일이 Content-Encoding으로 압축되어 있는가?

(4) Compress Image: 이미지를 압축했는가?

(5) Cache Static Content: 정적 파일이 캐싱 설정이 되어 있는가?

 

3) 웹 성능 예산

- PageSpeed Insights를 활용하면 구체적으로 어떤 전략을 취하면 좋을지도 가이드한다. 

  

- 웹 성능 예산은 아래 예시와 같이 정량/시간/규칙 기반으로 산정할 수 있다. 

  성능 목표에는 정답이 없지만,

  3초의 법칙(3초 안에 로딩되지 않으면 53%의 사용자가 떠나고 로딩 시간이 길어질수록 사용자 이탈률이 늘어남)이 있듯,

  서비스의 성능 목표를 두는 것이 필요합니다. 

 

(1) 메인 페이지의 모든 오브젝트 파일 크기는 10MB 미만으로 제한한다

(2) 모든 웹 페이지의 각 페이지 내 포함된 자바스크립트 크기는 1MB를 넘지 않아야 한다

(3) 검색 페이지에는 2MB 미만의 이미지가 포함되어야 한다

(4) LTE 환경에서 모바일 기기의 Time To Interactive는 5초 미만이어야 한다

(5) Dom Content Loaded는 10초, First Meaningful Paint는 15초 미만이어야 한다.

(6) LightHouse 성능 감사에서 80점 이상이어야 한다.

 

 

4) 예산 설정

 

A. 예비 분석

(1) 사용자 트래픽이 많은 페이지 혹은 제품 방문 페이지 등 가장 중요한 페이지가 무엇인지 파악해봅니다

(2) PageSpeed를 활용하여 Desktop, Mobile 사이트 등에서 측정된 FCP, TTI 등의 지표를 확인합니다. 

 

B. 경쟁사 분석

- 경쟁 사이트 또는 유사한 사이트의 성능을 조사합니다

- 어떤 사이트를 살펴봐야 할지 모를 땐, Google 검색 시 related: 키워드를 붙여서 검색해봅니다

- 연구에 따르면, 사용자는 응답시간이 20% 이상일 때, 차이를 인식합니다 

 

C. 성능 기준 설정

- 정량 / 시간 / 규칙 등을 기반으로 성능 기준을 세웁니다

- 모든 페이지에 대해 성능 기준을 세우는 것이 좋으나, 우선은 서비스에 중요한 페이지부터 작성해봅니다

- 처음에 기준 세우기 어렵다고 느낀다면, 아래와 같이 예산을 잡아봅니다.

  (1) 페이지로드 3초 미만

  (2) TTI 5초 미만

  (3) 압축된 리소스 최대 크기 200KB 미만

 

D. 우선순위

- 여러 지표들 중 우선순위가 높은 지표가 무엇일지 생각해봅니다.

  가령, 사용자에게 컨텐츠가 빠르게 노출되고 렌더링하는 것이 중요할 경우 FCP를 낮게 유지해야 합니다.

   혹은 사용자가 관련 링크를 빠르게 클릭해야 할 경우 TTI의 우선순위가 높을 것입니다.