Core Web Vitals: 정의, LCP 소개, FID 및 CLS, Core Web Vitals 최적화 팁

2021년은 여러모로 의미가 남다르다. 검색 엔진은 그 어느 때보다 발전하고 경쟁력이 높아졌습니다. Google은 검색 엔진에서 웹사이트 순위를 매기는 새로운 판도를 바꾸는 지표를 출시할 계획입니다. 우수한 UX와 페이지 경험은 중요한 순위 요소가 될 것입니다. 이 모든 것은 Google이 새로 도입하고 곧 출시할 핵심 웹 바이탈 덕분입니다.

올해 말 Google의 핵심 웹 바이탈이 출시될 것으로 예상됨에 따라 기업이 이 순위 요소에 따라 웹사이트를 따라잡고 최적화하는 것이 점점 더 중요해졌습니다.

핵심 Web Vital이 무엇인지, 구성 요소가 무엇인지, 웹사이트의 핵심 Web Vital을 최적화하기 위해 무엇을 할 수 있는지 모르는 경우 계속 읽으십시오. 이 블로그는 당신을 위한 것입니다.

이 블로그에서는 핵심 web vitals의 AZ를 다루고 이에 맞게 웹페이지를 최적화하는 데 도움을 드립니다. 의 시작하자.

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

이미지 출처: web.dev

핵심 웹 바이탈 은 순위 신호 또는 Google이 웹사이트의 전반적인 사용자 경험을 평가하는 데 사용하는 일련의 기준 및 측정항목입니다. Google 핵심 웹 바이탈은 웹사이트의 속도, 응답성, 시각적 안정성을 기존 사용자 경험 신호와 함께 평가하여 전반적인 페이지 경험과 사용자 친화성을 평가합니다.

Google은 페이지에서 제공하는 전반적인 경험을 조사하는 방식을 개선하기 위해 이 새로운 순위 신호를 시작할 계획입니다. 이 데이터의 정점은 SERPS에서 귀하의 웹사이트 순위를 매기기 위해 이 검색 엔진에 의해 취해질 것입니다.

웹사이트의 순위가 높을수록 가시성이 높아집니다. 페이지 경험은 중요한 순위 요소가 되므로 주의를 기울일 수밖에 없습니다. 웹사이트의 핵심 성능 향상 데이터를 확인하려면 Google Search Console 계정의 "개선 사항" 섹션을 찾으세요.

Core Web Vitals가 왜 중요한가요?

핵심 성능 평가는 Google의 "페이지 경험" 점수의 일부인 순위 신호입니다. Google이 페이지 경험을 Google에서 공식 순위 요소로 만들고 있기 때문에 중요합니다.
이미지 출처: backlinko.com

다음은 핵심 Web Vital이 중요한 몇 가지 이유와 중요해야 하는 이유입니다.

• Google의 순위 평가에서 이 새로운 변화를 조기에 최대한 활용할 수 있는 향후 웹사이트에 대한 엄청난 순위 기회입니다.
• 비슷한 콘텐츠 품질과 웹사이트 순위를 가진 두 웹사이트 간의 전쟁에서 페이지 경험은 모든 차이를 만들 수 있습니다.
• 핵심 웹 바이탈은 이제 더 중요해지고 있습니다. 왜냐하면 Google SERP에서 타의 추종을 불허하는 순위를 누렸던 웹사이트가 이제 새로운 페이지 경험 표준을 충족하지 못하면 동등하게 경쟁적인 웹사이트에 현재 순위를 잃을 위험이 있기 때문입니다.

모든 것을 고려할 때 페이지 경험 점수는 Google에서 웹사이트 순위를 매기는 데 사용하는 약 200가지 순위 요소 중 하나일 뿐이라는 점을 기억하는 것이 중요합니다.

앞서나가고 다른 사람보다 경쟁적인 순위 우위를 누리려면 기존 온페이지 및 오프페이지 SEO 전략을 계속 최적화하는 동시에 웹사이트의 핵심 웹 바이탈을 최적화해야 합니다. 하룻밤 사이에 순위가 떨어지지는 않지만 웹 핵심 핵심 기능을 미리 최적화하면 순위 기회를 확실히 높일 수 있습니다.

