Google의 핵심 Web Vitals 및 트래픽 손실을 방지하기 위해 해야 할 일

지난 1년 동안 웹사이트 트래픽이 갑자기 감소했습니까? Google의 Core Web Vitals 업데이트가 범인일 가능성이 높습니다.

2021년 여름에 검색 엔진이 업데이트된 후 많은 웹사이트에서 해당 사이트로 유입되는 검색 트래픽이 급격히 감소했습니다. 그 이후로 한 번도 본 적이 없는 트래픽으로, 땀에 젖어 손바닥만 한 마케팅 관리자는 아이디어를 찾아 헤매고 있습니다.

익숙한 소리? 이것이 귀하의 경험을 설명하는 경우 또는 향후 CWV(Core Web Vitals) 업데이트로 인해 웹 트래픽이 불이익을 받지 않도록 보호하려는 경우 계속 읽으십시오.

이 기사는 인기 있는 웨비나 중 하나를 기반으로 합니다. 비디오 보기 및 슬라이드 다운로드:

Google의 Core Web Vitals 업데이트가 SEO 게임을 어떻게 변화시켰습니까?

SEO에 관해서는 제어할 수 없는 많은 것들이 있습니다. 당신은 구글을 ​​제어할 수 없습니다. 누가 귀하의 웹사이트를 방문하는지 또는 어떤 페이지로 이동하는지 제어할 수 없습니다.

그러나 웹 사이트의 아키텍처, 엔지니어링 및 속도를 제어할 수 있습니다.

핵심 웹 바이탈이란 무엇입니까?

CWV(Core Web Vitals)는 검색 엔진이 웹사이트 성능, 즉 속도와 응답성에 대해 중요하다고 생각하는 것을 측정하는 Google의 방법입니다. 세 가지 요소가 있습니다.

1. LCP(Large Contentful Paint) - 페이지를 로드하는 데 얼마나 걸립니까? 일반적으로 초 단위로 측정되며, 사이트가 예외적으로 느린 경우에는 수십 초 단위로 측정됩니다.
2. FID(First Input Delay) - 웹사이트가 사용자 클릭이나 상호작용에 반응하기까지 얼마나 걸립니까? 일반적으로 밀리초 단위로 측정됩니다.
3. CLS(누적 레이아웃 이동) - 로드할 때 사이트가 얼마나 변경됩니까? 일반적으로 초 단위로 측정됩니다.

Google은 이러한 요소를 두 가지 방식으로 측정합니다. 실험실 데이터 , 웹 페이지를 소프트웨어나 테스트 도구에 입력합니다(자세한 내용은 나중에 설명). 사이트의 실제 사용자 작업을 기반으로 하는 필드 데이터 .

Google은 모든 페이지에 대한 필드 데이터를 보유하거나 사용하지 않지만 트래픽 양에 따라 측정 대상을 결정합니다. 볼륨이 높을수록 실제 필드 데이터가 있을 가능성이 높아집니다. 또한 Google 은 사이트 전체에서 해당 데이터를 집계할 수 있습니다. 그 집계는 많은 악화를 일으킬 수 있습니다. 왜요? 3G 연결이 가능한 휴대폰이나 아직 광섬유가 없는 곳과 같이 연결성이 좋지 않은 사람들의 방문자가 많은 경우 해당 트래픽이 데이터를 왜곡할 수 있습니다. 따라서 다른 사용자에게는 문제가 없고 실험실 데이터에 고성능 사이트가 있는 것으로 나타나더라도 Google에 귀하의 사이트는 느리게 보일 수 있습니다.

CWV가 왜 중요한가요?

이것은 CWV 업데이트로 인해 3개월 만에 트래픽의 절반이 손실된 사이트의 예입니다. 아야. 이 데이터는 Google Search Console에서 가져온 것입니다(나중에 자세히 설명).

Google은 사용자가 느린 사이트를 좋아하지 않기 때문에 느린 사이트를 처벌합니다. Google이 CWV로 하려고 하는 것은 웹을 보다 사용자 중심적으로 만드는 것입니다. 이는 좋은 일입니다. 사용자 경험은 물건을 판매할 때 중요합니다. 로드 시간이 1초 추가될 때마다 전환율이 최대 5초까지 감소한 다음 4.42% 감소합니다. 간단히 말해서, 귀하의 사이트가 로드되는 데 6초가 걸리고 경쟁자의 사이트가 로드되는 데 1초가 걸린다면 귀하보다 더 나은 전환율을 보게 될 것입니다.

