웹 성능 측정 방법과 지표가 되는 것들

개요

웹의 성능은 어떻게 측정해야 할까? 아래의 그림에서는 웹을 이용하는 도중에 부하가 걸릴 수 있는 부분들이 보인다.

간단하게 웹페이지의 성능을 측정하는 방법

webpagetest.org 를 이용하기

WebPageTest 라는 웹사이트를 이용하면, 간단하게 웹 페이지의 성능을 측정할 수 있다.

URL 을 입력하면, 위와 같이 각종 지표를 통해 성능을 측정한 결과가 나온다.

• First Byte Time: 웹 서버에서 받은 컨텐츠의 첫번째 바이트가 얼마만에 도착했는가
• Keep-Alive Enabled: TCP 연결을 재사용하기 위한 Keep-Alive 설정이 되어있는가?
• Compress Transfer: 스크립트 파일이 Content-Encoding 으로 압축되어 있는가?
• Compress Image: 이미지를 압축했는가?
• Cache Static Content: 정적 파일이 캐싱 설정되어 있는가?

Google LightHouse 를 이용하기

Google LightHouse 는 웹 페이지를 자동으로 테스트해주는 도구이다. 다양한 지표의 성능측정 결과를 보여준다.

크게 몇가지 지표에 집중하여 점수를 보여주는데, 대표적인 지표들은 아래와 같다.

• FCP (First Contentful Paint): 첫번째 텍스트 혹은 이미지가 표기되는 시간을 나타낸다.
• Time to Interactive: 페이지와 완전히 상호작용할 수 있게 될 때까지 걸리는 시간을 말한다.
• Speed Index: 페이지 콘텐츠가 얼마나 빨리 표시되는지 보여준다.
• Total Blocking Time: 처음 컨텐츠가 뜨고 상호작용이 가능할 때까지의 모든 시간의 합이다. 즉, FCP 와 상호작용 시간 사이의 모든 시간의 합이다. 작업 지속 시간이 50ms 를 넘으면 밀리초 단위로 표현된다.
• LCP (Largest Contentful Paint): 가장 큰 텍스트 혹은 이미지가 표시되는 시간을 나타낸다.
• CLS (Cumulative Layout Shift): 페이지에서 보여지는 요소들의 이동을 측정한다. 이를테면 레이아웃 요소들의 크기를 처음에 제대로 잡지 못한 뒤에 로드되면서 예측하지 못할만큼 커진다면 이 점수가 떨어진다.

Google LightHouse 는 성능을 측정한 이후 어떤 부분을 개선하면 점수가 오를지에 대해서도 잘 알려준다.

웹 성능 예산

성능 예산은 일반적으로 다음과 같은 키워드로 산정한다.

• 정량적
• 시간적
• 규칙적

웹 성능 목표의 일반적인 조건

3초 법칙: 3초 안에 로드되지 않으면, 사용자의 53% 가 떠나간다.

Yet 53% of visits are abandoned if a mobile site takes longer than three seconds to load.

웹 성능 요건을 맞추기 위해 지켜야하는 제한 사항들

• 메인 페이지에서 로드하는 파일의 크기는 10MB 미만으로 제한한다.
• 모든 웹 페이지의 각 페이지 내 포함된 자바스크립트의 크기는 1MB 미만으로 제한한다.
• 검색 페이지의 이미지는 2MB 미만으로 제한한다.
• LTE 환경에서 모바일 기기의 Time to Interactive 는 5초 미만이어야 한다.
• DOM Content Loaded 는 10초 미만이어야 한다.
• First Meaningful Paint 는 15초 미만이어야 한다.
• Lighthouse 성능 감사의 결과는 80점 이상이어야 한다.

예산 설정하기

예비 분석

• 트래픽이 가장 많은 페이지, 가장 중요한 페이지가 무엇인지 먼저 분석한다.
• PageSpeed Insight 에서 FCP, TTI 등의 지표를 확인해보고 현재의 상태를 진단한다.

경쟁사 분석

• 경쟁 사이트 혹은 유사한 사이트의 성능을 조사한다.
• 연구에 따르면, 보통 20% 의 차이부터 사용자에게 유의미한 차이로 인식된다.
• Alexa, SimilarWeb 혹은 구글의 related: 키워드를 통해 경쟁 사이트를 찾을 수 있다.

성능 기준 설정

• 정량, 시간, 규칙을 기반으로 성능 기준을 세운다.
• 서비스에 중요한 페이지부터 성능을 다듬는다.
• 초기 기준은 일반적으로 아래의 기준을 따르면 좋다.
  • 페이지 로드 3초 미만
  • TTI 5초 미만
  • 압축된 리소스 크기 최대 200KB 미만

Quantity based Metric

• 이미지 최대 크기
• 웹 글꼴 최대 크기
• 글꼴 최대 갯수
• 스크립트 최대 크기
• 스크립트 최대 갯수
• HTML, CSS 최대 크기
• 동영상 최대 크기

Timing based Metric

• FCP, LCP, TTI, TBT, CLS 등 LightHouse 에서 제공하는 데이터를 기반으로 한다.

Rule based Metric

• WebPageTest, LightHouse 등 웹 사이트에서 측정한 점수를 지표로 활용한다.

우선순위

사이트에서 무엇이 중요한지에 따라 갈린다.

• 사용자에게 컨텐츠가 빠르게 노출되는 것이 중요하다면, FCP 의 우선순위가 높아야 한다.
• 사용자가 관련 링크를 빠르게 클릭해야 할 경우 TTI 의 우선순위가 높아야 한다.