[Vitals] 웹 바이탈 (Web Vitals) #1 - 개요

1. 개요

- 웹 바이탈은 페이지의 로딩속도, 응답성, 안정성 등의 평가 항목을 측정하는 것으로 더 나은 사용자 경험을 제공하기 위한 웹의 필수적인 품질 요소를 말합니다. 웹 바이탈은 사용자의 경험 뿐 만 아니라, 검색 엔진 최적화(SEO) 전략의 많은 영향을 주기 때문에 관리가 필요합니다.

2. Web Speed

- Steve Souders(전 google 수석 성능 엔지니어, 전 Yahoo 최고 성능 책임자)는 클라이언트/서버가 8:2 비중으로 웹 성능에 영향을 준다고 말합니다. 웹은 클라이언트 측에서 대부분의 최적화 작업이 이루어진다고 볼 수 있습니다. 

- 웹 성능을 측정하는 여러가지 도구가 있는데, 접근성이 좋은 크롬 개발자 도구외에도 다양한 웹 측정 서비스들이 있습니다.

 

[측정 방법]

1) Chrome DevTools - Network Tab

- DevTools는 측정 결과를 보고하지도 않고, 개선 방법에 대한 제안도 제공되지 않습니다. 하지만 접근성이 좋고 객관적인 데이터 피드를 제공하며, 숙련자의 경우 몇가지 정보들을 활용하여 짧은시간 내에 네트워크 성능 및 병목현상을 식별 할 수 있습니다. 

 * transferred : 압축된 resources의 크기

 * resoureces : 압축되지 않은 resources의 크기

 * DOMContentLoaded : HTML파일을 파싱하여 Dom트리 구성이 완료되는 시점까지 걸린 시간

 * Load : Dom트리 완성 및 그 외 이미지, 스타일 시트와 같은 외부 자원까지 모두 불러오는데 걸린 시간

 

2) WebPageTest

- 실제 브라우저로 페이지를 로드하여 측정

- 미국 덜레스(Default)를 포함한 50개의 Region 제공

3) PageSpeed Insights

- 헤드리스 브라우저를 사용 (GUI 없이 cli 또는 네트워크 통신으로 실행되며 웹테스트/데이터 스크래핑 용도, 시각적 요소 렌더링이 생략됨)

- 구제적인  Region은 없으나 사용자의 지역에 따라 달라지고 북미, 유럽 또는 아시아 중 하나에서 실행된다고 보고됨

4) GTmatrix

- 실제 브라우저로 페이지를 로드하여 측정

- 캐나다 밴쿠버(Default)를 포함하여 7개의 Region을 제공

 

3. Perceived Speed

- Perceived Speed (인지 속도) 개선방법으로 인해 사용자의 체감 속도가 빨라진다면 실제 웹 속도의 개선 없이 개선된 것처럼 보일 수 있는 트릭을 활용할 수도 있습니다. 

 

1) 진행 표시줄, 애니메이션 등을 활용하여 시선을 분산시켜 동적 컨텐츠의 기다린다는 느낌을 줄어들게 할 수 있습니다.

2) 페이지 상단의 가장 먼저 눈에 들어오는 컨텐츠를 pre-loading 하는 방법

3) 통계적으로 사용자가 많이 클릭되는 아이콘, 버튼, 이미지 등의 컨텐츠를 pre-loading 하는 방법

 

 

 

참고사이트

The Difference Between GTmetrix, PageSpeed Insights, Pingdom Tools and WebPagetest | GTmetrix

https://www.paperstreet.com/blog/tuning-your-website-for-modern-page-speed-metrics/