Web Vitals 확장 프로그램을 사용하게 된 이유는 PageSpeed Insights나 GTmetrix를 반복해서 열어보는 과정이 생각보다 번거로웠기 때문입니다. 사이트 속도나 CLS 문제가 의심될 때마다 별도 측정 사이트에 접속해야 했고, 결과가 나오기까지 기다리는 시간도 필요했습니다.
특히 OpenLiteSpeed와 LiteSpeed Cache를 사용하는 환경에서는 설정을 변경한 뒤 바로 변화가 있는지 확인하고 싶을 때가 많았는데, 그때 가장 자주 사용한 도구가 Web Vitals 확장 프로그램이었습니다.
브라우저에서 현재 보고 있는 페이지의 성능 지표를 즉시 확인할 수 있어 수정 결과를 빠르게 점검할 수 있었습니다.
목차
별도 측정 사이트를 계속 열어야 했던 불편함
워드프레스 사이트를 운영하다 보면 속도 관련 수치를 자주 확인하게 됩니다. 특히 CLS 경고가 발생하거나 TTFB가 느려졌다는 보고가 나오면 원인을 찾아야 하는 경우가 많습니다.
저 역시 처음에는 PageSpeed Insights와 GTmetrix를 주로 사용했습니다. 다만 간단히 확인하고 싶은 상황에서도 URL 입력 후 분석이 끝날 때까지 기다려야 했고, 설정을 수정할 때마다 반복 측정을 해야 했습니다.
브라우저 안에서 바로 결과를 확인할 수 있는 방법을 찾다가 Web Vitals 확장 프로그램을 사용하게 됐습니다.
Web Vitals 확장 프로그램이 보여주는 항목
이 확장 프로그램은 Chrome 사용자 환경 보고서(CrUX)와 동일한 기준의 핵심 지표를 보여줍니다.
확인 가능한 주요 항목은 다음과 같습니다.
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
- Interaction to Next Paint (INP)
- First Contentful Paint (FCP)
- Time To First Byte (TTFB)
사이트를 운영하면서 가장 자주 확인했던 수치는 CLS와 TTFB였습니다. CLS는 광고 영역이나 이미지 로딩 과정에서 화면이 밀리는 문제가 있는지 확인할 때 도움이 되었고, TTFB는 서버 응답 속도를 점검할 때 참고했습니다.
OpenLiteSpeed 서버 설정이나 LiteSpeed Cache 설정을 변경한 뒤에도 이 수치를 비교하면서 상태를 확인했습니다.
Web Vitals 확장 프로그램 설치하기
Chrome 웹 스토어에서 Web Vitals를 검색하면 설치 페이지를 찾을 수 있습니다. 우측 상단의 Chrome 추가 버튼을 누르면 설치가 완료됩니다. 크롬뿐 아니라 Microsoft Edge, 네이버 웨일처럼 Chromium 기반 브라우저에서도 동일하게 사용할 수 있습니다.
도구 모음에 고정해 두는 것이 편했습니다
설치는 간단했지만 확장 메뉴 안에 숨겨둔 상태에서는 사용할 때마다 다시 찾아야 하는 불편함이 있었습니다. 저는 사이트를 열자마자 바로 확인하는 경우가 많아 브라우저 상단에 고정해 두고 사용했습니다.
Edge에서는 확장 메뉴의 눈 모양 아이콘을 누르면 항상 표시되고, Chrome에서는 핀 아이콘을 통해 같은 방식으로 고정할 수 있습니다.
Web Vitals 확장 프로그램으로 웹사이트 측정하기
설치 후 사이트에 접속하면 브라우저 상단에 녹색 아이콘이 표시됩니다. 아이콘을 누르면 현재 페이지의 LCP, CLS, FCP, TTFB 등의 수치를 바로 확인할 수 있습니다. 별도의 분석 대기 시간이 거의 없기 때문에 캐시 설정을 변경하거나 이미지 최적화를 진행한 뒤 즉시 결과를 확인할 수 있었습니다.
특히 LiteSpeed Cache 설정을 조정하거나 광고 위치를 수정했을 때 CLS 수치 변화를 빠르게 확인할 수 있어서 점검 시간이 많이 줄었습니다.
어떤 수치를 먼저 봐야 하는가
모든 항목이 중요하지만 실제 운영 과정에서는 우선순위를 두고 확인하는 경우가 많습니다. TTFB가 높게 나오면 서버 응답 속도나 캐시 설정을 점검해 보는 것이 좋습니다. OpenLiteSpeed와 LiteSpeed Cache를 사용하는 경우 캐시가 제대로 적용되지 않으면 수치가 크게 달라질 수 있습니다.
CLS는 광고 삽입 위치나 이미지 크기 지정 문제와 연결되는 경우가 많았습니다. 구글 서치 콘솔에서 CLS 관련 경고가 발생한다면 해당 수치를 함께 확인해 보는 것이 좋습니다. LCP는 대표 이미지, CSS, 폰트 로딩 등의 영향을 받기 때문에 페이지 최적화 상태를 판단하는 기준으로 활용했습니다.
사용 후 느낀 변화
Web Vitals 확장 프로그램을 사용한 이후에는 속도 측정을 위해 여러 사이트를 반복해서 방문하는 일이 크게 줄었습니다. 설정을 변경한 직후 브라우저에서 바로 수치를 확인할 수 있었고, CLS나 TTFB처럼 자주 점검하는 항목도 훨씬 빠르게 확인할 수 있었습니다.
특히 워드프레스 사이트를 운영하면서 캐시 설정을 자주 수정하는 경우라면 작은 변경 사항이 실제로 영향을 주는지 확인하는 용도로 자주 사용하게 되는 도구였습니다.
FAQ
Web Vitals 확장 프로그램은 무료인가요?
네. Chrome 웹 스토어에서 무료로 설치할 수 있습니다.
Web Vitals 확장 프로그램은 Edge에서도 사용할 수 있나요?
가능합니다. Edge, 웨일 등 Chromium 기반 브라우저에서 정상적으로 동작합니다.
Web Vitals 확장 프로그램 수치와 PageSpeed Insights 수치는 같은가요?
측정 방식과 데이터 기준이 일부 다를 수 있지만 Core Web Vitals 기준 지표를 확인하는 용도로 사용할 수 있습니다.
