실적 패널: 웹사이트 실적 분석

Dale St. Marthe
Dale St. Marthe
LinkedIn

성능 패널을 사용하여 웹사이트의 실적을 분석합니다.

개요

성능 패널을 사용하면 웹 애플리케이션의 CPU 성능 프로필을 기록할 수 있습니다. 프로필을 분석하여 잠재적인 성능 병목 현상과 리소스 사용을 최적화하는 방법을 찾습니다.

실적 패널을 사용하여 다음 작업을 수행합니다.

  • 성능 프로필을 기록합니다.
  • 캡처 설정을 변경합니다.
  • 실적 보고서를 분석합니다.

웹사이트 성능 개선에 관한 포괄적인 가이드는 런타임 성능 분석을 참고하세요.

성능 패널 열기

성능 패널을 열려면 DevTools를 열고 상단의 탭에서 성능을 선택합니다.

또는 다음 단계에 따라 명령어 메뉴를 사용하여 실적 패널을 엽니다.

  1. DevTools를 엽니다.
  2. 다음을 눌러 명령어 메뉴를 엽니다.
  3. macOS: Command+Shift+P
  4. Windows, Linux, ChromeOS: Control+Shift+P 명령어 메뉴:
  5. Performance panel를 입력하고 실적 패널 표시를 선택한 다음 Enter 키를 누릅니다.

Core Web Vitals 실시간 관찰

성능 패널을 열면 로컬 최대 콘텐츠 렌더링 시간 (LCP) 및 누적 레이아웃 이동 (CLS) 측정항목이 즉시 캡처되어 표시되며 점수 (좋음, 개선 필요, 나쁨)가 표시됩니다.

페이지와 상호작용하는 경우 실적 패널에 로컬 다음 페인트까지의 상호작용 (INP)과 점수도 표시됩니다. 이 점수를 통해 LCP 및 CLS 외에도 네트워크 연결 및 기기를 사용한 페이지의 Core Web Vitals에 대한 전체 개요를 확인할 수 있습니다.

실적 패널에는 세 가지 측정항목 카드 아래에 캡처된 상호작용 목록이 표시됩니다. 목록을 지우려면 지우기를 클릭합니다.

측정항목 점수의 세부정보를 보려면 측정항목 값 위로 마우스를 가져가 도움말을 확인하세요.

내 환경을 사용자 환경과 비교

Chrome UX 보고서에서 필드 데이터를 가져와 사이트 사용자의 환경을 로컬 측정항목과 비교할 수도 있습니다.

필드 데이터를 추가하려면 다음 단계를 따르세요.

  1. 실적 > 다음 단계 > 현장 데이터에서 설정을 클릭합니다.

    다음 단계 섹션의 '설정' 버튼

  2. 필드 데이터 가져오기 구성 대화상자에서 개인 정보 보호 공개를 확인하고 확인을 클릭합니다.

    고급: 개발 및 프로덕션 환경 간의 매핑 설정

    원하는 경우 가장 관련성 높은 필드 데이터를 자동으로 가져오기 위해 개발 출처와 프로덕션 출처 간에 여러 매핑을 설정할 수 있습니다.

    1. 대화상자 창에서 고급 섹션을 펼치고 + 새 항목을 클릭합니다.

    2. 매핑 표에 개발 및 프로덕션 URL을 입력하고 +를 클릭합니다.

      고급 섹션의 개발 출처와 프로덕션 출처 간의 매핑입니다.

      예를 들어 http://localhost:8080를 https://example.com에 매핑하면 localhost:8080/page1로 이동할 때 example.com/page1의 필드 데이터가 표시됩니다.

      또한 어떤 이유로든 필드 데이터를 자동으로 가져올 수 없는 경우 아래 URL의 필드 데이터 항상 표시를 사용 설정하고 URL을 제공할 수 있습니다. 실적 패널은 먼저 이 URL의 필드 데이터를 가져오려고 시도한 다음 어떤 페이지로 이동하든 이 필드 데이터를 표시합니다.

      설정 후 필드 데이터 가져오기 설정을 변경하려면 필드 데이터 > 구성을 클릭합니다.

    필드 데이터 가져오기를 설정하면 실적 패널에 로컬 측정항목 점수와 사용자가 경험하는 점수 간의 비교가 표시됩니다. 오른쪽의 필드 데이터 섹션에서 수집 기간을 확인할 수 있습니다.

    필드 데이터를 가져온 후의 수집 기간입니다.

    측정항목 점수의 세부정보를 보려면 측정항목 값 위로 마우스를 가져가 도움말을 확인하세요.

