핵심 Web Vitals 감사를 개선하기 위한 4가지 주요 팁

특히 고려해야 할 다양한 타사 도구를 사용하여 핵심 성능 평가를 감사하는 방법에 대한 엄격하고 빠른 규칙은 없습니다. 귀하의 워크플로에 통합할 몇 가지 속도 감사 주요 팁을 분석하여 다음을 다룹니다.

• 페이지 경험 및 Google 검색 콘솔
• PageSpeed ​​Insights의 단점
• 권장 타사 감사 도구
• 폭포수 차트 이해

1. Search Console을 사용하여 핵심 핵심 성능 감사 워크플로 시작

사이트 속도 및 핵심 Web Vitals 문제에 대해 웹사이트를 감사할 때는 항상 Search Console 내의 '경험' 섹션을 검토하여 문제 해결 프로세스를 시작하는 것이 좋습니다. 단, 액세스가 가능한 경우입니다. 검색 콘솔은 Chrome UX 보고서의 실제 사용자(필드) 데이터를 집계하므로 LCP, CLS 또는 FID 문제 중 사용자 경험과 궁극적으로 사이트의 잠재적 순위에 영향을 미치는 문제를 쉽게 이해할 수 있습니다.

'페이지 경험' > '핵심 Web Vitals'로 이동하면 표시된 그래프에 웹사이트 속성에 대해 '양호', '개선 필요' 또는 '나쁨'으로 분류된 URL 수가 표시됩니다. 예를 들어:

위의 핵심 성능 향상 임계값에 대한 Google의 타이밍 및 측정항목은 아래 차트를 참조하세요.

여기에서 대부분의 URL이 양호'로 분류되어 3가지 핵심 핵심 성능 지표를 모두 통과하는지 또는 대부분의 페이지가 '나쁨' 또는 '개선 필요'인지 평가하여 몇 가지 해결되지 않은 기술 문제가 있음을 나타낼 수 있습니다. 통과하려면 해결해야 합니다.

유용한 팁: 페이지는 '양호' 상태로 이동하기 위해 세 가지 웹 필수 요소를 모두 통과해야 하며 대부분의 사이트 URL이 '개선 필요' 범위에 있는 것만으로는 충분하지 않습니다.

그런 다음 각 섹션으로 드릴다운하여 속도 문제의 영향을 받고 감사가 필요한 특정 URL을 찾을 수 있습니다. 템플릿 수준에서 유사한 항목별로 그룹화됩니다. 따라서 홈페이지, 카테고리 페이지, 제품 페이지, 블로그 게시물 등 사이트에 있을 수 있는 모든 유형의 URL을 감사하려고 하는 대신 실제 사용자가 웹사이트를 방문할 때 직면하는 문제는 1 또는 2에만 집중될 수 있습니다. 즉, 이러한 템플릿에만 노력을 집중할 수 있으므로 시간을 크게 절약할 수 있습니다.

2. PageSpeed ​​Insights를 아껴서 사용

PageSpeed ​​Insights(PSI)는 문제를 해결할 수 있는 잠재적인 기회에 대한 최상위 개요를 제공하는 Google의 유용한 무료 도구이지만, 별도로 사용하는 경우 사이트 속도를 감사하는 것은 실제로 게으른 방법입니다. 우리는 많은 SEO가 권장 사항을 때로는 말 그대로 받아들여서 그 이유나 맥락을 제대로 이해하지 못한 채 클라이언트 개발자나 기술 팀에 이를 다시 제시하는 것을 보았습니다.

불행히도 이것은 종종 더 많은 질문으로 이어질 수 있습니다. 특히 도구가 내놓을 기회와 권장 사항에 대해 더 자세히 조사하지 않는 경우 더욱 그렇습니다.

예를 들어, LCP 요소의 로드 속도를 높이기 위해 '렌더링 차단 리소스 제거' 권장 사항에 대해 들어보았지만 쿠키 배너 스크립트와 같이 이 리소스가 첫 번째 페인트에서 중요한 위치에 있으면 어떻게 됩니까? 또는 영향을 받는 자산이 타사 리소스입니까? 개발자가 할 수 있는 일이 많지 않기 때문에 개발자는 이 문제를 바로 취소할 가능성이 높습니다. 따라서 PSI에서 가져온 모든 기술 권장 사항을 약간의 소금으로 취하고 다시 조사한 다음 다시 개발자.

PSI가 Lighthouse와 함께 세트 에뮬레이트 장치(Moto G4)를 사용한다는 사실을 아는 것도 유용하지만 '실험실' 테스트의 경우와 같이 실제 사용자가 가장 자주 사용하는 장치에 따라 문제가 상당히 다를 수 있습니다. Chrome UX 보고서에서 사이트의 실제 사용자에게 문제가 있음을 알고 있음에도 불구하고 PSI가 해당 특정 기기에서 문제 또는 테스트 기회를 반환하지 않는다는 의미일 수 있습니다.

