웹사이트 속도 측정 사이트 및 도구 TOP6

페이지 로딩 속도는 사용자 경험(UX)에 직접적인 영향을 미치며, 검색엔진의 순위에도 반영됩니다. 특히 Core Web Vitals(LCP, FID, CLS) 지표는 구글이 공식적으로 평가 기준으로 사용하는 만큼, 정기적인 웹사이트 속도 측정과 개선이 필수적입니다.

이 글에서는 실제 웹사이트의 성능을 점검하고, 병목 구간을 파악할 수 있는 대표적인 속도 측정 도구 5가지를 소개합니다. 각각의 장단점과 활용 팁을 함께 정리하여, 사이트 최적화에 실질적으로 도움이 되도록 구성했습니다.

Ⅰ. 속도 측정 전에 체크할 설정 사항

GTmetrix로 테스트를 진행할 때 테스트 GTmetrix의 테스트 무료 버전의 테스트 위치는 캐나다의 벤쿠버입니다. 테스트 위치가 다른 점은 테스트 진행 시 같이 기재하니 바로 참고할 수 있습니다. 가능하다면 여기에 테스트 위치는 서버와 가장 가까운 위치에서 테스트 할 수 있도록 합니다.

이 글에서는 예시로 한국 서울에 위치한 사이트를 사용하여, 각 도구의 주요 측정 항목과 체크 포인트를 안내합니다.

워드프레스로 구축한 사이트이며, kadence 테마를 사용했습니다. WP Rocket과 Perfmatters 플러그인으로 성능 최적화가 된 상태입니다.

Ⅱ. 웹사이트 속도 측정 6가지 도구

1. 구글 ‘PageSpeed Insights’

구글 페이지스피드는 가장 많이 알려지고 많이 사용되는 보편적인 성능 측정 도구입니다. 페이지 속도뿐만 아니라 최적화 상태와 Core Web Vitals 지표까지 함께 확인할 수 있어, 웹사이트 성능을 종합적으로 평가하는 데 유용합니다.

Core Web Vitals는 구글이 웹 페이지의 사용자 경험(UX)을 측정하기 위해 제시한 핵심 성능 지표입니다. 주로 페이지 로딩, 반응 속도, 시각적 안정성을 평가하며, SEO에도 영향을 줍니다. 2020년부터 구글 검색 순위에 반영되기 시작했습니다.

성능, 접근성, 권장사항, SEO 점수 모두 Lighthouse 엔진이 계산합니다. PageSpeed Insights는 웹 서버와 네트워크 상태도 반영하지만, 점수 산정은 Lighthouse 규칙을 따릅니다.

1️⃣ 성능

페이지 로딩 속도와 사용자 체감 속도를 종합 평가합니다.

2️⃣ 접근성

모든 사용자가 사이트를 이용할 수 있는가를 평가합니다.

• Alt 텍스트: 이미지에 대체 설명 추가
• 색상 대비: 텍스트와 배경 명도차 4.5:1 이상
• 폼 레이블: 입력 필드에 명확한 label 사용
• 키보드 접근성: tab으로 메뉴 이동 가능해야 함

3️⃣ 권장사항

보안, 코드 품질, 최신 기술 사용 여부를 평가합니다.

• HTTPS 적용
• 콘솔 에러 없음
• 구식 JS 라이브러리 사용 금지
• Cross-Origin 정책(CORS) 적정성 유지

4️⃣ 검색엔진 최적화 (SEO)

검색 엔진이 페이지를 올바르게 이해하고 색인할 수 있는지 확인합니다.

• <title> 및 <meta description> 존재
• 모바일 뷰포트 메타 설정
• Robots.txt에서 차단되지 않았는지 확인
• 이미지 alt 속성, 스키마 구조화 데이터 포함

2. 크롬 개발자 도구

크롬 개발자 도구에서 웹사이트 성능 측정은 Network, Lighthouse, Performance 탭 3가지로 분류됩니다.

2.1 Network

Network 탭은 웹페이지의 네트워크 요청과 응답을 분석하는 탭입니다. [Ctrl]+[R] 키를 눌러서 측정합니다.

주요 기능 및 특징

• 리소스 로딩 분석
  • HTML, CSS, JS, 이미지 등 각 파일의 요청/응답 시간 확인
  • 파일 크기와 상태 코드(200, 404 등) 확인
• 페이지 로딩 시간 측정
  • DOMContentLoaded, Load 이벤트까지의 시간 확인
  • TTFB(Time to First Byte) 등 서버 응답 속도 확인
• 캐싱 효과 분석
  • 브라우저 캐시, 서비스 워커, CDN 캐시 적용 여부 확인
• 병목 지점 파악
  • 특정 리소스가 페이지 로딩을 지연시키는지 확인 가능
• 실시간 확인
  • 페이지 새로 고침 시 리소스 로딩 순서, 시간, 크기 확인

장점

• 리소스별 세부 분석 가능 → 어떤 파일이 병목인지 파악 용이
• 서버와 클라이언트 간 데이터 전송 상태 확인 가능

단점

• 사용자 체감 속도와 직접적인 연관성은 보기 어려움
• 모든 데이터를 수동으로 해석해야 함

2.2 Lighthouse

2.2.1 성능 테스트 방법

Lighthouse를 통한 성능 테스트 시 구글 페이지스피드와 동일한 점수가 측정되는 것을 확인할 수 있습니다.

크롬 개발자 도구의 Lighthouse와 구글 페이지스피드 인사이트의 차이는 둘 다 Lighthouse 엔진을 사용합니다.

