경험 감사 대시보드 experience-audit-dashboard

Experience Audit에서 배포 프로세스를 검증하는 방법을 알아보고, 명확하고 유용한 대시보드 인터페이스를 통해 배포된 변경 사항이 성능, 접근성, 모범 사례 및 SEO에 대한 기준 표준을 충족하는지 확인하는 데 도움이 됩니다.

NOTE
이 기능은 얼리 어답터 프로그램에만 사용할 수 있습니다.
AEMas a Cloud Service 용 기존 경험 감사 기능에 대한 자세한 내용은 문서를 참조하십시오. 경험 감사 테스트

개요 overview

경험 감사는 배포 프로세스를 검증하고 변경 사항이 배포되었는지 확인합니다.

  1. 성능, 접근성, 모범 사례, SEO(검색 엔진 최적화) 및 PWA(점진적 웹 앱)에 대한 기준 표준을 충족합니다.

  2. 회귀를 도입하지 마십시오.

Cloud Manager의 경험 감사를 통해 사이트에서 사용자의 경험을 최고 수준으로 유지할 수 있습니다.

감사 결과는 정보 제공용이며 이를 통해 배포 관리자가 점수, 현재 점수와 이전 점수 간의 변화를 확인할 수 있습니다. 이 인사이트는 현재 배포에 도입된 회귀가 있는지 확인하는 데 유용합니다.

경험 감사는 다음을 통해 제공됩니다. Google 등대: Google의 오픈 소스 도구이며 모든 Cloud Manager 프로덕션 파이프라인에서 활성화됩니다.

사용 가능 availability

Cloud Manager에서 경험 감사를 사용할 수 있습니다.

  • 사이트 프로덕션 파이프라인, 기본적으로
  • 개발 전체 스택 파이프라인(선택 사항)
  • 개발 프론트엔드 파이프라인(선택 사항)

다음을 참조하십시오. 구성 섹션 선택적 환경에 대한 감사를 구성하는 방법에 대한 자세한 정보.

감사는 파이프라인의 일부로 실행됩니다. 감사는 다음과 같을 수도 있습니다. 요청 시 실행 파이프라인 외부

구성 configuration

경험 감사는 프로덕션 파이프라인에 기본적으로 사용할 수 있습니다. 개발 전체 스택 및 프론트엔드 파이프라인에 대해 선택적으로 활성화할 수 있습니다. 모든 경우 파이프라인 실행 중에 평가되는 콘텐츠 경로를 정의해야 합니다.

  1. 구성하려는 파이프라인 유형에 따라 다음 지침을 따르십시오.

  2. 경험 감사를 사용할 비프로덕션 파이프라인을 추가하거나 편집하는 경우 다음을 선택해야 합니다. 경험 감사 의 확인란 소스 코드 탭.

    경험 감사 활성화

    • 비프로덕션 파이프라인에만 필요합니다.
    • 다음 경험 감사 확인란을 선택하면 탭이 나타납니다.
  3. 프로덕션 파이프라인과 비프로덕션 파이프라인 모두에서 의 경험 감사에 포함되어야 하는 경로를 정의합니다. 경험 감사 탭.

    • 페이지 경로는 다음으로 시작해야 합니다. / 및 은 사이트에 상대적입니다.
    • 예를 들어 사이트가 wknd.site 다음을 포함하려고 합니다. https://wknd.site/us/en/about-us.html 경험 감사에서 경로를 입력합니다. /us/en/about-us.html.

    경험 감사의 경로 정의

  4. 탭 또는 클릭 페이지 추가 환경 주소를 사용하여 경로가 자동으로 완료되고 경로 테이블에 추가됩니다.

    표에 경로 저장

  5. 필요에 따라 앞의 두 단계를 반복하여 경로를 계속 추가합니다.

    • 최대 25개의 경로를 추가할 수 있습니다.
    • 경로를 정의하지 않으면 기본적으로 사이트의 홈페이지가 경험 감사에 포함됩니다.
  6. 파이프라인을 저장하려면 저장 ​을 클릭합니다.

경험 감사 결과 results

경험 감사 결과는 프로덕션 파이프라인 실행 페이지를 통해 프로덕션 파이프라인의 스테이지 테스트 단계에 표시됩니다.

파이프라인의 대시보드

Experience Audit는 다음에 대한 중간 Google 등대 점수를 제공합니다. 구성된 페이지 이전 스캔과의 점수 차이.

의 이 요약 보기에서 스테이지 테스트 파이프라인의 단계에는 두 가지 옵션이 있습니다.

파이프라인 실행 세부 정보에 표시되는 요약 외에도 를 사용하여 감사의 전체 결과에 직접 액세스할 수도 있습니다. 보고서 액세스할 Cloud Manager 대시보드의 탭 전체 보고서 직접.

TIP
다음 섹션에서는 경험 감사의 결과를 보는 방법을 설명합니다.

가장 느린 페이지 보기 view-slowest-pages