핵심 Web Vitals의 세 가지 신호:

이미지 출처: web.dev

핵심 웹 바이탈 평가에서 Google이 고려하는 상위 3개 페이지 속도 및 사용자 상호작용 측정은 다음과 같습니다.

• 최대 함량 페인트(LCP)
• 첫 번째 입력 지연(FID)
• 누적 레이아웃 시프트(CLS)

신호 1: 가장 큰 LCP(Contentful Paint): 로드 성능 확인

LCP는 Google이 페이지 경험 점수를 계산하는 데 사용하는 첫 번째 핵심 웹 필수 측정항목입니다. 웹 페이지의 로딩 성능을 측정합니다.

가장 큰 콘텐츠가 포함된 페인트 또는 LCP는 실제 사용자의 관점에서 웹사이트의 페이지가 로드되는 데 걸리는 시간으로 정의할 수 있습니다. 간단히 말해서 사용자가 링크를 클릭한 후 화면에서 대부분의 웹사이트 콘텐츠를 보는 데 걸리는 시간을 LCP라고 합니다.

LCP는 페이지 속도 측면에서 진정으로 중요한 것, 즉 사용자가 방해 없이 페이지를 보고 상호작용할 수 있는 능력에 중점을 둡니다.

LCP 점수를 확인하려면 Google의 Page Speed ​​Insights를 사용하십시오. 다음 작업만 하면 됩니다.

• Google의 Page Speed ​​Insights 도구를 방문하십시오.
• 검색창에 웹사이트를 입력하세요.
• 분석을 클릭합니다.

'분석'을 클릭하면 Google에서 현재 페이지에 대한 종합적인 보고서를 표시합니다. 이를 통해 웹사이트의 격차에 대해 알아보세요. 결과는 또한 크롬 브라우저 데이터를 기반으로 한 실제 세계에서 웹 페이지의 성능에 대한 통찰력을 제공합니다.

Google의 Search Console(GSC)에서 LCP 데이터를 직접 볼 수도 있습니다. 다음과 같은 이유로 Google의 Page Speed ​​Insights를 사용하는 것보다 권장합니다.

• PageSpeed ​​Insights에서는 분석을 위해 검색창에 입력한 단일 웹페이지에 대한 보고서를 받게 됩니다. 검색 콘솔에서 전체 웹사이트의 LCP 데이터를 볼 수 있습니다.
• Google의 Search Console을 통해 웹사이트에서 좋은 URL, 나쁜 URL 또는 그 중간에 있는 URL의 전체 목록을 얻을 수 있습니다.
• Google의 LCP 가이드라인은 웹사이트의 LCP를 '양호', '나쁨' 및 '개선 필요'로 분류합니다.

이상적인 LCP 측정은 2.5초 이상입니다. 페이지의 주요 콘텐츠 로드가 빠를수록 LCP 점수가 높아집니다. 큰 페이지와 여러 기능이 있는 대규모 웹 사이트가 있는 경우 이 작업이 어려울 수 있습니다.

신호 2: FID(First Input Delay): 상호 작용/반응성 확인

첫 번째 입력 지연은 Google의 두 번째 핵심 웹 필수 요소입니다. 그것은 상호 작용을 측정합니다.

간단히 말해서 FID(First Input Delay)는 페이지가 대화형이 되는 데 걸리는 시간을 나타냅니다. 페이지에서 활동이 발생하는 데 걸리는 시간을 측정한다고 말할 수 있습니다. 보다 구체적으로 말하면 사용자가 페이지에서 실제로 어떤 작업을 수행하는 데 걸리는 시간을 측정합니다.

이상적인 FID 측정은 100ms 미만입니다.

다음은 FID 점수에 대해 계산되는 페이지 내 상호작용의 몇 가지 예입니다.

• 사용자가 메뉴에서 옵션을 선택하는 데 걸리는 시간입니다.
• 사용자가 필드에 이메일을 입력하는 데 걸리는 시간입니다.
• 사용자가 사이트 탐색에서 링크를 클릭하는 데 걸리는 시간입니다.