Core Web Vitals 업데이트는 SEO 게임과 관련하여 이러한 요소의 우선 순위를 지정했습니다. 계속 플레이하고 싶다면 규칙이 변경되었음을 인정해야 합니다. 그런 다음 적응하십시오.

사이트의 핵심 웹 바이탈을 측정하는 방법

문제를 보는 것이 문제를 해결하는 첫 번째 단계입니다. 불행히도 CWV를 측정하고 최적화하기 위한 모든 문제를 해결할 수 있는 단일 도구는 없습니다.

당신이 하려는 것은 웹사이트에서 무언가를 수정하는 것이 트래픽에 영향을 미치는지 테스트하는 것입니다. 맞습니까? 따라서 변경을 수행하고 실제 사용자 데이터가 한 두 달에 걸쳐 누적될 때까지 기다린 다음(실험실 데이터는 예측할 수 있는 정도만 가능) Google에서 알릴 때까지 기다립니다.

전체 그림을 보려면 다양한 관점에서 문제를 볼 필요가 있습니다. 즉, 여러 도구를 의미합니다. 많은 시행착오 끝에 다음과 같은 툴킷을 권장합니다.

1. 구글 서치 콘솔

Google Search Console ****은 사이트 전체의 CWV에 대한 실제 데이터를 원하는 경우 반드시 사용해야 하는 무료 도구입니다. 얼마나 많은 페이지가 좋은 점수를 받고 있습니까? 얼마나 많은 개선이 필요합니까? 얼마나 많은 점수가 좋지 않습니까? 녹색, 노란색, 빨간색. 이 수준에 대한 Google 자체 보고서를 얻을 수 있는 유일한 곳입니다.

'재검증'을 클릭하여 사이트를 공식적으로 검토하도록 Google에 요청할 수 있습니다. 그러면 Google에서 몇 주에 걸쳐 현장 데이터를 수집하거나 검토합니다. 최대 28일이 걸린다고 합니다.

네, 잘 들었습니다. 데이터를 새로 고치는 데 한 달이 걸립니다. 그것은 매우 느린 피드백 루프입니다.

2. 클릭시오

Clickio는 얻을 수 있는 Core Web Vitals의 실시간 데이터에 가장 가까운 것을 제공합니다. 사이트에 트래커를 설치해야 하므로 아이러니하게도 페이지 무게가 약간 추가되지만, 얻은 데이터에 따라 행동하는 한 충분히 가치가 있습니다.

Clickio는 시간이 지남에 따라 변경 사항에 대한 피드백을 제공합니다. 지난 달 특정 국가의 모바일 장치에 제공된 모든 웹사이트 페이지의 누적 레이아웃 변경은 무엇입니까? 이번 분기에 데스크톱 장치의 블로그 페이지에서 4초 이상의 가장 큰 콘텐츠가 포함된 페인트를 얻는 사용자 비율은 몇 퍼센트입니까? 필요한 정보를 얻기 위해 다양한 방법으로 데이터를 분할할 수 있습니다.

상태 경고: 도구는 Google 데이터에 대한 Clickio의 해석을 보여줍니다. Google이 보는 것을 보여주지 않습니다. 피드백을 받기 위해 몇 달을 기다릴 필요 없이 잠재적인 CWV 문제를 해결하기 위해 찾은 최고의 선행 지표이며 국가별 데이터와 같은 많은 세부 정보를 제공합니다. 그러나 실제 Google 데이터가 아닙니다. 그리고 실시간 데이터 이기 때문에 변경한 사항이 효과가 있었는지 확실하게 말할 수 있으려면 의미 있는 데이터가 충분히 축적될 때까지 시간이 필요합니다. 즉시 적용되는 것은 아니지만 새로 고칠 때까지 한 달을 기다릴 필요도 없습니다.

3. 구글 애널리틱스

Google 웹로그 분석은 몇 가지 대표적인 데이터 포인트를 가져와 시간이 지남에 따라 이를 기반으로 페이지 성능 통계를 알려주 므로 트래픽이 감소하거나 증가하는 위치를 확인할 수 있습니다. 방문자가 많지 않은 경우 이 데이터는 그다지 유용하지 않을 수 있지만 시간이 지남에 따라 이 정보를 추적하고 주의가 필요한 느린 페이지를 강조표시하는 좋은 방법입니다.

4. 구글 데이터 스튜디오

Google 데이터 스튜디오는 각 핵심 핵심 성능에 대한 사이트 전체의 성능 비율을 보여줍니다. 기본적으로 시간 경과에 따른 변화의 역사입니다. 이상적으로는 개선.

실시간이라면 정말 굉장합니다. 지난 28일을 롤링 기준으로 볼 수 있다면 작업이 완료되고 하는 일이 효과가 있다는 것을 알게 될 것입니다. 불행히도 Google은 다음 달 중순에 이 월간을 후불로 업데이트합니다. 이는 Google Search Console보다 훨씬 느린 피드백 루프입니다. 따라서 소급 데이터의 스냅샷입니다. 진행 상황을 모니터링하는 데 유용하지만 느립니다.

5. Web.dev - 등대

Google 소유 사이트인 Web.dev는 Lighthouse라는 오픈 소스 도구를 제공합니다. 이 도구는 개별 페이지에 대한 실험 데이터를 제공합니다. URL을 입력하면 성능 접근성, 모범 사례, SEO 점수 등을 알려줍니다. 앱에서 '트리맵 보기'를 클릭하면 더 많은 데이터를 볼 수 있습니다.

브라우저, 시간, 캐싱 또는 기타 '인터넷 날씨'에 따라 데이터가 약간 변경될 수 있다는 점에서 데이터에 약간의 변동성이 있습니다. 그러나 여전히 꽤 좋습니다.

6. Web.dev - PageSpeed ​​Insights

Google PageSpeed ​​Insights는 페이지 수준 필드 데이터를 얻을 수 있는 곳입니다. 다시, URL을 입력하면 LCP, CLS, FID 등에 대한 필드 데이터가 제공됩니다. 그러나 적절한 필드 데이터를 얻으려면 페이지에 대한 특정 양의 트래픽이 필요합니다.

7. 지티메트릭스

GTmetrix 는 웹 페이지를 분해하고 각 파일의 크기, 로드되는 항목의 수, 구성 방법 등을 알려줍니다 . 이것은 개발자가 페이지를 QA하고 로드 시간을 늦추는 거대한 이미지 파일이나 부풀려진 위젯을 추가하지 않았는지 확인하는 훌륭한 도구입니다.

이 도구와 web.dev 도구를 함께 사용하여 페이지별로 어떤 변경 사항이 적용되었는지 측정하는 것이 좋습니다.

8. 디버그베어

DebugBear는 Core Web Vitals 및 기타 몇 가지 측정항목에 대한 페이지 및 보고서 목록을 가져옵니다. 진단 도구가 아닌 상태 모니터링 도구 로 유용합니다. 이를 사용하여 20개 정도의 '탄광의 카나리아' 페이지를 모니터링할 수 있습니다. 따라서 어떤 활동이 웹사이트에 무게를 더한다면 여기에서 볼 수 있습니다.

Core Web Vitals를 개선하기 위해 웹사이트를 최적화하는 방법

이제 Core Web Vitals를 개선하기 위해 할 수 있는 활동에 대해 이야기해 보겠습니다. 위의 도구에서 문제가 있는 위치에 대한 많은 정보를 얻을 수 있으므로 이는 우리가 우리 자신과 고객을 위해 수행한 작업 중 일부일 뿐이며 영향을 미쳤다고 알고 있습니다.

1. 웹사이트 재호스팅

이것은 사이트를 재건하거나 재설계하는 것이 아닙니다. 다른 곳으로 옮기는 것뿐입니다. 일반적으로 WordPress에서 HubSpot으로 이전하는 사이트의 성능이 약 30% 향상 되었습니다.

WordPress를 고수한다면 실제로 성능에 대해 알고 있는 WP Engine과 같은 전용 호스팅 회사로 사이트를 옮기면 정말 큰 차이를 만들 수 있습니다.

HubSpot(또는 WP Engine)에서 사이트를 다시 호스팅하면 다음과 같은 이점이 있습니다.

• 캐싱 - 첫 번째 방문 후 사이트를 더 빠르게 로드합니다. 일반 WordPress 사이트에는 캐싱 플러그인이 필요하지만 HubSpot에는 캐싱 플러그인이 내장되어 있습니다.
• CDN(콘텐츠 전송 네트워크)(예: Akamai) - 웹사이트가 다른 곳에서 호스팅되는 경우에도 로컬 서버에서 사용자에게 파일을 전송합니다.
• CloudFlare DNS - 기본적으로 이것은 도메인 이름 서버 측의 속도를 높이는 데 도움이 됩니다.

2. HubSpot의 소셜 공유 코드 끄기

이미 HubSpot에 있는 경우 가장 빠른 승리는 블로그에서 HubSpot의 소셜 공유 코드를 끄는 것입니다. HubSpot은 이러한 버튼을 기본적으로 켜져 있는 상태로 유지합니다. 이렇게 하면 블로그의 모든 페이지에서 약 450KB의 JavaScript 코드 가 삭제됩니다.

GTmetrix 및 web.dev에서 페이지 속도 및 로딩 시간의 전후 스냅샷을 수행하십시오. 정말 만족스럽습니다.

3. 이미지 압축

웹사이트를 처음 시작할 때 개발자는 대용량 이미지 사용을 피했을 것입니다. 우리는 희망한다. 그리고 우리는 그들이 일반적인 원칙처럼 이미지에 대해 지연 로딩을 사용하기를 바랍니다.

그러나 나중에 선의의 마케터가 블로그와 페이지에 갑자기 추천 이미지를 추가할 것입니다. 밤. 점보 제트기의 측면을 우아하게 할 수 있는 40MB 이미지 파일로 인해 사이트 속도가 느려집니다.

이미지를 250KB 미만, 이상적으로는 100KB 미만으로 압축합니다. 이미지를 jpg로 변환하거나 가능하면 svgs를 사용하십시오. 로고, 특히 바닥글의 로고는 사이트의 모든 페이지에 있으므로 특히 주의하십시오.

다시 말하지만, HubSpot이 있는 경우 Articulate는 Fizz+Ginger라는 도구를 만들어 HubSpot의 블로그 게시물 및 웹 사이트 페이지에서 이미지를 압축합니다.

4. 포함을 피하십시오

이것은 내장된 프레젠테이션, 내장된 YouTube 비디오, 팝업, 이미지 및 일부 라이브 소셜 미디어가 있는 당사 사이트 페이지의 스크린샷입니다. 이 모든 것이 6MB에 달하는 그냥… 가능한 한 많이 제거하면 페이지 로드가 훨씬 빨라졌습니다. 예를 들어 포함된 비디오를 연결된 미리보기 이미지로 대체했습니다.

5. 마케팅 도구 간소화

마케팅 도구는 페이지 무게를 추가합니다. 페이지 사용을 모니터링하거나 클릭 유도문안을 추적하는 Hot Jar 또는 Lucky Orange 또는 Google 태그 관리자와 같은 도구는 이러한 도구를 사이트에 두는 것이 유용하지만 비용이 듭니다. 비용은 성능입니다. 따라서 신중하고 신중하게 사용해야 합니다.

6. AMP 켜기

가속 모바일 페이지 또는 AMP라는 Google 표준이 있습니다. AMP를 사용하면 매우 빠른 로드 시간을 얻을 수 있습니다. 사용자가 Google 브라우저에서 검색 결과를 클릭하면 Google 서버에서 페이지의 AMP 버전을 제공합니다.

그러나 그 과정에서 누가 해당 페이지를 제공하고 어떻게 생겼는지에 대한 통제력을 잃게 됩니다. 그들은 스타일링 측면에서 최소한으로 그것을 다시 벗겨냅니다. 트레이드 오프입니다.

7. 코드 최적화

이것은 웹사이트 최적화의 길고 힘든 슬로건입니다. 이것을 플러그 앤 플레이할 수는 없습니다. 코드를 최적화해야 합니다. 이를 위해서는 다음과 같은 것을 구현할 전문 개발자로 구성된 양질의 팀이 있어야 합니다.

• 자바스크립트와 CSS 최소화
• 자바스크립트 로딩 지연
• 기본적으로 지연 로딩
• 자체 AMP화(예: 모바일에서 블로그 추천 이미지를 표시하지 않음)
• 개발 파이프라인 내의 좋은 코딩 방법
• 플러그인 및 외부 코드 사용 최소화

사용자 경험은 미래의 웹사이트 지표입니다.

향후 몇 년 동안 핵심 성능 평가는 그 중요성이 더욱 커질 것입니다. 기업은 다음 대규모 업데이트에서 불이익을 받지 않도록 지금 성능과 사용자 경험에 맞게 웹사이트를 조정해야 합니다.

물론, 원하는 곳을 찾는 데 도움이 되도록 SEO 및 웹사이트 개발 서비스를 제공하게 되어 기쁩니다. Core Web Vitals에 대해 많은 것을 배웠고 이 지식을 프로세스에 포함하여 사이트를 고도로 최적화되고 경량화했습니다.

사용자가 원하는 사이트를 얻으려면 당사에 문의하십시오.