CLS(Cumulative Layout Shift): 정의 및 웹사이트 최적화 방법

이것을 상상해보십시오. 웹 사이트를로드하고 있으며 사용할 준비가 된 것처럼 보입니다. 기사를 읽기 위해 블로그 추천 이미지를 클릭했는데 다른 것이 로드되었기 때문에 갑자기 전체 페이지가 이동합니다. 그리고 완전히 다른 것을 클릭하고 의도하지 않은 페이지를 로드합니다. 이 문제를 직접 경험했다면 CLS(누적 레이아웃 이동)가 사이트의 UX(사용자 경험)에 어떻게 부정적인 영향을 미칠 수 있는지 알 것입니다.

누적 레이아웃 이동은 페이지가 로드되는 동안 페이지의 레이아웃이 얼마나 이동하는지에 대한 용어입니다. 이 기사에서는 그 의미에 대해 조금 더 자세히 알아보겠습니다. CLS를 측정하는 방법과 좋은 점수가 무엇인지 설명하겠습니다. 그런 다음 웹사이트의 CLS 점수를 최적화하는 방법에 대해 논의합니다. 일하러 가자!

YouTube 채널 구독

CLS(누적 레이아웃 시프트)란 무엇입니까?

높은 CLS 점수(Google의 PageSpeed ​​Insights에서 0.10 이상을 의미)가 무엇을 나타내는지 시각적인 예보다 더 좋은 방법은 없습니다. 다음은 페이지가 로드될 때 계속 변경되는 레이아웃이 있는 웹사이트입니다. 이것을 캡처할 때 스크롤하지 않는다는 점에 유의하십시오. 뷰포트는 그대로 유지되지만 페이지는 자체적으로 크게 이동합니다.

이 웹사이트를 방문하는 사용자로서 실제로 로딩이 완료되었는지 확신할 수 없을 수도 있습니다. 뉴스 기사를 클릭해도 레이아웃이 크게 바뀔 수 있습니다. 결과적으로 잘못된 페이지로 이동하고 되돌아가는 데 시간을 낭비해야 합니다. 페이지에 따라 여러 번 발생할 수 있습니다. 그렇다면 그냥 떠날 가능성이 큽니다.

사용자도 마찬가지일 것입니다.

웹사이트가 복잡할수록 CLS 점수가 높을 가능성이 높아집니다. 상징적 인 Google 홈페이지와 같은 간단한 레이아웃에는 요소가 너무 적기 때문에 CLS가 없습니다.

모든 복잡한 웹 사이트의 CLS 점수가 높다는 것은 아닙니다. 예를 들어 아마존을 생각해 보십시오. 전자 상거래의 거인이 간단한 웹 디자인을 사용한다고 말할 사람은 아무도 없습니다. 그러나 카탈로그를 탐색하는 동안 레이아웃 변경이 거의 또는 전혀 없습니다.

레이아웃 전환은 브라우저가 페이지 요소를 비동기적으로 로드하는 경향이 있기 때문에 발생합니다. 더 중요한 것은 페이지에 처음에는 알 수 없는 크기의 미디어 요소가 있을 수 있다는 것입니다. 이 조합은 브라우저가 로드가 완료될 때까지 개별 요소가 차지하는 공간을 알 수 없음을 의미합니다. 따라서 과감한 레이아웃 변경.

CLS는 다양한 도구를 사용하여 객관적으로 측정할 수 있다는 점에서 흥미롭지만 각 사용자의 장치가 사이트 레이아웃이 어떻게 바뀔 수 있는지에 영향을 줄 수 있다는 점에서도 사용자 중심적입니다. 그 측면을 제어할 수는 없지만 가능한 한 최소한의 영향을 미치도록 예방 조치를 취할 수 있습니다.