사용자 환경에 더 적합하도록 환경 구성

이전 섹션에 설명된 대로 필드 데이터 가져오기를 설정하면 실적 패널에 사용자 환경에 더 적합하도록 환경을 구성하는 방법에 관한 권장사항이 표시됩니다.

환경을 구성하려면 다음 안내를 따르세요.

  1. 각 측정항목 카드에서 로컬 테스트 환경 고려 섹션(있는 경우)을 펼치고 권장사항을 읽습니다.

    각 측정항목 카드에서 '로컬 테스트 환경 고려' 섹션이 펼쳐져 있습니다.

    이 예에서는 사용자 환경에 더 적합하도록 일반적인 데스크톱 화면 크기를 사용하고 CPU와 네트워크를 제한하는 것이 좋습니다.

  2. 이 예시의 환경 구성과 일치시키려면 다음을 실행합니다.

    1. 표시 영역을 일반적인 화면 크기 (예: 720p 또는 1080p) 중 하나로 설정합니다. 특정 기기와 화면 크기를 에뮬레이션하려면 요소 패널에서 기기 모드를 사용하면 됩니다.
    2. 이 예시의 웹사이트 사용자 중 82% 는 데스크톱을 사용하여 탐색합니다. 로컬 측정항목 점수를 올바른 현장 데이터와 비교하려면 현장 데이터 > 기기 드롭다운 목록에서 데스크톱을 선택합니다.
    3. 환경 설정 섹션에서 네트워크 드롭다운 목록을 예를 들어 빠른 4G로, CPU를 예를 들어 20배 감속으로 설정합니다. 동일한 섹션에서 네트워크 캐시 사용 중지를 할 수도 있습니다.

  3. 환경을 구성한 후 페이지를 새로고침하고 페이지와 상호작용하여 로컬 INP를 캡처한 다음 측정항목 점수를 다시 비교합니다.

    환경은 실제 사용자 환경과 일치하도록 구성됩니다.

    이제 측정항목 점수가 사용자의 점수와 더 유사한 것으로 보입니다. 이에 따라 로컬 테스트 환경 고려 섹션이 측정항목 카드에서 사라졌습니다.

이제 웹사이트의 Core Web Vitals를 개선할 수 있습니다.

실적 보고서 캡처 및 분석

다음 섹션에서는 프로필을 녹화하고, 캡처 설정을 변경하고, 보고서를 분석하는 방법에 관한 안내를 따르세요.

성능 프로필 기록

녹화할 준비가 되면 실적 패널에 다음 옵션이 표시됩니다.

캡처 설정 변경

캡처 설정을 사용하면 DevTools에서 성능 녹화 파일을 캡처하는 방식을 변경하고 보고서에 추가 정보를 제공할 수 있습니다. 캡처 설정 을 클릭하여 캡처 설정 메뉴에 액세스합니다.

Capture settings(캡처 설정) 메뉴에서 다음 옵션을 선택합니다.

실적 보고서 분석하기

성능 패널을 사용하는 방법에 관한 전체 가이드는 성능 녹화 파일 분석을 참고하세요.

다음은 가이드의 주제 그룹과 기타 유용한 문서를 보여줍니다.

보고서를 탐색하는 방법 알아보기:

워크플로에 중요한 일에 집중하는 방법을 알아보려면 다음 단계를 따르세요.

하향식, 호출 트리, 이벤트 로그 탭에 대해 알아보려면 다음 단계를 따르세요.

보고서를 분석하는 방법을 알아보려면 다음 단계를 따르세요.

패널을 사용하여 실적 개선하기

웹사이트의 성능을 개선하는 데 도움이 되는 다른 패널을 살펴보세요.