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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

개요

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

Performance 패널을 사용하여 다음을 수행합니다.

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

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

성능 패널 열기

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

또는 다음 단계를 따라 명령어 메뉴를 사용하여 성능 패널을 열 수 있습니다.

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

Core Web Vitals 실시간 관찰

Performance(성능) 패널을 열면 로컬 최대 콘텐츠 페인트(LCP) 및 레이아웃 변경 횟수(CLS) 측정항목이 즉시 캡처되어 표시됩니다(좋음, 개선 필요 또는 나쁨).

페이지와 상호작용하면 Performance(성능) 패널에는 LCP 및 CLS 외에도 네트워크 연결 및 기기를 사용하여 페이지의 Core Web Vitals에 관한 전체 개요를 제공하는 로컬 INP(Interaction to Next Paint) 및 해당 점수가 표시됩니다.

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

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

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

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를 캡처하고 측정항목 점수를 다시 비교합니다.

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

    이제 측정항목 점수가 사용자가 경험한 점수와 더 비슷해졌습니다. 이에 따라 로컬 테스트 환경 고려 섹션이 측정항목 카드에서 사라졌습니다.

이제 웹사이트의 코어 웹 바이탈을 개선할 수 있습니다.

실적 보고서 캡처 및 분석하기

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

성능 프로필 기록

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

캡처 설정 변경

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

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

실적 보고서 분석하기

실적 패널을 사용하는 방법에 관한 전체 가이드는 실적 기록 분석을 참고하세요.

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

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

워크플로에서 중요한 사항에 집중하는 방법 알아보기:

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

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

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

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