Google 페이지 경험: 순위 업데이트

이 기사는 2020년 5월에 처음 게시되었으며 2021년 4월에 업데이트되었습니다.

Google의 연구와 업계 연구에 따르면 사용자는 뛰어난 페이지 경험을 제공하는 웹사이트를 선호합니다. Google은 페이지 로드 속도 및 모바일 친화성과 같은 순위 결과에서 고려해야 할 요소를 항상 검토하고 있습니다. 예정된 페이지 환경 업데이트는 사용자를 전면 및 중심에 두는 여러 요소를 고려합니다. 이러한 '핵심 웹 바이탈'은 Google이 검색자에게 최상의 콘텐츠를 제공하는 데 도움이 됩니다.

페이지 경험 및 핵심 Web Vitals

Core Web Vitals는 웹 사이트 소유자가 로드 시간, 상호 작용성, 로드되는 콘텐츠의 안정성과 같은 사용자 경험 차원을 측정하는 데 도움이 되는 메트릭 세트입니다. Google은 이제 이러한 페이지 경험 측정항목을 통합할 예정된 검색 순위 변경에 대한 세부정보를 제공했습니다.

Google에서 '핵심 웹 바이탈을 페이지 경험에 대한 기존 신호와 결합하여 웹 페이지에서 사용자 경험의 품질에 대한 전체적인 그림을 제공한다'는 새로운 신호가 도입되고 있습니다.

이러한 변경 사항은 2021년 6월에 적용됩니다.

또한 사용자 기대치가 높아지고 Google이 더 많은 측면을 측정할 수 있는 능력이 향상됨에 따라 추가 페이지 경험 신호가 매년 통합될 것입니다.

페이지 경험 순위

그래서 이것 뒤에 아이디어는 무엇입니까? 기본적으로 좋은 경험은 사람들이 원하는 것을 달성할 수 있게 하고 나쁜 경험은 원하는 정보를 찾는 데 방해가 될 수 있습니다. Google은 정보를 검색하는 사람들이 찾는 곳으로 남아 있기를 원하므로 최고의 검색 경험을 제공해야 합니다.

다른 모든 신호와 함께 페이지 경험을 추가함으로써 웹사이트를 사용하는 사람들이 원하는 것을 더 쉽게 찾을 수 있도록 하는 것이 목표입니다.

최상위 페이지 측정항목

페이지 경험의 세 가지 주요 구성 요소는 다음과 같습니다.

• 페이지가 얼마나 빨리 로드됩니까?
• 페이지가 사용자에게 얼마나 빨리 반응합니까?
• 페이지가 얼마나 안정적입니까(로드될 때 요소가 이동함)?

이제 최상위 메트릭 중 일부를 실행하여 그 의미를 디코딩할 수 있습니다. (처음 3개는 '코어 웹 바이탈'이라고 하는 것입니다.)

핵심 웹 바이탈

• 가장 큰 콘텐츠가 포함된 페인트(LCP) - 이 메트릭은 가장 큰 이미지 또는 텍스트 블록을 찾습니다. 해당 항목을 뷰포트에 로드하는 데 걸리는 시간을 측정합니다. 이것은 영웅 이미지 또는 텍스트의 큰 부분일 수 있습니다. (이상적으로는 2.5초 이하여야 합니다.)

• CLS(누적 레이아웃 이동) - 이 메트릭은 시각적 안정성을 측정합니다. 즉, 페이지가 로드될 때 콘텐츠가 얼마나 이동하여 콘텐츠를 읽거나 보기 어렵게 만드는지를 측정합니다. (이 값이 0.1보다 작거나 같기를 원합니다.)

• 첫 번째 입력 지연(FID) - 페이지가 사용자에게 얼마나 빨리 응답하는지 나타냅니다(예: 버튼 클릭 후). 이 경우에는 100ms 이하가 이상적입니다.

다음 측정항목은 페이지의 효율성을 측정하는 데 유용합니다.

• FCP(First Contentful Paint) - 이 측정항목은 스크롤 없이 볼 수 있는 부분의 텍스트가 로드되는 데 걸리는 시간을 측정합니다. 스크롤하지 않고도 볼 수 있는 콘텐츠입니다. 너무 많은 글꼴과 큰 글꼴 파일은 이 점수에 영향을 미칩니다. 외부 리소스에서 글꼴을 로드하는 속도가 느려집니다.

• 속도 지수(SI) - 이 측정항목은 스크롤 없이 볼 수 있는 부분에서 시각적 변화가 멈출 때 기록합니다. 즉, 동영상과 영웅 이미지는 모두 속도 지수 점수에 영향을 미칩니다.

• TTI(Time to Interactive) - 이 측정항목은 페이지가 사용자 입력을 위해 준비되는 데 걸리는 시간을 측정합니다. 앱을 늦게 로드하고 추적 또는 분석 스크립트가 이 측정항목에 영향을 미칩니다.

• 총 차단 시간(TBT) - 이 측정항목은 TTI와 유사하지만 페이지의 총 차단 시간을 측정합니다. 이는 사용자가 요소를 클릭하거나 페이지를 스크롤할 수 없음을 나타냅니다.