CLS는 귀하의 웹사이트가 강력한 사용자 경험(UX)을 제공하는지 판단하는 데 도움이 되도록 Google에서 측정하는 3가지 핵심 성능 지표 중 하나입니다. 다른 핵심 Web Vitals는 FID(First Input Delay) 및 LCP(Large Contentful Paint)이며, 최적화에 들인 노력도 확실히 가치가 있습니다.

CLS 측정 방법

웹사이트에 표시된 레이아웃 변경이 표시되는지 알아내는 것은 비교적 간단합니다. 먼저 다양한 장치에서 웹사이트에 액세스하고 다른 사용자에게도 동일한 작업을 요청하는 것이 좋습니다. 그렇게 하면 페이지가 로드되는 동안 레이아웃이 일관되게 유지되는지 확인할 수 있습니다.

CLS 경험은 매우 다양할 수 있습니다 . 웹사이트가 얼마나 최적화되었는지뿐만 아니라 사용 중인 기기에 따라 다릅니다. 이를 염두에 두고 웹사이트의 CLS를 측정하는 가장 좋은 도구는 PageSpeed ​​Insights입니다. 이는 Google의 핵심 성능 평가와 직접 연결되므로 CLS 점수가 Google에서 사이트를 보는 방식에 어떤 영향을 미치는지 직접 확인할 수 있습니다.

이 서비스를 사용하면 URL을 입력하고 Google에서 수집한 지난 28일 데이터를 기반으로 해당 URL에 대한 전체 성능 점수를 받을 수 있습니다. 이 점수는 CLS, FCP 및 LCP를 비롯한 여러 메트릭을 고려합니다.

이 테스트를 위해 식별 가능한 CLS가 없는 웹사이트를 선택했습니다. PageSpeed ​​Insights는 강력한 CLS 점수와 함께 압도적으로 긍정적인 결과를 반환했기 때문에 우리의 의심을 확인했습니다.

PageSpeed ​​Insights는 각 점수에 대한 백분율 분석을 제공합니다. 이 경우 사용자의 91%가 테스트 웹 사이트를 로드하는 동안 레이아웃 이동이 전혀 발생하지 않았습니다. 그러나 나머지 방문자는 일정 수준의 레이아웃 변경을 경험했습니다.

이는 CLS 및 나머지 Core Web Vitals와 관련하여 예상되는 것입니다. 사용자 경험은 방문하는 장치, 인터넷 연결 및 기타 여러 요인에 따라 크게 달라집니다. CLS를 경험한 사용자가 없다는 사실을 설명할 방법은 거의 없지만 가능한 한 낮은 비율로 최적화하도록 예방 조치를 취할 수 있습니다.

현장 데이터 외에도 PageSpeed ​​Insights는 실험실 데이터 라고 하는 정보도 제공 합니다 . 이는 장기간에 걸쳐 수집된 데이터( 필드 데이터 로 간주됨) 대신 단일 테스트를 기반으로 하는 성능 점수입니다.

테스트에서 CLS 점수 0을 받았으며 이는 레이아웃 변경이 없음을 의미합니다. 이 하나의 특정 테스트를 위해. 이제 그렇게 강력한 CLS 점수를 얻지 못한 다른 웹사이트와 비교해 보겠습니다.

Google 표준을 충족하려면 CLS 점수가 0.10 미만이어야 합니다. 그 이상은 레이아웃에 눈에 띄는 변화가 있음을 의미하며 이는 사용자 경험을 저하시킵니다.

레이아웃 이동의 원인을 식별하는 방법

웹사이트에서 레이아웃 이동을 일으키는 요소를 식별하려면 Chrome 개발자 도구를 사용하면 됩니다. 도구(CTRL-SHIFT-I)를 열고 성능 탭으로 이동하면 웹을 탐색하면서 성능 테스트를 기록할 수 있습니다.

