Page Performance는 웹 페이지의 즉각적인 성능 개요를 제공합니다. 로드 타이밍 지표(FCP, DOMContentLoaded, 전체 로드 시간, TTI), DOM 통계(요소 수, 중첩 깊이, 이벤트 리스너 수), JavaScript, CSS, 이미지, 폰트 등 리소스별 개수와 크기 분석을 보여줍니다. 색상으로 구분된 성능 점수가 빠른 건강 지표를 제공합니다.
Lighthouse나 WebPageTest를 사용한 성능 프로파일링은 깊이 있는 분석을 제공하지만 실행 시간이 오래 걸리고 보고서가 방대합니다. 때로는 단순한 질문 하나만 필요합니다: "이 페이지가 빠른가 느린가? 가장 큰 문제는 무엇인가?" Page Performance는 그 즉각적인 답을 줍니다. 브라우저의 Performance API와 Navigation Timing API에서 이미 수집된 타이밍 데이터를 읽어 깔끔하고 시각적인 대시보드로 제시합니다. 상단 섹션에는 주요 타이밍 지표가 표시됩니다: First Contentful Paint(첫 콘텐츠가 나타나는 시점), DOMContentLoaded(HTML이 완전히 파싱된 시점), Full Load(모든 리소스가 완료된 시점), Time to Interactive(페이지가 응답 가능한 상태가 된 시점). 각 지표는 Web Vitals 기준에 따라 색상으로 구분됩니다(녹색: 빠름, 노랑: 보통, 빨강: 느림). 그 아래에는 리소스별 분해가 시각적 막대 차트로 표시되어 JavaScript, CSS, 이미지, 폰트 등 각 유형에 얼마나 많은 대역폭이 사용되었는지 쉽게 비교할 수 있습니다. DOM 통계 섹션은 총 요소 수, 최대 중첩 깊이, 이벤트 리스너 수를 보여주며, 렌더링 성능에 영향을 주는 DOM 복잡도를 나타냅니다.
First Contentful Paint(FCP), DOMContentLoaded, Full Page Load, Time to Interactive(TTI) 등 가장 중요한 4가지 성능 지표를 보여줍니다. 각 지표는 Web Vitals 기준에 따라 색상으로 구분됩니다(녹색: 빠름, 노랑: 보통, 빨강: 개선 필요).
JavaScript 파일, CSS 스타일시트, 이미지, 폰트, 기타 에셋의 개수와 총 크기를 보여주는 시각적 막대 차트입니다. 어떤 리소스 유형이 페이지 무게에 가장 큰 영향을 미치는지 즉시 파악할 수 있습니다.
총 DOM 요소 수, 최대 중첩 깊이, 총 이벤트 리스너 수를 보여줍니다. 큰 DOM 크기(2000개 이상 요소)와 깊은 중첩(15단계 이상)은 잠재적 성능 병목으로 플래그 표시됩니다.
0~100 사이의 단일 점수가 페이지 성능 건강 상태를 요약하며 색상으로 구분됩니다(85 이상: 녹색, 50~84: 노랑, 0~49: 빨강). 타이밍 지표와 리소스 효율성을 가중치로 계산합니다.
다운로드된 모든 리소스의 합산 크기를 MB 단위로 보여줍니다. 카테고리별로 분해되어 JavaScript가 842 KB, 이미지가 245 KB, CSS가 128 KB인지 등 가장 무거운 부분을 명확히 식별할 수 있습니다.
브라우저의 Performance API에서 이미 수집된 성능 데이터를 읽습니다. 추가 페이지 로드, 합성 테스트, 추가 네트워크 요청이 필요 없으며 도구 실행으로 인한 성능 영향도 없습니다.
어떤 페이지든 열고 즉시 성능 개요를 확인하세요. 빠른가(녹색 점수), 보통인가(노랑), 느린가(빨강)? 대시보드가 1초도 안 되어 답을 줍니다. Lighthouse가 실행될 때까지 기다릴 필요가 없습니다.
페이지가 느리다면 리소스 분해가 이유를 보여줍니다. JavaScript가 1.2 MB인가? 그것이 병목입니다. 최적화되지 않은 이미지가 800 KB인가? 그것이 수정 대상입니다. 시각적 분해로 가장 무거운 부분이 명확해집니다.
최적화 전에 Page Performance를 실행하고 지표를 기록하세요. 변경 후 페이지를 새로고침하고 다시 실행하여 FCP, 로드 시간, 총 페이지 무게를 비교하면 최적화 효과를 검증할 수 있습니다.
자신의 사이트와 경쟁사 사이트에서 Page Performance를 실행하여 로드 시간, 페이지 무게, 리소스 분포를 비교하세요. 경쟁사가 더 적은 JavaScript를 사용하나요? 이미지가 더 잘 최적화되었나요?
개발 중 주요 페이지에서 정기적으로 도구를 실행하세요. 성능 점수가 떨어지거나 페이지 무게가 갑자기 증가하면 회귀를 도입한 것입니다. 프로덕션에 도달하기 전에 조기 발견할 수 있습니다.
DevSuite Pro 플로팅 독을 열고 Page Performance 아이콘을 클릭하세요. 현재 페이지 로드에 대한 성능 데이터가 즉시 대시보드에 나타납니다.
상단의 4가지 주요 타이밍 지표(FCP, DOMContentLoaded, Full Load, TTI)를 확인하세요. 녹색 값은 빠르고, 노랑은 보통, 빨강은 개선이 필요합니다.
리소스 막대 차트를 보고 어떤 에셋 유형이 가장 무거운지 확인하세요. JavaScript가 500 KB를 초과하면 코드 분할이나 지연 로딩을 고려할 때입니다.
DOM 통계를 검토하세요. 요소 수가 1500개를 초과하거나 중첩 깊이가 15단계를 넘으면 마크업을 단순화하여 렌더링 성능을 개선하는 것을 고려하세요.
전체 점수가 빠른 벤치마크를 제공합니다. 최적화 전후로 도구를 실행하여 개선 효과를 측정하세요.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