• Lighthouse = DevTools 내 개발자용 진단 도구, 페이지를 시뮬레이션 환경에서 분석
• PageSpeed Insights = Lighthouse + 실제 사용자 경험 데이터(RUM) 제공, 보다 현실적인 성능 확인 가능

쉽게 말하면, Lighthouse는 “개발 환경에서 시뮬레이션한 점수”
PageSpeed Insights는 “시뮬레이션 + 실제 사용자 경험”을 합친 점수라고 이해하시면 됩니다.

Lighthouse는 로컬 브라우저 기준, 네트워크 속도, 사용자의 로컬 CPU 성능에 따라 점수 변동이 있으며, 페이지스피드 인사이트는 Google 서버에서 시뮬레이션 + 실제 사용자 데이터(RUM) 포함합니다. 결국 페이지스피드와 Lighthouse의 점수를 비교할 때 환경 차이를 참고해야 합니다.

2.3 Performance

성능 탭에서의 측정은 Record 버튼(●) 클릭 후 [Ctrl]+[R] 키를 눌러 페이지 새로 고침 또는 페이지 이동을 하여 측정 후 마지막에Stop 버튼(■) 클릭하여 타임라인을 분석합니다.

기존에 나와 있는 점수에서 다시 Record 버튼(●)을 클릭하여

테스트가 시작됩니다.

3. GTmetrix

GTmetrix는 웹사이트의 속도 및 성능 분석을 제공하는 외부 웹 서비스입니다. 주요 특징은 Lighthouse와 PageSpeed Insight와 유사하지만, 보다 상세한 리소스 분석과 시각화 기능을 제공한다는 점입니다. 무료 계정은 테스트 위치와 횟수 제한이라는 점이 있으며, 로그인 후 더 많은 횟수를 부여 받고, 유료 가입 후에 더 정확한 웹사이트의 성능을 체크할 수 있습니다.

현재 테스트 서버의 위치는 한국 서울입니다. GTmetrix의 테스트 서버는 캐나다 벤쿠버입니다.

URL을 입력 후 테스트를 시작합니다.

테스트 결과를 아래와 같이 확인할 수 있습니다.

4. Pingdom

Pingdom은 원래 무료/유료 웹사이트 성능 모니터링 도구였지만, 현재는 대부분 유료 서비스로 전환되었습니다.
주요 기능은 웹사이트 속도 측정, 가용성 모니터링, 성능 분석을 제공하는 것입니다.

4.2 장점

• 서버 다운 여부, 응답 속도 등 모니터링 기능 포함
• Waterfall 차트로 리소스 병목 파악 가능
• 테스트 위치 선택 가능 → 글로벌 속도 비교

4.3 단점

• 현재 대부분 유료 서비스 → 무료 사용에는 제한
• Lighthouse 기반 Core Web Vitals 점수 제공은 없음 → 성능 권장사항 분석은 제한적

5. WebPagetest

WebPagetest는 웹사이트 성능을 상세하게 측정하고 분석할 수 있는 외부 도구로, 웹 개발자와 성능 최적화 전문가들 사이에서 많이 사용됩니다.

테스트 지역을 무료 버전에서 선택할 수 있습니다.

단 테스트 시간이 소요됩니다.

WebPagetest의 웹사이트 속도 측정 결과는 시간이 소요되는 대신 상세한 확인이 가능합니다.

WebPageTest는 세밀한 성능 지표, 글로벌 테스트 환경, Waterfall 분석을 제공하여 개발자와 성능 최적화 전문가가 페이지 로딩 문제를 정확하게 파악하고 개선할 수 있는 도구입니다.

WebPageTest는 운영하는 서버에 직접 설치해서 빠른 테스트로 운영도 가능합니다. 하지만 예를 들어 Nginx와 같은 설정을에서 Nginx.conf 설정 등을 추가로 설정해야 하는 번거로움이 따르게 됩니다.

6. Yellow Lab Tools

Yellow Lab Tools는 일반적으로 웹사이트 성능을 측정하지만, 측정 시 모바일, 태블릿, 데스크탑(SD/HD) 등의 시뮬레이션 기기 설정을 선택하여 해당 환경에서의 성능을 확인할 수 있습니다.

아래는 각각 모바일과 데스크탑의 성능 측정을 한 결과입니다.

Yellow Lab Tools는 Google PageSpeed Insights나 Chrome 개발자 도구와 비교했을 때, 특히 프론트엔드 코드 품질 및 상세 분석에 더 중점을 둔다는 점에서 차이가 있습니다. 웹페이지 속도뿐만 아니라 프론트엔드 코드의 구조적, 품질적 문제를 깊이 있게 분석하는 데 강점을 가집니다. 예를 들어, DOM 복잡도, 불필요하게 큰 이미지/폰트, CSS/JS 오류 등 개발자가 직접 개선할 수 있는 코드 레벨의 상세한 지침을 제공합니다.

Ⅲ. 웹사이트 속도 개선을 위한 핵심 전략

웹사이트 속도를 개선하려면 캐싱과 이미지 최적화를 먼저 적용해야 합니다. 불필요한 자바스크립트와 CSS 파일을 제거하고, 필수 파일은 압축·병합하여 요청 수를 줄이는 것이 효과적입니다. 서버와 CDN을 최적화하고, 스크립트와 이미지 로딩을 지연시키면 페이지 렌더링이 빨라집니다.

DOM 구조와 레이아웃을 단순화하고, 웹폰트 사용을 최적화하여 시각적 안정성을 확보해야 합니다. 외부 스크립트는 필요할 때만 로드하고 불필요한 요소는 제거합니다. 마지막으로 정기적으로 성능을 점검하여 Core Web Vitals 지표를 확인하고 지속적으로 개선하는 것이 중요합니다.