기록을 중지하면 Chrome 개발자 도구가 로드 시간, 개별 요청 및 핵심 성능 평가를 보여주는 타임라인을 반환합니다. 이 타임라인에서 경험 아래에 나열된 개별 레이아웃 이동 이벤트를 선택할 수 있습니다. 그렇게 하면 어떤 요소에 해당하는지 알 수 있습니다.

레이아웃 이동을 일으키는 요소를 알게 되면 문제를 해결하기 위한 조치를 취할 수 있습니다. 다음 섹션에서 이에 대해 이야기하겠습니다.

웹사이트의 Core Web Vitals를 모니터링하려면 Google Search Console 계정을 설정하는 것이 좋습니다. 검색 엔진 최적화(SEO)와 관련하여 이점인 Search Console에서 성능 측정항목 및 핵심 웹 바이탈을 모니터링할 수 있습니다. 관계없이 Search Console을 정기적으로 모니터링하는 것이 귀하에게 가장 좋은 일이라고 생각하지만, 추적 중인 특정 측정항목이 있어도 문제가 되지 않습니다.

CLS 점수를 최적화하는 방법

대체로 높은 CLS 점수와 관련하여 두 가지 큰 원인이 있습니다. 미디어 파일과 광고입니다. 예를 들어 고해상도의 이미지 파일을 업로드했지만 높이와 너비를 지정하지 않으면 페이지 레이아웃이 깨질 수 있습니다.

웹사이트 성능 측면에서 표시할 정확한 크기의 이미지를 사용하는 것이 가장 좋습니다. 그렇게 하면 브라우저가 적절하게 크기를 조정하는 데 처리 능력(및 시간)을 소비할 필요가 없습니다. 그러나 항상 가능한 것은 아닙니다. 그렇지 않은 경우 표시하는 모든 이미지에 대해 너비 및 높이 속성 을 설정해야 합니다. 그렇게 하면 사용자의 브라우저는 이미지가 어디에 맞는지 정확하게 알 수 있으며 가능한 마지막 순간에 레이아웃을 이동할 필요가 없습니다.

이러한 속성이 HTML에서 표시되는 방식은 다음과 같습니다.

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

WordPress를 사용하는 경우 일부 이미지 최적화 플러그인은 파일을 업로드할 때 파일 크기를 자동으로 조정하여 필요한 너비 및 높이 속성을 설정합니다.

반응형 이미지의 경우 너비와 높이를 수동으로 선언하는 대신 CSS를 사용할 수 있습니다. CSS를 사용하면 max-width 속성을 사용하여 이미지가 차지하는 뷰포트의 백분율을 브라우저에 알릴 수 있습니다.

img {
max-width: 90vw;
height: auto;
}

이 예에서 우리는 사용자 뷰포트의 90%를 차지하도록 이미지의 크기를 조정하도록 브라우저에 지시합니다. 동시에 height 속성을 auto 로 설정하여 브라우저가 이미지의 새 너비와 가로 세로 비율을 기반으로 이상적인 높이를 계산하도록 합니다.

이미지에 적용되는 것과 동일한 기본 사항이 광고에도 적용됩니다. 일반적으로 iframe을 사용하고 광고 네트워크에서 동적으로 크기가 조정되는 요소를 사용하는 경우가 있습니다. 이것은 페이지 레이아웃에 혼란을 줄 수 있습니다.

광고 네트워크가 웹사이트에 표시할 광고의 크기를 결정하도록 하는 대신 해당 영역을 예약할 수 있습니다. 즉, 광고 영역에 대한 너비 및 높이 속성을 선언하고 로드되지 않는 경우 대체를 설정하여 빈 공간이 레이아웃 이동을 일으키지 않도록 합니다.

원하는 광고 컨테이너에 대해 동일한 종류의 CSS 및 인라인 스타일을 사용할 수 있으며, 게재되는 광고에 관계없이 고정된 상태로 유지할 수 있습니다.

CLS(누적 레이아웃 변경) 자주 묻는 질문