사용자 데이터를 수집하거나 로그인 세부 정보를 요청하는 비즈니스 웹 사이트의 경우 FID 점수는 매우 중요합니다.

신호 3: 누적 레이아웃 이동(CLS): 시각적 안정성 확인

CLS(Cumulative Layout Shift)는 시각적 안정성을 측정하는 핵심 웹입니다. 사용자 상호작용으로 인한 것이 아닌 모든 레이아웃 변경을 계산하는 메트릭입니다. 즉, 이 측정항목은 페이지가 로드될 때 페이지의 시각적 안정성을 고려한다고 말할 수 있습니다.

페이지가 로드되는 동안 페이지에서 더 많은 요소가 이동하면 CLS가 더 높아집니다. 웹 페이지가 로드되는 동안 더 적은 수의 요소가 이동하면 CLS가 낮아집니다.

CLS가 낮을수록 페이지 점수 성능이 향상됩니다.

0.1 미만의 CLS 점수는 웹 페이지에 이상적인 것으로 간주되므로 최적의 페이지 경험을 위해 웹 사이트를 최적화하는 동안 이를 타겟팅해야 합니다.

세 가지 Web Vitals(LCP, FID, CLS)를 최적화하는 방법

세 가지 웹 핵심 핵심을 최적화하는 것은 페이지 성능과 웹 페이지의 전반적인 페이지 경험을 개선하는 데 중요합니다. 다음은 이를 개선할 수 있는 몇 가지 방법입니다.
LCP(Large Contentful Paint)를 최적화하는 방법:

다음은 웹사이트의 LCP를 개선하기 위해 할 수 있는 일의 목록입니다.

• CSS 축소: CSS가 작을수록 LCP가 빨라집니다.
• 큰 페이지 요소 제거: 다행스럽게도 Google의 Page Speed ​​Insights는 웹사이트에 페이지의 LCP를 늦추는 요소가 있는지 알려줍니다. 그것이 무엇인지 식별하면 신속하게 해결할 수 있습니다. 예를 들어 Google의 Page Speed ​​Insights에서 Techmagnate의 LCP 점수를 분석하면 이 요소가 잘못된 것으로 나타납니다.
• 웹 호스트 업그레이드: 더 나은 호스팅으로 더 빠른 로드 속도(LCP 포함)가 제공됩니다.
• 불필요한 타사 스크립트 제거: 최대한 타사 스크립트를 사용하지 마십시오.
• 지연 로딩 설정: 지연 로딩은 사용자가 이미지가 포함된 웹페이지의 해당 지점에 도달할 때만 이미지가 로드됨을 의미합니다. 지연 로딩을 설정하면 LCP를 더 빨리 달성할 수 있습니다.

위에서 언급한 팁을 실행하면 좋은 LCP 점수를 얻는 데 필요한 LCP 완성도를 높이는 데 도움이 될 수 있습니다. LCP 점수가 높을수록 페이지 경험 점수와 순위 기회가 높아집니다. 따라서 아직 최적화하지 않았다면 지금 LCP를 최적화하십시오.

FID(첫 번째 입력 지연)를 최적화하는 방법:

다음은 사이트의 FID 점수를 개선하기 위해 수행할 수 있는 몇 가지 단계입니다.

• Javascript 최소화(또는 연기): 페이지에서 JS를 최소화하거나 연기하면 브라우저에서 JS를 로드해야 할 필요성이 줄어들거나 제거됨에 따라 웹 페이지의 FID 속도를 향상시키는 데 도움이 될 수 있습니다.
• 중요하지 않은 타사 스크립트 제거: Google Analytics 및 히트맵과 같은 타사 스크립트는 FID 및 콘텐츠 로딩 속도에 부정적인 영향을 미칠 수 있습니다. 웹 사이트에 중요하지 않은 항목을 식별하고 웹 페이지에 중요하지 않은 경우 제거하십시오.
• 요청 수를 줄이고 전송 크기를 작게 유지: 코드를 최적화하여 요청 수를 제한하고 HTML 파일, 미디어, 이미지 등의 전송 크기를 최소화합니다.