따라서 장치 및 연결 구성을 적절하게 조정할 수 있는 다른 속도 테스트 도구와 함께 PSI를 사용하는 것이 좋습니다.

3. 대체 속도 감사 도구 탐색

PageSpeed ​​및 기타 Google 도구를 사용하는 것과 함께 WebPageTest(WPT) 또는 GTMetrix와 같은 다른 무료 및 프리미엄 속도 테스트 도구를 탐색하는 것이 좋습니다.

WebPageTest에는 페이지 수준에서 속도 테스트를 지원하는 다양한 유용한 기능과 구성 옵션이 있습니다. 고급 구성을 사용하면 브라우저 및 장치 유형, 테스트 위치와 같은 중요한 테스트 설정을 조정할 수 있습니다. 이를 통해 특히 사이트 사용자의 대부분이 있는 위치와 장치 유형을 알고 있는 경우 감사를 미세 조정할 수 있습니다. 즉, Google의 사전 설정된 시뮬레이션 장치에만 의존하지 않는다는 의미입니다.

여기에서 기본 3G Fast 연결에서 연결 설정을 조정할 수도 있고, 번거로운 스크립트에 대한 성능 향상을 테스트하려는 경우 특정 URL을 차단할 수도 있습니다. 우리가 탐색하기 위해 나열하지 않은 다른 구성 옵션이 많이 있지만 위의 옵션은 핵심 Web Vital을 감사할 때 가장 도움이 되는 옵션입니다.

테스트가 실행되면 핵심 성능 평가 탭으로 이동하여 필름 스트립, 비디오 타임라인, 폭포수 차트는 물론 이벤트를 트리거한 요소의 세분화된 분석을 포함한 각 메트릭에 대한 자세한 성능 분석을 얻습니다. 다양한 형식으로 내보낼 수 있으며 무엇보다도 무료입니다!

필름 스트립 보기는 페이지 로드의 어느 지점에서 특정 요소가 시각적으로 표시되는지 이해하는 데 특히 유용합니다. 이는 잠재적으로 더 빨리 로드할 수 있는 자산의 우선 순위를 지정하는 데 도움이 될 수 있습니다. 원인 요소를 정확히 찾아내는 데 도움이 되는 상당한 시각적 변화가 있는 경우 매우 명확하게 표시됩니다.

GTMetrix에는 WebPageTest와 유사한 기능이 있지만 WPT에서 무료로 제공되는 많은 고급 옵션은 유료 패키지에서만 사용할 수 있습니다.

4. 폭포 차트 알아보기

기본적으로 폭포형 차트는 파일 또는 자산이 요청된 시기, 다운로드하는 데 걸린 시간 및 페이지에 표시되는 시간에 대한 타임라인입니다.

폭포형 차트를 보면 오프셋이 다소 어려울 수 있습니다. 행, 막대 길이 및 색상이 서로 다른 의미를 갖고 있기 때문입니다. 하지만 미루지 마십시오! 폭포 차트에 대해 배우고 이해하는 데 시간을 할애하는 것은 기술 SEO가 속도 감사를 위해 갖추어야 할 가장 중요한 기술입니다.

Webvital 감사를 위해 WebPageTest를 사용하는 데 익숙하다면 폭포 차트가 가장 사용자 친화적이라는 것을 알 수 있습니다. WebPageTest는 연결 정보, 요청되는 리소스 유형 및 JS 실행과 같은 기타 이벤트를 나타내는 차트 위에 색상으로 구분된 키를 제공합니다. 또한 렌더링 차단 리소스를 시각적으로 표시하고 3xx 또는 4xx 응답이 있는 요청된 리소스를 강조 표시합니다.

유용한 팁: 폭포에 있는 가로 막대의 밝은 부분과 어두운 부분에 주의하세요. 밝은 부분은 브라우저에서 리소스를 요청했음을 나타내고 어두운 부분은 리소스가 다운로드되고 있음을 나타냅니다 .

전반적으로 이것은 사이트의 성능 문제를 더 깊이 이해하는 데 도움이 되며, 결과적으로 문제 해결을 위한 권장 사항을 보다 실행 가능하게 만듭니다. 더 자세히 알아보려면 폭포수 차트를 읽는 방법에 대한 Matt Hobbs의 심층 기사를 권장합니다.

웹사이트의 성능 문제 해결에 대한 전문가의 조언을 찾고 있다면 Semetrical이 어떻게 도움이 되는지 자세히 알아보려면 당사에 연락하거나 기술 SEO 서비스 페이지를 방문하십시오.