CLS는 LCP 및 FCP 메트릭보다 이해하기가 조금 더 복잡할 수 있습니다. 이를 염두에 두고 사용자가 CLS에 대해 갖는 몇 가지 일반적인 질문을 살펴보고 주요 정보가 누락되지 않았는지 확인합니다.

CLS는 내 웹 사이트의 성능에 어떤 영향을 미칩니까?

이론상으로는 여전히 상대적으로 낮은 CLS 점수를 받는 매우 빠른 웹사이트를 가질 수 있습니다. 다른 핵심 성능 평가와 마찬가지로 CLS 점수는 전체 사이트 성능과 직접적인 상관 관계가 없을 수 있습니다. 귀하의 사이트는 빠르게 타오를 수 있지만 로드되면 아코디언처럼 펼쳐집니다. 그럼에도 불구하고 큰 레이아웃 변경은 확실히 사이트의 UX에 부정적인 영향을 미칩니다. Google은 이를 매우 중요하게 생각합니다. 이것이 Google이 이 데이터 포인트에 매우 많은 가중치를 부여하는 이유입니다.

CLS가 FCP 또는 LCP 점수보다 덜 중요합니까?

많은 사용자가 CLS보다 FCP 및 LCP 점수에 더 많은 관심을 기울입니다. 이 두 가지 측정항목이 웹사이트 성능과 더 쉽게 관련되기 때문입니다. FCP도 특히 사용자 중심 메트릭이지만 CLS는 많은 수의 사용자에 대해 일관되게 측정하기가 더 어렵습니다.

세 가지 측정항목이 모두 Google 핵심 성과 보고서를 구성합니다. 즉, 그 중 하나를 무시하면 관련 검색 결과에서 순위가 ​​낮아질 위험이 있습니다. 사이트가 낮은 CLS에 최적화되어 있는지 확인하는 것은 일반적으로 LCP 및 FCP와 같은 사이트 성능에 긍정적인 영향을 미칩니다. 가장 큰 콘텐츠가 포함된 페인트가 사용자가 보자마자 화면 아래로 밀려난다면 그 빠른 로딩 시간이 얼마나 유용할까요?

좋은 CLS 점수란 무엇입니까?

숫자로 볼 때 Google은 0.10 미만을 좋은 CLS 점수로 간주합니다. 그러나 적절한 조치를 취하면 CLS 점수 0을 얻는 것이 문제가 아니며 잘 최적화된 웹 사이트에서는 비교적 일반적입니다. 그러나 정기적으로 0점을 받는 사이트라도 약간의 비율의 사용자가 교대를 경험할 수 있음을 명심하십시오. 그것은 통제할 수 없으며 CLS가 0인 대부분 의 사용자를 설명하기만 하면 됩니다.

결론

웹사이트에서 강력한 UX를 제공하는 데에는 많은 요소가 있습니다. 이상적으로는 빠르게 로드되어야 합니다. 상호 작용하기 쉬워야 합니다. 요소가 나타날 때 레이아웃 위치를 이동해서는 안 됩니다. 급격한 레이아웃 변화는 좌절과 잘못된 클릭으로 이어집니다. 이는 높은 이탈률로 이어집니다. 어떤 웹 사이트에도 좋지 않습니다.

CLS는 Google이 사이트의 전체 UX를 측정하는 데 사용하는 핵심 Web Vitals 중 하나입니다. 그리고 사용자는 처음부터 웹사이트를 운영하는 모든 이유입니다. 그들의 경험은 우선 순위 1입니다. 낮은 CLS 점수(0.10 미만)는 웹 사이트가 유동적으로 로드되어야 하고 레이아웃의 모든 측면이 처음부터 올바른 위치에 표시되어야 함을 의미합니다.

CLS에 대해 질문이 있거나 CLS를 줄이는 방법이 있습니까? 아래 코멘트 섹션에서 그들에 대해 이야기합시다!

Old Brother/Shutterstock.com을 통한 추천 이미지