탭 또는 클릭 가장 느린 페이지 보기 다음 열기 가장 느린 5페이지 대화 상자 - 다음과 같이 성과가 가장 낮은 5개 페이지를 보여 줍니다. 을(를) 감사하도록 구성했습니다.

가장 느린 다섯

점수는 다음으로 분류됩니다. 성능, 접근성, 우수 사례, 및 SEO 각 지표가 마지막 감사에서 벗어난 경우.

기본적으로 모바일 장치에 대한 점수가 포함된 대화 상자가 열립니다. 다음을 사용하여 데스크탑 점수로 변경할 수 있습니다. 장치 대화 상자 맨 위에서 전환합니다.

이 대화 상자는 빠른 개요를 위한 것입니다. 자세한 내용을 보려면 탭하거나 클릭합니다. 전체 보고서 보기.

전체 보고서 보기 view-full-report

다음 방법으로 전체 경험 감사 보고서를 볼 수 있습니다.

다음 보고서 cloud Manager의 탭이 열리고 다음을 표시합니다. 경험 감사.

경험 감사 보고서

보고서는 다음 두 영역으로 분할됩니다.

페이지 점수 - 트렌드 trend

기본적으로 선택된 보기 대상 페이지 점수 - 트렌드 은(는) 중간값 점수 대상: 지난 6개월.

사용 선택보기 [차트] 단추의 위쪽과 아래쪽에 있는 드롭다운을 통해 페이지별 세부 정보와 서로 다른 시간대를 각각 선택할 수 있습니다. 및 을(를) 탭하거나 클릭합니다 트렌드 업데이트 선택 사항을 적용하고 차트를 새로 고치려면 차트 맨 위에 있는 단추를 누릅니다.

차트 위로 마우스를 가져가면 도구 설명에 특정 시점의 Google Lighthouse 카테고리 값이 표시됩니다.

트렌드 세부 정보

특정 시점에 차트를 탭하거나 클릭하면 해당 스캔의 세부 정보가 포함된 팝오버가 열립니다. 을(를) 탭하거나 클릭합니다 경험 감사 검색 열기 검사 결과를 경험 감사 검색 결과 섹션.

다른 검사 선택

경험 감사 검색 결과 scan-results

다음 경험 감사 검색 결과 섹션에는 점수를 개선하는 방법과 검사한 모든 페이지의 세부 사항에 대한 권장 사항이 제공됩니다. 다음 두 섹션으로 나뉩니다.

권장 사항 recommendations

다음 Recommendations 섹션에는 전체 인사이트 세트가 표시됩니다. 기본적으로 성능 표시됩니다. 다음 옆에 있는 드롭다운을 사용합니다. Recommendations 다른 카테고리로 변경하는 제목입니다.

Recommendations

권장 사항에 대한 V자 버튼을 탭하거나 클릭하여 세부 정보를 표시합니다.

추천 세부 정보

사용 가능한 경우 확장된 권장 사항 세부 정보에는 가장 영향을 미치는 변경 사항에 집중할 수 있도록 권장 사항 영향의 백분율도 포함됩니다.

을(를) 탭하거나 클릭합니다 페이지 보기 세부 사항 보기의 링크를 클릭하여 권장 사항이 적용되는 페이지를 확인합니다.

권장 사항 세부 정보의 페이지

스캔한 페이지 scanned-pages

다음 스캔한 페이지 섹션은 스캔한 모든 페이지에 대한 세부 정보 점수를 제공합니다. 다음을 사용할 수 있습니다. 이전다음 단추를 사용하여 결과를 페이징하고 페이지에 매겨야 하는 디스플레이 수를 선택합니다.

스캔한 페이지

특정 페이지의 링크를 탭하거나 클릭하면 선택 의 필터 페이지 점수 - 트렌드 섹션 및 표시 점수 및 권장 사항 선택한 페이지에 대한 탭입니다.

페이지 결과

다음 원시 보고서 탭은 페이지의 모든 감사에 대한 점수를 제공합니다. 을(를) 탭하거나 클릭합니다 다운로드 원시 데이터의 JSON 파일을 검색하는 아이콘입니다.

원시 보고서

그러면 브라우저에서 다음을 가리키는 새 탭이 열립니다. https://googlechrome.github.io/lighthouse/viewer/ 선택한 페이지에 대한 Lighthouse raw JSON(JavaScript Object Notation) 보고서의 서명된 URL을 사용하여 자세한 검사를 위해 자동으로 열립니다

원시 보고서 보기

온디맨드 감사 보고서 on-demand

파이프라인 실행 중에 실행할 수 있을 뿐만 아니라 경험 감사 보고서를 온디맨드로 생성할 수도 있습니다. 파이프라인을 실행하지 않고도 페이지를 빠르게 스캔할 수 있는 좋은 솔루션입니다.

온디맨드 검사를 실행하려면 보고서 탭으로 이동하여 전체 감사 보고서를 확인한 다음 검사 실행 단추를 클릭합니다.