CLS(누적 레이아웃 이동)를 최적화하는 방법:

다음은 CLS를 개선하기 위해 취할 수 있는 몇 가지 간단한 조치입니다.

• 웹페이지에서 광고 요소에 예약된 공간 할당: 이 간단한 작업을 수행하면 콘텐츠가 있어야 할 위치에 그대로 유지됩니다. 지정된 광고 공간이 없는 웹 페이지는 콘텐츠 구조와 위치를 엉망으로 만드는 경향이 있으며 때로는 페이지를 위아래로 밀어 높은 CLS와 나쁜 페이지 경험 점수를 초래합니다.
• 스크롤 없이 볼 수 있는 부분 아래에 새 UI 요소 추가: 사용자가 웹사이트의 페이지를 탐색할 때 요소가 제자리에 있기를 기대합니다. UI 요소를 추가하면 이러한 일이 발생하고 페이지 콘텐츠 구조가 영향을 받지 않은 상태로 유지되도록 할 수 있습니다.
• 미디어에 대해 설정된 크기 속성 치수 사용: 비디오, 이미지, GIF, 인포그래픽 또는 기타 미디어 요소와 같은 미디어에 대해 설정된 크기 속성 치수를 사용하는 것이 중요합니다. 이렇게 하면 해당 요소가 해당 페이지에서 차지하는 공간을 보여주므로 전례 없는 콘텐츠 잘못 배치로부터 웹페이지를 보호하는 데 도움이 됩니다.

당사의 웹사이트 디자인 및 개발 서비스는 핵심 Web Vitals 점수를 최적화하는 데 도움이 됩니다.

Web Vitals 점수 측정 방법:

이제 세 가지 핵심 Web Vital이 무엇인지 알았으므로 이를 측정하는 데 도움이 되는 몇 가지 도구를 소개합니다.

• Google의 Search Console: 핵심 Web Vital을 분석하기 위한 강력하고 매우 편리한 또 다른 도구는 Google Search Console입니다. 웹사이트 감사를 수행할 때마다 확인할 수 있는 향상된 섹션 아래에 고유한 핵심 웹 바이탈 보고서가 함께 제공됩니다. 가장 좋은 점: 단일 웹 페이지의 페이지 성능을 표시하는 대신 검색 콘솔은 모든 웹 페이지 성능 데이터를 한 번에 표시합니다.
• PageSpeed ​​Insight: Google의 PageSpeed ​​Insight는 개선할 수 있는 유용한 조언과 함께 웹 페이지의 핵심 웹 바이탈을 보여주는 강력한 도구입니다.
• Lighthouse: Lighthouse는 핵심 웹 바이탈을 측정하는 데 사용할 수 있는 또 다른 Google 도구입니다. 이전에는 PWA를 감사하도록 설계되었지만 이제는 성능 모니터링을 위한 강력한 도구로 변모했습니다. 추가 기능과 SEO 검사로 무장한 등대는 웹 페이지의 속도와 페이지 경험 데이터를 분석하기 위한 강력한 도구로 적절하게 설명될 수 있습니다.
• GT Metrix: GT Metrix는 웹사이트 성능 테스트 및 모니터링 웹사이트입니다. LCP, TBT 및 CLS 성능을 평가하는 데 사용할 수 있는 무료 도구입니다.

Screaming Frog를 사용하여 Core Web Vitals를 감사하는 방법:

핵심 Web Vital 감사 개념은 비교적 새로운 개념입니다. 준비 상태를 유지하고 웹사이트의 핵심 웹 바이탈을 최적화하려는 경우 Screaming Frog와 같은 도구를 사용하는 것이 도움이 될 수 있습니다. 특히 이미 프리미엄 멤버십에 가입한 경우 더욱 그렇습니다.

필요한 것은 다음과 같습니다.

• Screaming Frog의 유료 버전입니다.
• PageSpeed ​​Insights API 키.
• 감사하려는 웹사이트의 도메인입니다.

의 시작하자.

1단계: PageSpeed ​​Insights API 키를 Screaming Frog에 연결

