소프트웨어 테스팅 노트

출처: 2022년, Full Stack Testing - A Practical Guide for Delivering High Quality Software, Gayathri Mohan, 8장. Performance Testing

한줄요약: 최종사용자가 경험하는 프론트엔드 성능에 대하여 설명하고 WebPageTest 도구를 사용하여 프론트엔드 성능을 측정하는 예를 보여준다.

프론트엔드 성능 테스팅

JMeter나 BlazeMeter 같은 성능 테스트 도구를 사용하여 피크 타임 동안 애플리케이션 동작을 모방할 수 있지만 여기서 측정된 성능 수치와 실제 사용자가 경험하는 성능 사이에는 차이가 있다. 이는 성능 테스팅 도구가 실제 브라우저가 아니며 일반적인 브라우저가 수행하는 모든 작업을 수행하지 않기 때문이다. 어떤 서비스의 응답 시간이 밀리초 이내로 측정되었더라도 최종사용자는 브라우저에서 수행하는 추가 렌더링 작업으로 인해 추가적인 지연 후에 비로소 페이지가 나타나는 것을 보게 된다. 이 프론트엔드 렌더링이 전체 페이지 로드 시간의 80~90%를 차지하는 것으로 추정된다.

다시 말하면 성능 테스트 도구가 "애플리케이션이 블랙 프라이데이 세일 기간 동안 최대 5,000건의 트랜잭션을 지원할 것인가?"와 같은 질문에 대답하는 데는 도움이 된다. 그러나 애플리케이션의 최대 응답 시간이 ~1.5초 이내라는 KPI에 대해서는 최종사용자의 실제 경험을 반영하지 않을 수 있다. 이를 이해하려면 프론트엔드 성능 지표도 평가해야 한다.

RAIL 모델

