들어가며
이전 콘텐츠에서는 웹 서비스 성능 개선을 위한 필수 데이터를 소개했는데요. 이번 콘텐츠에서는 페이지 로드 개선을 위한 코어 웹 바이탈이라는 지표를 소개하겠습니다.
코어 웹 바이탈은 구글이 제시하는 사이트 성적표로 사이트 로드 속도, 가시성, 보안 등을 포함하고 있습니다. 구글에 따르면 코어 웹 바이탈이 개선되면 사용자 참여 발생 시간과 비즈니스 측정 항목이 개선된다고 합니다. 코어 웹 바이탈 기준점을 충족하면 고객이 페이지 로드를 중단할 가능성이 그러지 않은 페이지보다 24% 낮았습니다.
코어 웹 바이탈에서 보여주는 지표는 프론트엔드 개발자 뿐만 아니라 페이지 뷰와 이탈률, 그리고 전환률을 측정하는 마케팅과 사업 담당자들에게도 중요한 지표입니다. 구글은 코어 웹 바이탈을 중요하게 생각하고, 실제로 해당 수치들을 활용해 검색 결과에 반영하기 때문에 이 수치들을 최대한 고려해야 합니다.
코어 웹 바이탈을 측정하는 지표와 성능 개선에 도움이 되는 있는 모니터링 서비스를 소개하겠습니다.
사이트 중단을 낮출 수 있는 LCP, FID, CLS
코어 웹 바이탈은 LCP, FID, CLS가 있습니다.
① LCP는 최대 콘텐츠 렌더링 시간으로, 사용자가 어떤 URL을 클릭해 페이지를 방문한 시점부터 가장 큰 콘텐츠 요소를(이미지, 영상, 많은 텍스트) 렌더링하는 데 걸린 시간입니다. 우리가 어떤 사이트를 방문하기 위해 URL을 클릭한 시점부터 페이지가 모두 로딩되는 시간을 의미하며, 시간은 짧을수록 좋습니다. 우수한 사용자 경험을 제공하는 사이트는 평균 LCP 시간이 2.5초 이하로 측정됩니다.
② FID는 최초 입력 반응 시간으로, 웹페이지가 모두 로드된 후 측정되는 지표입니다. 사용자가 렌더링이 끝난 후 사이트 요소 하나를 클릭할 때, 그 요소가 동작하는데 걸리는 시간입니다. 우리가 유튜브에 접속할 때 영상 하나를 클릭한 시점부터 영상 보는 페이지가 모두 로딩될 때까지 경과하는 시간을 측정합니다.
③ CLS는 레이아웃 변경 횟수입니다. 사용자가 페이지에 머무는 시간 모두를 측정해 해당 시간 동안 페이지에서 레이아웃이 얼마나 바뀌었는지 측정하며, 0에 가까울수록 레이아웃이 변하지 않았다는 뜻입니다.
CLS는 팝업처럼 사이트 가독성을 해치는 요소를 측정합니다. 숫자가 클수록 페이지에서 레이아웃이 많이 바뀐 것을 의미하며, 팝업이 많은 사이트는 사용자의 가독성을 해치기 때문에 CLS는 상대적으로 높아집니다
코어 웹 바이탈을 효과적으로 확인할 수 있는 모니터링 서비스
1. 구글 서치 콘솔
사이트 색인, URL 검사를 할 수 있는 구글 서치 콘솔에서도 코어 웹 바이탈을 확인할 수 있습니다. 좌측 메뉴에서 [실험] → [코어 웹 바이탈] 지표로 확인이 가능합니다.
2. PageSpeed Insights
구글 PageSpeed Insight는 모바일, 데스크톱에서 페이지 성능을 확인할 수 있습니다. 페이지 경험 개선에 도움되는 인사이트를 제공합니다.
앞서 소개한 코어 웹 바이탈 성능을 측정하는 툴은 다소 포괄적인 내용이었다면, 지금부터 소개할 리얼 유저 모니터링에서는 프론트엔드 개발까지 개선할 수 있습니다. 대표적인 리얼 유저 모니터링 서비스 세 가지와 특징을 소개하겠습니다.
3. Datadog
데이터독 리얼 유저 모니터링은 코어 웹 바이탈을 수집해 메트릭을 웹/앱 사용자 성능을 개선합니다. 데이터독 리얼 유저 모니터링에서는 웹 페이지의 전체 로드 성능을 측정하고, 잠재 병목 현상을 조사해 성능 개선에 도움을 줍니다.
4. Dynatrace
다이나트레이스 리얼 유저 모니터링은 코어 웹 바이탈 개선을 위한 서비스를 제공합니다. KPI(Key Performance Indicator), 다차원 분석, USQL 분석, Waterfall 차트 등의 기능으로 페이지 경험 개선과 비즈니스 이해 관계자를 설득할 수 있도록 지원합니다.
5. 와탭 리얼 유저 모니터링 (RUM)
와탭 모니터링에서도 페이지 로드 지표 대시보드에서 코어 웹 바이탈을 확인할 수 있습니다. LCP, FID, CLS 수치를 실시간으로 확인할 수 있을 뿐만 아니라, 원하는 날짜를 선택해 지나간 페이지 로드 지표를 확인할 수 있습니다. 또한, 문제가 있는 페이지에 대해 리소스 혹은 AJAX 등에 대한 지표를 연계해 원인을 식별해 볼 수 있습니다.
마치며
코어 웹 바이탈은 마케터에게는 SEO(검색 엔진 최적화)와 페이지 이탈을 낮추는데 도움이 되고, 개발자에게는 웹 페이지 개발에서 성능 저하 요소를 제거하고 페이지 쿼리를 개선하는 데에 도움이 되는 지표입니다. 비즈니스와 웹 페이지에 맞는 코어 웹 바이탈을 측정하는 모니터링 툴을 사용하길 바랍니다.
