페이지 및 사이트 품질을 더 효과적으로 측정하고 최적화하는 데 도움이 되는 PageSpeed Insights의 최신 정보를 알아보세요.
지난 몇 년 동안 PageSpeed Insights (PSI)는 필드 및 실험실 데이터 모두를 위한 원스톱 소스로 발전했습니다. Chrome UX 보고서(CrUX) 및 Lighthouse 진단의 정보를 통합하여 웹사이트 성능을 개선하는 데 도움이 되는 유용한 정보를 제공합니다.
오늘 업데이트된 PSI 버전을 발표하게 되어 기쁩니다. 속도 도구 모음의 핵심 요소이지만 PSI 코드베이스는 10년 전이었으며 많은 기존 코드가 포함되어 있었으며 재설계해야 했습니다. Google에서는 이를 PSI의 인터페이스 관련 문제를 해결하기 위한 기회로 삼았으며 이로 인해 사용자가 보고서를 탐색하기 어려울 때도 있었습니다. 주요 목표는 다음과 같았습니다.
- 합성 환경에서 파생된 데이터와 해당 분야의 사용자로부터 수집된 데이터를 명확하게 구분하여 UI를 더 직관적으로 만듭니다.
- 코어 웹 바이탈 평가가 UI에서 계산되는 방식을 명확하게 전달합니다.
- 머티리얼 디자인을 활용하여 PSI의 디자인과 분위기를 현대화합니다.
이 게시물에서는 올해 말에 출시될 PSI의 새로운 기능을 소개합니다.
새로운 기능
PSI UI 디자인은 보고서 데이터의 표시 방식을 개선하고 보고서에서 사용할 수 있는 데이터를 명확하고 세분화하여 표시하는 것을 목표로 합니다. 새로운 UI는 보다 직관적이며 개발자가 페이지의 랩 및 필드 성능 통계를 빠르게 찾는 데 도움이 됩니다. UI의 기본적인 변경사항은 다음과 같습니다.
필드 데이터와 실습 데이터의 명확한 구분
실습 데이터와 필드 데이터가 명확히 분리되도록 UI를 변경했습니다. '필드 데이터'와 '실험실 데이터'의 라벨이 데이터의 의미와 도움이 될 수 있는 방법을 나타내는 텍스트로 대체되었습니다. 필드 데이터 섹션도 상단에 배치했습니다. 현재 상단에 표시되어 있는 기존의 실습 기반 성능 점수는 점수 출처에 대한 모호성을 방지하기 위해 실습 데이터 섹션으로 이동되었습니다.
코어 웹 바이탈 평가
이전에는 필드 데이터에서 '통과' 또는 '실패'라는 한 단어로 표시되었던 코어 웹 바이탈 평가 결과가 이제 별도의 아이콘이 있는 별도의 하위 섹션으로 눈에 띄게 표시됩니다.
코어 웹 바이탈의 평가 절차에는 변화가 없습니다. 코어 웹 바이탈 측정항목 FID, LCP, CLS는 페이지 또는 출처 수준에서 집계될 수 있습니다. 세 가지 측정항목 모두에서 충분한 데이터가 있는 집계의 경우 세 가지 측정항목 모두의 75번째 백분위수가 좋음이면 집계가 코어 웹 바이탈 평가를 통과합니다. 그렇지 않으면 집계가 평가를 통과하지 못합니다. 집계의 FID 데이터가 충분하지 않은 경우 LCP와 CLS의 75번째 백분위수가 모두 양호하면 평가를 통과합니다. LCP 또는 CLS에 데이터가 충분하지 않으면 페이지 또는 출처 수준 집계를 평가할 수 없습니다.
모바일 및 데스크톱 실적 라벨
상단의 탐색 메뉴를 변경했고 보고서 페이지 중앙에 모바일 및 데스크톱 링크를 포함했습니다. 이제 링크가 쉽게 표시되고 데이터가 표시되는 플랫폼을 명확하게 나타냅니다. 이렇게 하면 탐색 메뉴가 더 깔끔하게 보일 수 있습니다.
출처 요약
출처의 모든 페이지에 관해 집계된 CrUX 점수를 제공하는 출처 요약은 현재 체크박스를 클릭하면 표시됩니다. 이 보고서 섹션을 필드 데이터 섹션의 새 탭인 '출처'로 옮겼습니다.
유용한 추가 정보
이제 보고서의 각 필드 하단에 새로운 정보 섹션과 샘플링된 데이터에 관한 다음 세부정보를 공유하는 실습 카드가 포함됩니다.
- 데이터 수집 기간
- 방문 시간
- 기기
- 네트워크 연결
- 표본 크기
- Chrome 버전
이 정보는 실험실 데이터와 필드 데이터의 구분을 강화하고, 이전에 두 데이터 소스 (실험실과 필드)의 차이점에 대해 확신이 없던 사용자에게 도움이 되어야 합니다.
보기 펼치기
필드 데이터 섹션에 드릴다운 기능을 추가하고 Core Web Vitals 측정항목의 세부정보를 볼 수 있는 새로운 '보기 펼치기' 기능을 제공합니다.
페이지 이미지
필드 데이터 바로 옆에 표시되는 로드된 페이지의 이미지를 삭제했습니다. 로드 시퀀스를 표시하는 페이지의 이미지와 썸네일은 모두 실험실 데이터 섹션에서 사용할 수 있습니다.
최신 제품 문서는 https://developers.google.com/speed/docs/insights/.를 참고하세요.
web.dev/measure 업데이트
Google에서는 성능 도구 상자에 포함된 여러 도구 간의 불일치를 줄이기 위해 web.dev/measure가 PageSpeed Insights API에 의해 직접 구동되도록 업데이트하고 있습니다.
이전에는 개발자가 PSI 도구와 /measure를 모두 사용하여 보고서를 실행하고 다른 Lighthouse 번호를 확인했습니다. 차이가 발생한 주된 이유 중 하나는 /measure가 모든 테스트를 미국에서 시작했기 때문입니다(이전에 미국 기반의 클라우드 백엔드를 이용했기 때문).
/measure가 PSI UI와 동일한 API를 직접 호출함으로써 개발자는 PSI 및 /measure를 사용할 때 더 일관된 환경을 얻을 수 있습니다. 또한 사용자의 도구 사용 방식에 따라 /measure를 약간 수정했습니다. 즉, /measure의 로그인 환경은 중단되지만 가장 많이 사용되는 기능(여러 카테고리 확인)은 계속 사용할 수 있습니다.
현재 PSI
한 걸음 물러나 현재의 PageSpeed Insights 보고서에서 제공하는 기능을 살펴보겠습니다. PSI 보고서는 개별 탭에 휴대기기 및 데스크톱 기기의 성능 데이터를 포함하며 페이지를 개선할 수 있는 방법을 제안합니다. 각 경우에 보고서의 핵심 구성요소는 유사하며 다음과 같이 구성됩니다.
성능 점수: 성능 점수는 PSI 보고서 상단에 표시되며 전반적인 페이지 성능을 요약합니다. 이 점수는 Lighthouse를 실행하여 페이지에 관한 실험실 데이터를 수집하고 분석함으로써 결정됩니다. 점수가 90점 이상이면 좋은 것으로 간주되고, 50~90점은 개선이 필요하며, 50점 미만이면 좋지 않습니다.
필드 데이터: CrUX 보고서 데이터 세트에서 가져온 필드 데이터는 실제 사용자 환경에 대한 유용한 정보를 제공합니다. 데이터에는 콘텐츠가 포함된 첫 페인트 (FCP)와 같은 측정항목이 포함되며, 코어 웹 바이탈 (최초 입력 지연 (FID), 최대 콘텐츠 렌더링 시간 (LCP), 누적 레이아웃 변경 (CLS))를 측정합니다. 측정항목 값과 함께 특정 측정항목의 값이 녹색, 황색, 빨간색 막대로 표시된 '좋음', '개선 필요' 또는 '나쁨'인 페이지의 분포도 확인할 수 있습니다. 분포와 점수는 CrUX 데이터 세트 사용자의 페이지 로드를 기준으로 표시됩니다. 점수는 지난 28일 동안 계산되며 충분한 실제 사용자 데이터를 사용할 수 없는 새 페이지에는 점수가 제공되지 않습니다.
출처 요약: 사용자는 출처 요약 표시 체크박스를 클릭하여 지난 28일 동안 동일한 출처에서 제공된 모든 페이지의 측정항목에 대해 집계된 점수를 볼 수 있습니다.
실습 데이터: Lighthouse를 사용하여 계산된 실습 성능 점수는 통제된 환경에서 수집되므로 성능 문제를 디버그하는 데 도움이 됩니다. 이 보고서는 콘텐츠가 포함된 첫 페인트, 콘텐츠가 포함된 최대 페인트, 속도 지수, 누적 레이아웃 변경, 상호작용까지의 시간, 총 차단 시간과 같은 측정항목을 사용하여 성능을 보여줍니다. 각 측정항목은 점수가 부여되고 좋음, 개선 필요 또는 나쁨을 나타내는 아이콘으로 라벨이 지정됩니다. 이 섹션은 출시 전에 성능 병목 현상을 잘 보여주고 문제 진단에 도움이 될 수 있지만 실제 문제를 포착하지 못할 수 있습니다.
감사: 이 섹션에는 Lighthouse에서 실행하는 모든 감사가 나열되고 통과한 감사가 나열되어 있으며 개선 기회 및 추가 진단 정보를 보여줍니다.
현재 PSI 설계의 문제점
위 스크린샷에서 볼 수 있듯이 실험실 및 필드 데이터의 서로 다른 데이터 포인트는 명확하게 격리되어 있지 않으므로 PSI를 처음 사용하는 개발자는 데이터의 컨텍스트와 다음에 해야 할 작업을 쉽게 이해하지 못할 수 있습니다. 이러한 혼동으로 인해 PSI 보고서를 해독하는 방법에 대한 많은 '방법' 블로그 게시물이 게시되었습니다.
새로운 디자인을 통해 개발자는 보고서를 더 쉽게 해석할 수 있어 PSI 보고서 생성에서 보고서에 포함된 유용한 정보에 따라 신속하게 조치를 취할 수 있습니다.
자세히 알아보기
성능 도구 업데이트에 관한 자세한 내용은 Chrome Dev Summit 2021의 기조연설을 참고하세요. PSI 출시일과 web.dev/measure의 변경사항을 알려드리겠습니다.
이 기사에 대한 의견을 주신 밀리카 미하즐리야, 필립 월튼, 브렌던 케니, 에와 가스페로비츠에게 감사드립니다.