웹사이트 속도에 대한 중요한 SEO 요소로서 핵심 Web Vitals 평가
게시 됨: 2020-10-13지금쯤이면 웹사이트 성능을 업그레이드하기 위한 다양한 기술적 SEO 팁과 요령을 이미 알고 있을 것입니다. 반면에 검색 엔진은 최신 SEO 트렌드를 따라잡고 경쟁에서 앞서기 위해 전략을 수정하도록 요구하는 새로운 메트릭을 지속적으로 제공하고 있습니다. 핵심 웹 바이탈 및 페이지 경험이 이 목록에 새로 추가되었습니다. 오늘은 이에 대해 간단히 살펴보겠습니다.
문제에 대한 간략한 소개
이제 Core Web Vitals로 이름이 변경된 Google Search Console의 속도 보고서는 두 가지 새로운 성능 측정항목을 제공합니다.
1. 누적 레이아웃 이동
2. 첫 번째 입력 지연에 추가로 가장 큰 콘텐츠가 포함된 페인트
Core Web Vitals는 Page Speed Insight 또는 Lighthouse와 같은 다양한 도구에 배포되었습니다.
Google은 다가오는 주요 변경 사항에 대해 발표했습니다. 2021년 순위 요소로 새로운 페이지 경험 신호를 발표할 예정입니다. 이는 주로 핵심 성능 평가에 중점을 둘 것입니다.
지금쯤이면 오늘 토론의 동기를 이해했을 것입니까? 좋습니다. 이제 더 깊이 파헤쳐 보겠습니다.
웹사이트 속도 및 UX에 중점을 둔 Google – 페이지 경험
Google은 다음과 같은 방식으로 페이지 경험을 설명합니다.
"페이지 경험은 순수한 정보 가치 이상으로 웹 페이지와 상호 작용하는 경험을 사용자가 어떻게 인식하는지 측정하는 신호 집합입니다."
따라서 페이지 경험은 Google이 사용자 경험에 중요하다고 생각하는 여러 요소의 조합으로 간주될 수 있습니다. 요인은 다음과 같습니다.
- HTTPS
- 너무 많은 팝업 부족
- 모바일 친화성
- 보안 검색
이제 이것들은 이미 중요한 검색 신호로 문서화되었습니다. 따라서 이제 주요 초점은 Core Web Vitals의 도입에 있습니다.
SEO 순위가 걱정되십니까? 스트레스 받지 마세요. Google Webmaster Central 블로그는 변경 사항이 2021년 이전에 구현되지 않을 것이며 Google은 신호를 배포하기 최소 6개월 전에 통지할 것이라고 유지합니다. 따라서 좋은 소식은 웹사이트가 아직 가이드라인을 준수하지 않더라도 페이지를 최적화할 시간이 있다는 것입니다.
다음 구절을 통해 모든 것을 배우고 구현을 시작하십시오.
핵심 Web Vitals에 대한 개요
이 섹션에서는 Core Web Vitals의 모든 구성 요소를 언급하고 지표를 개선하기 위한 몇 가지 효과적인 팁을 제공합니다. 하지만 먼저 핵심 웹 바이탈이 실제로 무엇인지 분석해 보겠습니다.
핵심 Web Vital은 Google이 웹페이지의 전반적인 사용자 경험에서 매우 중요하다고 생각하는 몇 가지 특정 요소입니다. 요컨대, 이는 전체 페이지 경험 점수에 추가되는 요소의 하위 집합입니다.
Core Web Vitals의 메트릭은 Largest Contentful Paint 또는 LCP(사이트 로딩 성능을 위해 실시간 사용자 경험을 측정함), First Input Delay 또는 FID(사이트 상호 작용을 위해 UX를 측정함) 및 누적 레이아웃 이동 또는 CLS(UX를 측정함)입니다. 페이지의 시각적 안정성을 위해).
더 이상 고민하지 않고 이 세 가지 핵심 Web Vital 지표를 분석하고 이를 개선하기 위한 몇 가지 효과적인 전략에 대해 논의해 보겠습니다.
- LCP 또는 최대 함량 페인트
가장 큰 콘텐츠가 포함된 페인트는 뷰포트에 표시되는 가장 큰 콘텐츠 요소의 렌더링 시간을 측정합니다. 간단히 말해서 링크를 클릭한 후 대부분의 콘텐츠가 화면에 표시되는 데 걸리는 시간입니다. LCP는 다른 페이지 속도 측정항목과 다릅니다. 예를 들어 First Contextual Paint 및 TTFB(Time to First Byte)와 같은 메트릭은 실제로 사용자가 웹 페이지를 여는 것이 어떤 것인지를 반영하지 않습니다. LCP는 웹 페이지를 보고 상호 작용하는 페이지 속도와 관련하여 정말 중요한 것에 중점을 둡니다.
그건 그렇고, 당신의 LCP 점수는 무엇입니까? PageSpeed Insights에서 찾으십시오.
Google의 LCP 가이드라인에 따르면 웹사이트 성능은 좋음(최대 2.5초), 개선 필요(최대 4초), 나쁨(4초 초과)의 세 가지 범주로 나눌 수 있습니다.
다음은 LCP 점수를 향상시키는 몇 가지 방법입니다.
#CSS 최소화 – CSS 파일에는 들여쓰기, 공백 및 주석과 같은 문자가 포함될 수 있습니다. 이러한 문자는 브라우저에 필요하지 않습니다. 차단 CSS의 양을 줄이면 궁극적으로 페이지(LCP)의 주요 콘텐츠를 렌더링하는 데 걸리는 시간이 향상됩니다.
#Remove Large Page Elements – 페이지에 LCP 속도를 늦추는 요소가 있는지 알아보려면 Google PageSpeed Insights를 주시하세요.
#Upgrade Web Host – 더 나은 호스팅은 전반적인 로딩 시간을 향상시킵니다.
#지연 로딩 활용 – 지연 로딩은 사용자가 페이지를 아래로 스크롤할 때까지 페이지 요소의 로딩을 억제합니다. 이렇게 하면 더 빠른 LCP를 달성하는 데 도움이 됩니다.
힘든 일? 우리는 동의한다. 그만한 가치가 있습니까? 물론 웹 페이지가 3초 이내에 로드되지 않으면 웹 트래픽의 40%가 반송됩니다(출처: Hobo-web)!
다음은 페이지 로딩 속도를 최적화하기 위한 몇 가지 추가 팁입니다.
- FID 또는 첫 번째 입력 지연
따라서 웹 페이지 LCP를 크게 개선했지만 사용자가 페이지와 원활하게 상호 작용할 수 있기를 바랍니다. FID는 사용자가 페이지와 상호 작용하는 데 걸리는 시간을 측정합니다.
FID 또는 First Input Delay는 사용자가 처음으로 페이지와 상호 작용할 때 경험하는 지연, 예를 들어 요소를 클릭할 때 웹 페이지에서 피드백을 받는 지연입니다.
다음은 더 나은 이해를 위한 몇 가지 상호 작용의 예입니다.
- 웹사이트 탐색에서 링크 클릭
- 모바일 장치에서 아코디언 텍스트 열기
- 필드에 이메일 입력
- 메뉴에서 옵션 선택
LCP와 마찬가지로 여기에서도 Google에는 허용되는 FID를 구성하는 특정 범위가 있습니다. Fid 최대 100ms – 양호, 최대 300ms – 개선 필요, 최대 500ms – 나쁨.
이제 완전한 콘텐츠 기반 웹 페이지(예: 블로그 게시물 또는 뉴스 기사)의 경우 FID는 유일한 사용자 상호 작용이 페이지를 확대 및 축소하거나 아래로 스크롤하는 것이기 때문에 그다지 큰 문제가 아닐 수 있습니다. 그러나 사용자가 무언가를 빠르게 클릭해야 하는 로그인, 가입 또는 문의 양식 작성이 있는 페이지 - FID는 큰 요소입니다.
다음은 사이트의 FID 점수를 개선하기 위해 수행할 몇 가지 작업입니다.
#JavaScript 지연 또는 최소화 – 브라우저가 JS를 로드하는 동안 사용자는 페이지와 상호 작용할 수 없습니다. 따라서 JS를 연기하거나 페이지에서 최소화하는 것이 향상된 FID의 핵심입니다.
#Use Browser Cache – 캐시를 사용하면 페이지 콘텐츠를 빠르게 로드할 수 있습니다. 이를 활용하면 사용자가 페이지와 빠르게 상호 작용할 수 있습니다.
# 중요하지 않은 타사 스크립트 제거 – LCP와 마찬가지로 히트맵, Google Analytics 등과 같은 타사 스크립트는 FID에 부정적인 영향을 미칩니다.
- CLS 또는 누적 레이아웃 이동
누적 레이아웃 이동은 페이지의 전체 수명(사용자가 페이지와 상호 작용을 시작한 후 포함) 동안 발생하는 모든 개별 레이아웃 이동의 합계를 측정합니다. 또한 이동 거리와 해당 영역의 크기를 고려합니다.
더 간단한 용어로 설명하겠습니다. 페이지가 로드될 때 페이지의 요소가 이리저리 움직이면 CLS가 높고 성능이 좋지 않습니다. 페이지 요소는 로드될 때 상당히 안정적이어야 합니다. 이렇게 하면 페이지가 완전히 로드된 후 사용자가 이미지, 필드 또는 링크가 있는 위치를 다시 배우거나 실수로 무언가를 클릭할 필요가 없습니다. 구글에 따르면 웹페이지 CLS는 0.1까지는 양호, 0.2까지는 개선이 필요하고, 0.3까지는 나쁨을 의미한다.
웹 페이지 CLS를 확인하는 경우 모바일 장치에서도 확인하십시오.
다음은 CLS를 개선하는 몇 가지 방법입니다.
#폴더 아래에 새 UI 요소 추가 – 이렇게 하면 페이지가 로드될 때 사용자가 볼 것으로 기대하는 콘텐츠가 푸시다운되지 않습니다.
# 광고 공간 확보 – 그렇지 않으면 광고가 갑자기 웹 페이지에 나타나 콘텐츠를 아래로 밀어낼 수 있습니다.
# 미디어에 크기 속성 차원 설정 사용 – 이것은 사용자의 브라우저가 비디오, 이미지, 인포그래픽 또는 GIF와 같은 미디어가 차지하는 공간을 파악하는 데 도움이 되며 페이지가 완전히 로드되면 변경되지 않습니다.
속도 업데이트 대 페이지 경험 – 실제로 변경된 사항
Google은 처음으로 페이지 경험 지표를 통해 페이지 속도만 홍보하는 것이 아니라 전체 성능을 순위 신호로 발표하고 있습니다. 또한 각각에 대한 세부 목표와 함께 정확한 메트릭(LCP, FID 및 CLS)을 정의하고 있습니다. 따라서 전반적인 UX가 좋을수록 더 나은 페이지 경험 점수를 얻을 수 있습니다.
마지막 단어
그렇다면 훌륭한 페이지 경험 점수가 마술처럼 Google에서 1위를 차지한다는 의미입니까? 가장 짧은 대답은 "아니오"입니다. Google 자체는 페이지 경험이 사이트 순위를 높이는 데 기여하는 여러 요소 중 하나라고 언급했습니다. SEO에는 빠른 수정이 없습니다. 살펴보실 수 있습니다. 최고의 SEO 대행사 전문가에 따르면 올바른 전략, 최대한의 노력, 인내심을 구현하는 것이 게임에서 승리하는 방법입니다!