핵심 웹 바이탈을 최적화하기 위해 Screaming Frog를 사용하는 1단계에는 PageSpeed ​​Insights API 키를 연결하는 것이 포함됩니다. 연결하면 Screaming Frog 대시보드에서 페이지별로 PageSpeed ​​Insights 데이터 및 권장 사항에 액세스할 수 있습니다.

따라야 할 단계는 다음과 같습니다.

• Screaming Frog → 구성 → API 액세스 → PageSpeed ​​Insights를 엽니다.
• PageSpeed ​​Insights의 API 키를 '비밀 키' 상자로 페이징합니다.
• ' 연결 '을 클릭합니다.
• '연결'을 클릭한 후 ' 측정 항목'을 클릭합니다.
• 감사할 측정항목을 선택하고 ' 확인 '을 클릭합니다.

2단계: 웹사이트를 크롤링합니다.

다음 단계에는 웹사이트 크롤링이 포함됩니다.

크롤링하려는 웹사이트의 도메인 이름을 '스파이더에 대한 URL 입력'이라는 상자에 입력하기만 하면 됩니다. 입력한 후 '크롤링' 및 'API' 진행률 표시줄이 로드될 때까지 기다립니다.

100%로 로드되면 데이터를 분석할 수 있습니다.

3단계: 문제를 관련 당국에 보고합니다.

도구가 데이터를 로드한 후 웹사이트의 모든 웹 페이지를 편집할 수 있습니다. 여기에서 백분율 수치 측면에서 최소 Core Web Vitals 임계값에 실패한 웹 페이지 수를 분석해야 합니다.

다음은 수행할 수 있는 몇 가지 단계입니다.

• 상단 탐색 모음을 클릭합니다.
• 페이지 매김 을 클릭합니다.
• 드롭다운 메뉴에서 페이지 속도 를 클릭합니다.
• 내보내기 를 클릭합니다.

데이터를 내보낸 후 다음 열을 채우십시오.

• 최대 콘텐츠가 포함된 페인트 시간(ms): 필터를 사용하여 4000ms LCP 이상의 페이지를 찾습니다.
• 총 차단 시간(ms): 300ms TBT 이상의 페이지를 찾기 위해 필터를 넣습니다.
• 누적 레이아웃 이동: 필터를 넣어 0.25 CLS 이상의 페이지를 찾습니다.

이 데이터를 기반으로 보고서를 작성하여 클라이언트에 보낼 수 있습니다. 사내 페이지 경험 최적화 요구 사항에 대해 이 감사를 수행하는 경우 이 데이터를 관련 팀에 보낼 수 있으며 관련 팀에서 그에 따라 페이지 최적화를 실행할 수 있습니다.

4단계: 권장 사항과 함께 페이지별 문제를 보고합니다.

이제 이것이 흥미로워지는 단계입니다. 이제 웹사이트에서 Google Web Vitals의 최소 기준을 충족하지 못하는 페이지의 비율을 알게 되었습니다. 다음은?

타겟팅하려는 메트릭을 기반으로 관련 문제를 깔끔하게 편집하십시오. 수행할 수 있는 작업은 다음과 같습니다.

• '개요' 탭의 오른쪽에서 PageSpeed까지 아래로 스크롤합니다.
• 여기에서 핵심 웹 바이탈을 개선하기 위한 잠재적 솔루션을 포함하여 웹사이트의 페이지 속도와 관련된 문제 및 권장 사항을 찾을 수 있습니다.
• 페이지 속도 드롭다운에는 다음과 같은 다양한 측정항목이 포함됩니다.
  • 렌더링 차단 리소스 제거(LCP에 영향)
  • CSS 축소(LCP에 영향)
  • JavaScript 축소(FID에 영향)
  • 사용하지 않는 CSS 제거(LCP에 영향)
  • 사용하지 않는 Javascript 제거(FID에 영향)
  • (그리고 더 많은)
• 문제를 클릭하여 영향을 받는 페이지 수를 확인하고 이 데이터를 워크시트로 내보냅니다. 이렇게 하면 관련 문제가 있는 모든 URL을 내보내는 데 도움이 됩니다.
• 데이터를 기반으로 웹 페이지에서 이러한 요소의 제거 또는 연기에 대한 판단을 내릴 수 있습니다.

추가 읽기: Page Speed ​​SEO란 무엇입니까?

5단계: 사후 감사 및 최적화, 사이트를 다시 크롤링하고 비교합니다.

핵심 google web vitals에 영향을 미치는 요소를 식별한 후에는 최적화를 수행할 수 있습니다. 최적화 후, 귀하의 임무는 사이트를 다시 크롤링하여 결과를 평가하는 것입니다.

최적화 후 최소 핵심 Web Vital 요구 사항을 충족하지 않는 웹 페이지의 비율을 최적화 전 수치와 비교합니다.

고려해야 할 기타 페이지 경험 요소:

다음은 Google이 사용자 경험에 필요하다고 생각하는 주요 추가 요소 목록입니다.

• 세이프 브라우징: 웹사이트에서 세이프 브라우징을 허용하지 않는 경우 페이지 경험 기준 위반으로 간주되어 낮은 페이지 경험 점수를 받습니다. 따라서 웹 사이트에 악성 코드와 같은 악의적이거나 기만적인 콘텐츠가 포함되어 있지 않은지 확인하십시오. Google의 보안 문제 보고서에서 웹사이트의 안전 준수 기준을 확인할 수 있습니다.
• HTTPS: HTTPS 로 시작하는 웹 사이트는 보안 사이트 연결을 가질 가능성이 더 큽니다. HTTPS로 시작하는 웹사이트가 없는 경우 여기에서 HTTPS로 웹사이트를 보호하는 방법을 알아보세요.
• 모바일 친화적: Google의 모바일 친화적 테스트를 사용하여 웹페이지가 모바일 친화적인지 확인합니다. 이 빠른 평가에서 귀하의 웹페이지가 '모바일 친화적'으로 표시되지 않으면 전략을 실행하여 휴대전화 및 태블릿에 맞게 웹사이트를 최적화하십시오. 무엇보다도 UX 및 UI를 개선하고 캔버스 밖 탐색을 완성하는 것이 도움이 될 수 있습니다.
• 방해가 되는 전면 광고 없음: 웹페이지의 콘텐츠는 사용자가 쉽게 액세스할 수 있어야 합니다. 그것의 부족은 낮은 페이지 경험 점수로 착륙할 수 있습니다. 사용자가 웹 페이지 콘텐츠에 더 쉽게 액세스할 수 있도록 하기 위해 피해야 할 주요 사항은 다음과 같습니다.
  • 웹사이트 콘텐츠의 대부분을 차단하는 팝업을 사용하지 마십시오.
  • 전체 화면을 덮는 독립형 전면 광고를 표시하지 마세요. 사용자가 기본 콘텐츠에 액세스하기 전에 이를 해제해야 하므로 방해가 됩니다.

결론:

Google은 2021년 5월 핵심 순위 신호로 핵심 웹 바이탈을 출시할 준비가 되어 있습니다. 시간이 필요한 것은 기업이 이 핵심 순위 기준에 맞게 웹사이트를 미리 최적화하는 것입니다.

이 블로그에서는 웹 핵심 vitals를 개선하기 위해 취할 수 있는 매우 필요한 단계를 설명했습니다. 핵심 Web Vital이 무엇인지, 핵심 Web Vital에 대한 상위 3개 측정항목, 좋은 Core Web Vitals SEO 점수를 위해 웹 페이지를 최적화하기 위해 할 수 있는 일에 대해 논의했습니다.

또한 웹사이트 감사를 위해 Screaming Frog를 사용하는 사람들을 위해 페이지 경험을 분석하기 위한 빠른 해킹을 간략하게 설명했습니다. 여기에서 제공한 정보가 도움이 되었기를 바랍니다. 웹사이트 최적화 전략에 이를 구현하여 Google 순위를 유지하세요.

의심이나 질문이 있으면 의견 섹션에 알려주십시오.

여러분의 의견을 듣고 싶습니다.