PageSpeed Insights는 모바일이나 데스크톱 기기에서의 페이지 또는 origin의 실제 성능을 보고하고, 단일 페이지를 분석할 때 해당 페이지를 어떻게 개선할 수 있는지에 관한 제안을 제공합니다.
속도 점수
PageSpeed Insights는 Chrome 사용자 환경 보고서 (CrUX)의 데이터를 통합하여 페이지나 origin에 관한 실제 성능 데이터를 표시합니다. PSI에서는 첫 번째 콘텐츠가 포함된 페인트 (FCP) 및 DOMContent로드 (DCL)라는 두 가지 metrics을 보고합니다.
각 측정항목(FCP 및 DCL)의 중앙값은 CrUX 보고서에서 모니터링하는 모든 페이지와 비교됩니다. 값이 분포에서 차지하는 위치에 따라 다음 중 하나의 카테고리가 지정됩니다.
- 빠름: 측정항목의 중앙값이 모든 페이지 로드 중 가장 빠른 1/3에 속합니다.
- 느림: 측정항목의 중앙값이 모든 페이지 로드 중 가장 느린 1/3에 속합니다.
- 평균: 측정항목의 중앙값이 모든 페이지 로드 중 중간 1/3에 속합니다.
전체 속도 점수는 각 측정항목의 카테고리에 따라 계산됩니다.
- 빠름: 페이지/origin의 모든 측정항목이 빠른 경우
- 느림: 페이지/origin의 측정항목 중 '느림'인 항목이 있는 경우
- 평균: 기타 모든 경우
페이지 로드 분포
페이지 로드 분포 섹션은 CrUX 데이터세트에서 FCP 및 DCL 측정항목의 분포를 나타냅니다.
- Origin: 이 origin에서 게재된 모든 페이지의 집계된 속도 데이터입니다.
- 페이지: 단일 페이지의 속도 데이터
각 측정항목의 분포는 빠름(상위 1/3), 평균(중간 1/3), 느림(하위 1/3)의 세 가지 카테고리로 나뉩니다. 분포는 매일 업데이트됩니다.
최적화 점수
PageSpeed Insights는 단일 페이지를 분석할 때만 최적화 정보를 보고합니다.
PSI에서는 페이지가 일반적인 성능 권장사항을 얼마나 잘 따르는지 평가하고 성능 개선 여지를 0~100의 점수로 계산하여 추정하며, 이를 통해 두 가지 영역에서 페이지의 성능을 개선할 수 있는지 평가합니다.
- 스크롤 없이 볼 수 있는 부분을 로드하는 데 걸리는 시간: 사용자가 새 페이지를 요청한 순간부터 브라우저에서 스크롤 없이 볼 수 있는 부분의 콘텐츠가 렌더링될 때까지 걸린 시간
- 전체 페이지를 로드하는 데 걸리는 시간: 사용자가 새 페이지를 요청한 순간부터 브라우저에서 페이지가 완전히 렌더링될 때까지 걸린 시간
점수는 좋음, 보통, 낮음으로 분류됩니다. 개발자가 페이지의 스타일과 기능을 동일하게 유지하기를 원한다는 가정 하에 점수를 계산합니다.
- 좋음: 페이지가 대부분의 성능 권장사항을 충족하며 추가로 최적화할 여지가 거의 없습니다. 페이지 점수는 80점 이상입니다.
- 보통: 페이지가 몇 가지 일반적인 성능 최적화를 충족하지 않으며 최적화할 여지는 중간 정도입니다. 페이지 점수는 60~79점입니다.
- 낮음: 페이지가 최적화되어 있지 않으며 최적화할 여지가 상당히 많습니다. 페이지 점수는 0~59점입니다.
최적화 점수는 페이지의 성능 개선 여지를 추정합니다. 속도가 느린 페이지의 최적화 점수가 높을 수 있는데, 이는 페이지에서 사용하는 전체 리소스 대비 렌더링 차단 리소스의 비율이 낮기 때문입니다. 반면 속도가 빠른 페이지의 최적화 점수가 낮을 수도 있는데, 이 경우 전체 리소스 대비 렌더링 차단 리소스의 비율이 높기 때문입니다.
페이지 통계
이 섹션에는 페이지에서 렌더링 차단 리소스를 로드하는 데 필요한 왕복 횟수, 페이지에서 사용하는 총 바이트수 및 왕복 횟수와 데이터세트에서 사용된 바이트의 중앙값을 비교하는 방법이 설명되어 있습니다. 이때 페이지의 스타일과 기능을 수정하면 페이지가 더 빨라질 수 있는지 나타낼 수 있습니다.
최적화 권장사항
이 페이지에 적용할 수 있는 권장사항 목록입니다. 페이지가 빠르면 기본적으로 권장사항이 표시되지 않습니다. 페이지가 이미 데이터세트의 모든 페이지 중 상위 1/3에 포함되며 추가 개선이 필요하지 않기 때문입니다.
네트워크 연결의 성능이 크게 달라지기 때문에 최적화에서는 서버 구성, 페이지의 HTML 구조 및 이미지, 자바스크립트, CSS와 같은 외부 리소스 사용 등 페이지 성능의 네트워크와 독립적인 측면을 다룹니다. 추천을 구현하면 페이지의 상대적인 성능이 개선됩니다. 하지만 페이지의 절대적 성능은 여전히 사용자의 네트워크 연결에 좌우됩니다.
속도 성능은 다양한 요인의 영향을 받지만 그중 다음 두 가지가 가장 중요합니다.
- 렌더링 차단 왕복 횟수 : 렌더링 차단 리소스를 전달하는 데 필요한 왕복 횟수입니다. 페이지의 리소스 대부분이 렌더링 차단 리소스인 경우 PageSpeed Insights에서는 페이지의 최적화 여지가 크다고 간주합니다. 개발자는 최적화를 위해 방문 페이지 리디렉션 피하기, 렌더링을 차단하는 자바스크립트 및 CSS 제거, 브라우저 캐싱 활용, 표시되는 콘텐츠의 우선순위 지정, 서버 응답 시간 단축 규칙을 조사할 수 있습니다.
- 응답 크기: HTML 메인 리소스 및 모든 하위 리소스를 포함한 응답의 전체 크기입니다. 응답 본문의 대부분이 압축으로 인해 삭제될 수 있으면 PageSpeed Insights에서는 페이지의 최적화 여지가 크다고 간주합니다. 개발자는 압축 사용 설정, 리소스 축소, 이미지 최적화 규칙을 조사하여 최적화할 수 있습니다.
질문
PageSpeed Insights에 관해 궁금한 점이 있으면 FAQ를 참조하거나 토론방에 메시지를 게시해 주세요.