이러한 핵심 웹 바이탈이 귀하의 사이트를 평가하는 유일한 방법은 결코 아님을 기억하는 것이 중요합니다. Google은 페이지를 평가할 때 많은 요소를 고려합니다. 여기서 강조점은 확실히 사용자 경험이지만 Google은 훌륭한 콘텐츠를 갖는 것이 여전히 더 중요한 고려 사항일 것이라고 말했습니다. 페이지 경험이 최고 중 최고가 아니더라도 전체 정보가 가장 우수한 페이지의 순위를 매길 것입니다.

Google은 각 요소의 가중치가 얼마인지 밝히지 않았지만 '좋은 페이지 경험이 훌륭하고 관련성 높은 콘텐츠를 갖는 것보다 우선하지 않습니다'라는 점을 확인했습니다. 그러나 다른 모든 요소가 동일하다면 페이지 경험이 가시성을 결정하는 요소가 될 수 있습니다.

검색 콘솔 업데이트

Google은 이러한 새로운 '페이지 경험' 측정항목에 대해 사이트가 수행되는 방식을 보고하는 '핵심 Web Vitals'라는 새 섹션을 Search Console에 추가했습니다. 이 보고서는 개선해야 할 부분과 이러한 개선 사항을 구현하는 방법을 알려줍니다.

Google은 웹사이트 소유자가 자신의 실적을 더 잘 측정하고 방문자의 페이지 경험을 개선할 수 있도록 Lighthouse 및 PageSpeed ​​Insights와 같은 도구를 업데이트했습니다. 웹사이트 속도 감사에 대한 우리의 기사는 사용할 수 있는 다양한 도구에 대한 좋은 개요와 사이트 평가 측면에서의 이점 및 제한 사항을 제공합니다.

핵심 Web Vital을 준비하는 방법(Shopify 스토어에 모두 해당되지 않음)

1 가장 큰 함량이 있는 페인트(LCP)

잠재적인 문제: 느린 서버 응답 시간

솔루션

a) 캐시 자산 - HTML이 정적인 경우 캐시하면 필요하지 않을 때 재생성되는 것을 방지하여 리소스 사용량을 줄일 수 있습니다.

b) 사용자를 CDN으로 라우팅 - 콘텐츠 전송 네트워크는 전 세계 여러 위치에 있는 서버를 사용하므로 단일 서버에서 멀리 떨어져 있어 사용자가 사이트 속도가 느려지는 문제를 제거합니다.

잠재적인 문제: 느린 리소스 로드 시간

솔루션

a) tinypng를 사용하여 이미지를 최적화하고 압축합니다. 품질을 저하시키지 않으면서 파일 크기를 줄이므로 더 빠르게 로드되지만 여전히 좋아 보입니다.

b) 이미지 CDN 사용 - 이미지 페이로드를 줄이고 이를 요청하는 각 장치에 맞게 조정된 이미지를 전달하며 네트워크 에지에서 이미지를 보냅니다.

잠재적인 문제: 클라이언트 측 렌더링

솔루션

a) JavaScript를 최소화하고 사용하지 않는 JavaScript 연기

b) 가능한 경우 서버 측 렌더링을 활용합니다.

잠재적인 문제: JavaScript 및 CSS

솔루션

a) CSS 축소 - CSS 파일에는 읽기 쉽게 하기 위한 문자가 포함되어 있지만 브라우저에서는 필요하지 않습니다. 축소하면 페이지를 렌더링하는 데 필요한 시간이 향상되므로 제거하고 지워집니다.

b) 사용자에게 필요한 최소한의 JavaScript를 다운로드하여 제공합니다. 차단 JavaScript의 양을 줄이면 렌더링 속도가 빨라지고 따라서 LCP가 향상됩니다.

2 누적 레이아웃 이동(CLS)

잠재적인 문제: 예기치 않은 레이아웃 변경

솔루션

a) 비디오 및 이미지와 같은 자산에 크기 속성을 포함하여 브라우저가 개체가 로드되기 전에 개체에 적절한 양의 공간을 할당하도록 합니다.

b) 동적으로 삽입된 콘텐츠가 기존 콘텐츠 아래에만 삽입되어 예기치 않은 레이아웃 이동이 발생하지 않도록 합니다.

3 첫 번째 입력 지연(FID)

잠재적인 문제: 브라우저가 사용자에게 빠르게 응답하지 않음(아마도 여전히 JavaScript를 실행 중이기 때문에)

솔루션

a) 장기 실행 코드를 더 작은 작업으로 나눕니다. 긴 작업은 작업을 처리하는 동안 페이지를 응답하지 않는 상태로 둡니다. 이를 보다 관리하기 쉬운 청크로 분할하면 입력 지연을 줄이는 데 도움이 될 수 있습니다.

b) 사용하지 않는 JS를 연기하여 JavaScript 실행 시간을 더 줄입니다. 브라우저에서 페이지를 렌더링하는 데 코드가 필요하지 않은 경우 이를 연기하십시오. 이는 페이지가 사용자 상호작용을 위해 더 빨리 준비되었음을 의미합니다.

SEO, 콘텐츠 또는 웹사이트가 최신 가이드라인을 준수하고 있는지 확인하는 데 지원이 필요한 경우 연락하면 Shopify 디자인, 개발 및 SEO 전문가가 도움을 드릴 수 있는 방법에 대해 기꺼이 이야기할 것입니다.