RAIL 모델은 웹사이트에 대한 최종사용자의 경험(end user's experience)을 네 가지 핵심 영역으로 나누고 프론트엔드 성능에 대한 목표를 정량화하였다. RAIL 모델은 프런트엔드 성능 관점에서 무엇을 테스트해야 할지 안내한다. 

• Response: 버튼을 클릭했지만 그에 대한 어떤 즉각적인 표시도 눈에 보이지 않아 애초에 내가 정말 클릭을 한건지 의아해하는 경험을 한 적이 있는가? 이러한 지연을 입력 지연(input latency)이라고 한다. RAIL의 “response” 측면은 입력 지연에 대한 목표를 정의한다. 사용자가 웹사이트에서 버튼 클릭, 엘리먼트 토글링, 체크박스 선택 등과 같은 액션을 수행할 때 RAIL은 해당 액션의 응답 시간이 100ms 미만이어야 한다고 규정한다. 그렇지 않으면 사용자는 지연(lag)을 느끼게 된다!
• Animation: 마찬가지로 각 프레임이 16ms 이내(60FPS 프레임 속도를 달성하기 위한 최소 시간)에 완료되지 않으면 사용자는 애니메이션 효과(예: indicators 로딩, 스크롤링, 드래그 앤 드롭 등)에서 지연을 느낀다.
• Idle: 일반적인 프런트엔드 설계 패턴은 중요하지 않은 작업(예: 분석 데이터 비콘 백, 코멘트 박스 부트스트래핑 등)을 그룹화하여 나중에 브라우저가 유휴 상태일 때 수행하는 것이다. 이러한 작업은 완료하는 데 약 50ms가 걸리는 블록으로 묶는 것이 이상적이다. 그래야 사용자가 인터액션하기 위해 돌아왔을 때 100ms 창 내에 응답할 수 있다.
• Load: 고성능 웹사이트는 1초 이내에 페이지 렌더링을 시작하는 것을 목표로 해야 한다. 연구 결과에 따르면 그래야 사용자가 네비게이션을 완전히 제어하고 있다고 느낄 수 있다.

프론트엔드 성능 지표(Frontend Performance Metrics)

업계에서 채택한 표준 프론트엔드 성능 지표가 다음과 같다. 

• First Contentful Paint: 브라우저가 DOM에서 첫 번째 엘리먼트(이미지, 흰색이 아닌 엘리먼트, SVG 등)를 렌더링하는 데 걸리는 시간을 말한다. 사용자가 웹사이트를 연 후 어떤 액션을 보기 위해 기다려야 하는 시간을 이해하는 데 도움이 된다.
•  Time To Interactive: 페이지가 인터액션할 수 있기까지 걸리는 시간이다. 높은 성능의 페이지를 만들기 위해 서두르다 보면 엘리먼트가 빠르게 표시되기는 하지만 사용자의 액션에 반응하지 않아서 짜증을 유발할 수 있다. 웹사이트에서 첫 번째 콘텐츠를 보는 데 걸리는 시간을 측정하는 것과 병행하여 이 메트릭은 표시된 정보가 도움이 되는지 아니면 그저 노이즈인지를 이해하는 데 도움이 된다.
•  Largest Contentful Paint: 큰 덩어리의 텍스트나 이미지와 같이 웹 페이지에서 가장 눈에 띄는 엘리먼트가 표시되는 데 걸리는 시간이다.
•  Cumulative Layout Shift: 기사를 읽기 시작했는 데 추가 콘텐츠가 로드되면서 페이지가 자동으로 아래로 이동하여 무엇을 읽고 있었는지 놓치게 만드는 사이트를 본 적이 있는가? 이게 짜증나지 않는가? 이 메트릭은 페이지의 시각적 안정성(visual stability)을 측정하고 사용자가 페이지 레이아웃에서 예상치 못한 변화에 직면하는 빈도를 정량화하는 것을 목표로 한다. 숫자가 낮을수록 성능이 좋다.
•  First Input Delay: First Contentful Paint와 Time To Interactive 사이에 사용자가 링크를 클릭하거나 웹 페이지와 인터액션을 시도할 때, 페이지가 아직 로드 중이기 때문에 일반적인 지연보다 더 긴 지연이 발생한다. 이 메트릭은 첫 번째 인터액션에 대한 이러한 시간 지연을 제공한다.
•  Max Potential First Input Delay: 이것은 First Input Delay의 최악의 시나리오를 나타낸다. First Contentful Paint와 Time To Interactive 사이에 발생하는 가장 긴 작업에 걸리는 시간을 측정한다.

Google은 Largest Contentful Paint, First Input Delay, Cumulative Layout Shift를 핵심 웹 바이탈(core web vitals)로 분류하여 비즈니스 관계자가 사이트의 성능을 쉬운 말로 이해할 수 있도록 돕는다. 대부분의 프론트엔드 성능 테스트 도구가 이 세 가지 지표를 제공한다.

프론트엔드 성능 테스트케이스 예

프론트엔드 성능은 최종사용자의 경험에 달려 있다. 따라서 애플리케이션의 프론트엔드 성능 지표를 측정하려면 먼저 다양한 인구 통계에 걸쳐 모든 타겟 최종사용자의 경험을 포괄하는 일련의 테스트케이스를 정의해야 한다. 예를 들면 다음과 같다. 

• 다양한 유형의 장치(데스크톱, 모바일, 태블릿)를 사용하는 사용자를 고려한다. 또한 애플리케이션이 서비스를 제공하려는 지역에서 중요한 역할을 하는 장치 제조업체에 대한 정보를 수집한다.
• Wi-Fi, 3G, 4G 등 다양한 네트워크 대역폭을 사용하는 사용자를 고려해야 한다. 또한 평균 모바일 및 광대역 속도가 국가마다 다르다.
• 타겟 사용자의 분포를 고려한다. 여러 다른 지리적 위치에서 경험되는 프론트엔드 성능이 구체적으로 테스트되어야 한다.

예를 들어 다음과 같은 샘플 테스트케이스를 정의할 수 있다. 

"Samsung Galaxy S5를 사용하는 밀라노의 사용자가 4G 네트워크 연결을 사용하여 Amazon 홈 페이지에 액세스하고 있다."

WebPageTest - 프론트엔드 성능 테스팅 도구

WebPageTest(https://www.webpagetest.org/)는 웹 사이트의 프론트엔드 성능을 평가하기 위한 무료 온라인 도구이다(현재는 유료 전환됨. 처음 몇 번은 무료로 돌릴 수 있으나 이후 회원 가입 요구하고 횟수 제한). 웹사이트에 액세스하는 지리적 위치를 선택할 수 있고 실제 웹 및 모바일 브라우저에서 웹사이트를 렌더링하여 프론트엔드 성능 지표를 수집하는 강력한 도구이다.

위 샘플 테스트케이스의 성능 테스트를 위해 WebPageTest 사이트에서 아래처럼 아마존 홈페이지 주소를 입력한다.

고급 설정(Advanced Configuration) 섹션에서 테스트케이스에 기술된 최종사용자의 위치, 브라우저 유형, 장치 유형 및 네트워크 대역폭을 선택한다. 테스트 실행 횟수 패러미터가 디폴트 3으로 설정되어 있다. 네트워크 대역폭의 오류로 인해 한 번의 평가 라운드에서 나온 결과에 오류가 있을 수 있으므로 평균을 관찰하기 위해 테스트케이스를 여러 번 실행하는 것이 좋다. Repeat View 패러미터는 “First View and Repeat View”로 설정한다. 이렇게 하면 첫 번째 방문과 후속 방문에 대한 성능 지표가 별도로 캡처된다(캐싱으로 인해 후속 방문의 지표가 다를 수 있음).

우측의 Start Test 버튼을 클릭하면 테스트를 실행하고 아래와 같은 성능 메트릭 보고서를 띄운다. 위에서 언급한 대표적인 프론트엔드 성능 지표들을 찾아볼 수 있다.

아래 웹 바이탈 보고서가 Largest Contentful Paint, Cumulative Layout Shift, Total Blocking Time을 핵심 지표로 제공한다.

아래 표시된 폭포수 보기는 DNS Resolution, 커넥션 시작, HTML 및 이미지 다운로드, 스크립트 런타임 등 각 작업에 걸리는 시간을 다채로운 타임라인 보기로 보여주어 추가 최적화를 위한 방법에 대한 단서를 제공한다.