온디맨드 스캔

온디맨드 스캔은 최신 25개에 대한 경험 감사를 트리거합니다. 구성된 페이지 일반적으로 몇 분 안에 완료됩니다.

완료되면 점수 차트가 자동으로 업데이트되며 파이프라인 실행 스캔과 정확히 동일한 결과를 검사할 수 있습니다.

다음을 사용하여 트리거 유형을 기반으로 점수 차트를 필터링할 수 있습니다. 트리거 선택기.

트리거 필터

NOTE
환경이 삭제되지 않고 동일한 환경에 보류 중인 다른 검사가 없는 경우에만 온디맨드 검사를 시작할 수 있습니다.

경험 감사에 문제가 발생했습니다. issues

If 구성한 페이지 감사를 받을 수 없으므로 경험 감사에서 이를 반영합니다.

파이프라인에 확장 가능한 오류 섹션이 표시되어 액세스할 수 없는 상대 URL 경로를 볼 수 있습니다.

경험 감사에서 발생한 문제

전체 보고서를 보면 세부 사항이 경험 감사 검색 결과 섹션.

전체 보고서 문제

페이지를 사용할 수 없는 몇 가지 이유는 다음과 같습니다.

  • 구성은 액세스를 차단합니다.
  • 페이지가 존재하지 않습니다.
  • 기본 이외의 인증이 필요한 페이지로 리디렉션됩니다.
  • 내부 문제가 발생했습니다.
TIP
원시 보고서 액세스 의 경우 페이지를 감사할 수 없는 이유에 대한 세부 정보를 제공할 수 있습니다.

일반 성능 팁 performance-tips

수정하기 쉬운 가장 일반적인 영향력 있는 문제 중 두 가지는 누적 레이아웃 이동(CLS) 및 최대 콘텐츠풀 페인트(LCP)와 관련되어 있습니다.

이러한 기능은 다음을 통해 개선할 수 있습니다.

  • 접힌 부분 위에 이미지 로드(아래로 스크롤할 필요 없이 브라우저에 표시되는 콘텐츠)를 소홀히 하지 마십시오.
  • 리소스가 로드되는 방식의 우선 순위를 적절히 지정합니다(예: 문서가 로드된 후 접힌 부분 아래의 이미지를 비동기적으로 로드).
  • 접힌 부분 위의 콘텐츠를 렌더링하는 데 사용되는 JavaScript 및 CSS 파일을 미리 가져옵니다(필요한 경우).
  • 느리게 로드되거나 나중에 렌더링되는 컨테이너에 종횡비를 할당하여 세로 공간을 예약합니다.
  • 이미지를 WebP 형식으로 변환하여 크기를 줄입니다.
  • 사용 <picture> 및 이미지 srcset 다양한 뷰포트 크기에 대해 다양한 이미지 크기 사용(및 크기 조정이 작동하는지 확인).

경험 감사 평가 세부 정보 details

다음 세부 정보는 경험 감사가 사이트를 평가하는 방법에 대한 추가 정보를 제공합니다. 이 기능은 기능의 일반적인 사용에 필요하지 않으며, 완결성을 위해 여기에 제공됩니다.

  • 하지만 구성된 경험 감사 페이지 경로 표시 .com 게시자의 도메인에서는 감사가 원본(.net) 도메인: 개발 중에 발생한 문제를 감지하도록 합니다.

    • 다음 .com 도메인은 CDN을 사용하며, 더 나은 점수를 산출하거나 캐시된 결과를 포함할 수 있습니다.
  • 프로덕션 전체 스택 파이프라인에서 스테이징 환경을 스캔합니다.

    • 감사 시 감사 시 관련 세부 정보를 제공하려면 스테이징 환경의 콘텐츠가 프로덕션 환경에 최대한 가깝어야 합니다.
  • 에 표시되는 페이지 선택 드롭다운 페이지 점수 - 트렌드 섹션 은 경험 감사에서 과거에 스캔한 모든 알려진 페이지입니다.

  • 권장 사항 은 잠재적 이득 및 이전 스캔과의 차이를 가질 수 있다.

    • 경험 감사는 각 페이지에 대한 원시 보고서를 처리하고 낭비된 바이트 또는 밀리초를 성능 점수에 가중치가 적용된 통찰력과 연관시켜 잠재적 이득을 추정합니다.
    • 감사는 추적할 추천을 결정하는 데 도움이 되도록 이 정보(영향을 받는 페이지)를 제공합니다.
    • 자세한 내용은 다음을 참조하십시오. 일반 성능 팁 섹션
  • 프론트엔드 파이프라인이 기존 환경에 배포될 수 있고(또는 동일한 환경을 타겟팅하는 여러 프론트엔드 파이프라인이 있을 수 있음) 검색 결과가 환경 수준에서 집계되면, 검색을 트리거한 파이프라인 실행에 관계없이 점수, 트렌드 및 권장 사항이 동일한 선택한 환경에 표시됩니다.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab