GSC에서 Core Web Vitals의 CLS 문제 수정

Core Web Vitals가 GSC에 도입되면서 Google은 페이지의 웹 바이탈을 순위 요소로 고려할 것임을 분명히 했습니다. 이는 페이지 속도, HTTPS, 모바일 친화성 및 안전한 탐색과 같은 Google의 다른 순위 요소와 함께 작동합니다. 아직 많은 세부 정보가 공개되지 않았지만 Google Search Console은 Core Web Vitals에 대한 보고서를 표시하기 시작했습니다.

이는 세 가지 웹 성능 메트릭으로 구성됩니다;

1. LCP: 최대 콘텐츠 페인트
2. FID: 첫 번째 입력 지연
3. CLS: 누적 레이아웃 이동

현재 이러한 문제를 해결하는 방법에 대한 정보는 많지 않지만, 웹 페이지의 누적 레이아웃 이동(CLS) ‘ More Than’을 해결하는 데 도움이 될 수 있는 몇 가지 방법이 있습니다.

누적 레이아웃 이동(CLS)란?

페이지 안정성을 보고하는 페이지 메트릭입니다. 간단히 말해, 웹 페이지를 로드하고 읽거나 어떤 작업을 수행할 때, 웹 페이지의 콘텐츠나 요소가 갑자기 점프하거나 변경되면 사용자 경험에 문제가 발생할 수 있습니다.

CLS는 페이지의 전체 수명 동안 발생하는 모든 예상치 못한 레이아웃 이동에 대한 개별 레이아웃 이동 점수의 총합을 측정합니다.

위의 예시는 주문 확인 상자 위에 요소가 갑자기 로드되어 우연한 클릭을 유발한 경우를 보여줍니다. CLS는 이러한 페이지 콘텐츠 이동의 평균입니다.

좋은 사용자 경험을 제공하기 위해 사이트는 CLS 점수가 0.1 미만이 되도록 노력해야 합니다.

높은 CLS의 원인은 무엇인가요?

높은 CLS를 유발할 수 있는 여러 가지 문제가 있을 수 있지만, 주요 원인을 몇 가지 지적하겠습니다;

• 지연 로드 콘텐츠 재배치
• 치수 없는 이미지
• 광고 삽입
• 치수 없는 임베드 및 iframe
• 느린 응답으로 인해 로드 대기 중인 콘텐츠

지연 로드 콘텐츠 재배치

지연 로드는 페이지가 스크롤될 때 이미지를 로드하는 훌륭한 플러그인입니다. 그러나 많은 경우 이로 인해 콘텐츠가 위아래로 이동하여 재배치가 발생하며, 이미지 아래 또는 주변의 콘텐츠가 새로 로드된 이미지를 위해 밀려납니다.

광고 삽입

광고는 웹에서 레이아웃 이동의 가장 큰 기여자 중 하나로, 사용자가 보고 있는 콘텐츠를 페이지 아래로 밀어냅니다. 페이지가 로드된 후 광고 단위를 로드하여 상당한 지연을 초래합니다.

느린 응답으로 인해 로드 대기 중인 요소

때때로 느린 HTTP 응답으로 인해 몇몇 요소가 로드되는 데 시간이 걸려 콘텐츠가 위아래로 이동할 수 있습니다.

웹 바이탈에서 높은 CLS 오류를 수정하는 방법은?

이미지가 로드되는 데 시간이 걸리고 콘텐츠가 이미지 공간을 차지하는 경우, 콘텐츠가 로드될 때 콘텐츠가 아래로 이동하여 레이아웃 불안정성이 발생합니다.

콘텐츠 이동(Jank)을 유발하는 이미지의 경우, CSS 비율 상자를 사용하여 필요한 공간을 예약하십시오. 이 접근 방식은 미디어가 로드되는 동안 브라우저가 문서에서 올바른 양의 공간을 할당할 수 있도록 보장합니다. Jank 없는 이미지 로드에 대한 이 게시물을 읽어보세요.

지연 로드된 이미지도 문제를 일으킬 수 있으며, 이미지 공간을 차지하기 전에 큰 공간을 생성할 수 있습니다. 이미지 지연 로딩으로 인해 콘텐츠 재배치 문제가 발생하는 경우, 해결책에 대한 이 기사를 읽어보세요.

콘텐츠에 광고를 배치하는 경우, 예약된 슬롯 크기를 예약하여 이동을 제거해야 합니다. 광고가 반환되지 않을 경우 예약된 공간이 무너지는 대신 자리 표시자를 사용하십시오. WordPress를 사용 중이라면 Ad-Inserter와 같은 좋은 광고 플러그인이 광고에 대한 올바른 공간을 유지하므로 걱정할 필요가 없습니다.

동적 콘텐츠를 피하십시오. 동적 콘텐츠는 페이지가 로드된 후 삽입되는 콘텐츠입니다. 특히 위쪽에 있는 콘텐츠, 예를 들어 뉴스레터, 가입, 관련 게시물 등은 DOM에서 위쪽에 로드하지 않도록 하십시오. 가능하다면 팝업 박스를 사용해 보십시오.

서버의 느린 HTTP 응답도 콘텐츠 불안정성을 유발할 수 있습니다. CDN을 사용 중이며 요소 로드에 높은 밀리초가 걸리고 이로 인해 콘텐츠가 점프하는 경우, DOM에서 공간을 만들거나 다른 요소와 로드를 동기화해야 합니다.

높은 CLS의 다른 원인도 있으며, Web.Dev 공식 사이트에서 CLS 최적화에 대한 자세한 가이드를 찾을 수 있습니다.

결론: 이 게시물은 기술적이거나 코드 관련 솔루션을 포함하지 않지만, 문제의 원인이 무엇인지와 문제를 해결하는 방법에 대한 개요를 제공합니다.

GSC에서 Core Web Vitals의 CLS 문제 수정에 대한 의견이 있으시면 아래 댓글란에 자유롭게 남겨주세요. 또한, 비디오 튜토리얼을 위해 DigitBin YouTube 채널을 구독해 주세요. 감사합니다!