본문 바로가기

Frontend Development

WebPageTest 로 웹 성능 테스트하기

웹 성능을 측정할 때 코어 웹 바이탈 측정치를 가지고 성능을 측정하는것이 대세가 되었다. 

 

코어 웹 바이탈 (Core Web Vitals)은 웹 사이트가 검색 엔진 결과에 표시되는 위치에 영향을 미치는 세 가지 웹 성능 측정값이다. 여기에는 사이트의 전반적인 로딩 속도, 상호작용, 웹페이지의 시각적 안정성, 보안 문제 등 여러 요소를 포함하고 있다. 구글에서는 웹 사이트에 방문하는 유저들의 경험을 좌우하는 여러 요소들 중 가장 기본이자 핵심 지표로 보기 때문에 ‘코어 (Core)’라는 단어를 붙여 부르기도 한다.

다시 말해, 코어 웹 바이탈은 웹페이지 유저들의 사용 경험을 측정하는 구글의 표준화된 측정 항목 집합이다. 구글 검색을 효과적으로 활용하고 전체적으로 유저들에게 좋은 환경을 제공하려면 우수한 코어 웹 바이탈을 유지하는 것이 좋다.

 

 

 

위 코어웹 바이탈 지표와 더불어 TTFB, FCP도 주요 측정 지표로 많이 사용된다. 각 지표의 정의는 다음과 같다.


Largest Contentful Paint ( LCP ) 최대 콘텐츠 풀 페인트
- 정의 : 사용자가 페이지에 방문한 후 페이지의 주요 콘텐츠가 로드되고 화면에 완전히 표시되기까지 걸린 시간을 측정하는 성능 지표이다. 페이지 로딩 성능을 평가하는 데 중요한 척도로, 사용자가 실제로 볼 수 있는 가장 큰 요소가 얼마나 빨리 로드 되는지 나타냄. 특히 대형 이미지, 비디오 썸네일 또는 대량의 텍스트 블록 같은 큰 콘텐츠 요소에 초점을 맞춘다.
좋은 LCP 점수:
좋음 : 2.5초 이내
개선 필요 : 2.5초 - 4초
나쁨 : 4초 이상

First Input Delay ( FID ) 최초 입력 지연
정의 : 사용자가 웹 페이지와 처음 상호작용하는 순간부터 브라우저가 이 상호작용에 응답하기 시작할 때까지의 지연시간을 측정하는 웹성능 지표 ( 클릭. 탭, 키보드 입력 등 )
사용자가 웹 페이지와의 상호작용을 시작할 때 느끼는 방응성을 측정하여, 사용자 경험의 실시간성과 방응성을 평가하는 데 중요.

Cumulative Layout Shift ( CLS ) 누적 레이아웃 이동
정의 : 사용자가 웹 페이지를 방문할 때 발생하는 레이아수 변화의 총합을 측정하는 지표로, 웹 페이지의 시각적 안정성을 나타낸다. 사용자 경험을 개선하고, 페이지의 사용성을 높이는 데 중요하다. 레이아웃의 변화가 갑작스럽게 발생하면 사용자가 의도치 않은 상호작용을 하게 되어 불편할 수 있다.

Time to First Byte ( TTFB ) 최초 바이트까지의 시간
정의 : 사용자가 웹 페이지를 요청한 순간부터 브라우저가 서버로부터 첫번째 바이트를 수신할 때까지의 시간을 측정하는 성능 지표. 서버 응답시간을 줄이고, 초기 로드 경험을 개선하는데 중요하다

First Contentful Paint ( FCP ) 최초 콘텐츠 풀 시간
정의 : 사용자가 웹 페이지를 요청한 후 브라우저가 첫 번째 콘텐츠를 화면에 렌더링하기 시작할 때까지의 시간을 측정하는 웹 성능 지표. 사용자의 초기 로딩 경험을 개선하고, 전반적인 사용자 만족도를 향상 시키는데 중요.

 

참고링크 : https://seo.tbwakorea.com/blog/core-web-vitals

 

그러면 위 지표를 측정하려면 어떤  Tools을 사용해야 할까? WebPageTest 사이트를 이용하면 여러 지표들을 분석해준다.

 

WebPageTest 사이트 주소는 다음과 같다.

https://www.webpagetest.org

 

메인화면에 진입하면 아래와 같고 가운데 DropList에 측정가능한 방법이 나열되어 있다. Site Performance는 전반적인 웹의 성능을 여러 지표 기준으로 분석해주고 Core Web Vitals는 구글 Core Web Vitals 지표에 대해서 측정치를 보여준다.

 

단 회원가입 및 로그인을 하지 않으면 아래와 같이 limit 제한에 걸리기 때문에 회원가입을 하고 사용하는 것을 권장한다. 이 역시 월 200여건으로 제한이 있고 더 많이 하려면 유료회원으로 전환해야 한다.

 

 

www.naver.com 를 테스트 Url로 입력하고 Site Performance를 수행해 보았다. 아래와 같이 자세히 분석해서 결과를 보여준다.

 

이번에는 Core Web Vitals를 측정한 결과이다. LCP, CLS를 구체적으로 분석하여 결과를 보여준다. 

 

웹 성능 테스트를 위해서는 꼭 실행해볼 가치가 있는 사이트 이다. LCP, FCP, TTBF 등 수치가 낮아지도록 노력을 하면 퀘적한 웹 사이트를 운영할 수 있을 것이다.

 

회원가입을 안하면 2,3번 수행후에 아래와 같이 limit 에 도달했다고 나오므로 회원가입은 꼭 하도록 하자.

 

 

-- The End --