누적 레이아웃 변경: Google CLS 점수 향상

주문을 하려고 하면 결제 버튼이 사라지는 상황을 겪은 적이 있습니까?

예! 답답하다

진실은 너무 자주 그리고 너무 많은 사람들에게 발생합니다.

고맙게도 Google은 항상 그렇듯이 사용자 경험을 무엇보다 우선시합니다.

이것이 2021년부터 핵심 웹 바이탈의 일부로 세 가지 새로운 성능 지표를 제공하는 이유입니다.

Core Web Vitals는 페이지의 로딩 속도, 상호 작용 및 시각적 안정성을 측정하도록 설계되었습니다.

세 가지 측정항목은 다음을 나타냅니다.

1. 가장 큰 내용이 포함된 페인트(LCP)

2. 첫 입력 지연(FIP)

3. 누적 레이아웃 시프트(CLS)

사용자와 웹마스터(SEO)의 관점에서 CLS를 이해합시다.

누적 레이아웃 이동이란 무엇입니까?

CLS(Cumulative Layout Shift)는 웹사이트의 시각적 안정성을 나타냅니다.

페이지에서 중요하지 않은 레이아웃 이동의 양을 측정합니다.

예상치 못한 레이아웃 이동은 사용자 입력 없이 웹 페이지가 자체적으로 이동한 결과입니다.

Google CLS는 페이지 요소의 예기치 않은 움직임이 사용자 경험에 영향을 미치는 빈도를 측정하여 문제를 해결하기 위한 일종의 표시기(신호)입니다.

레이아웃의 이동은 표시되는 요소가 렌더링된 프레임에서 다음 프레임으로 위치를 변경할 때 언제든지 발생할 수 있습니다.

일반적인 의미를 이해하고 "누적 레이아웃 이동"이라는 간단한 단어로 정의해 보겠습니다.

누적은 수량의 증가입니다.

레이아웃은 프레임입니다.

시프트는 위치의 변경입니다

간단히 말해서, 누적 레이아웃 이동은 웹사이트 디자인 위치의 모든 개별 프레임 변경의 총합입니다.

web.dev에서 가져온 이미지

표준 CLS 점수는 0.1 미만이어야 합니다.

동일한 측정을 위한 좋은 임계값은 모바일 및 데스크톱 장치에서 페이지 로드의 75번째 백분위수입니다.

위 이미지에서 Google에 따라:

1. CLS 점수가 0.1 미만이면 좋은 신호입니다. 이는 귀하의 사이트에 레이아웃 변경에 문제가 없음을 의미합니다.

2. CLS 점수가 0.1에서 0.25 사이이면 사이트의 시각적 레이아웃을 어느 정도 개선해야 함을 의미합니다.

3. CLS 점수가 0.25 이상이면 불량한 신호이며, 이는 시각적 요소의 움직임이 매우 자주 발생함을 의미하기도 합니다.

누적 레이아웃 이동은 어떻게 계산됩니까?

Google은 예상치 못한 각 레이아웃 전환에 대한 영향 비율 및 거리 비율을 계산하여 페이지의 CLS를 계산합니다.

CLS의 영향 비율

두 프레임 사이의 뷰포트 영역에서 불안정한 요소가 차지하는 공간의 양을 측정합니다.

CLS에 대한 영향 비율을 계산하는 공식

Layout Shift Score를 계산하려면 Impact Fraction이 필요합니다.

CLS에 대한 영향 비율을 계산하는 방법은 무엇입니까?

그래픽 표현은 영향 비율을 더 잘 이해하는 데 도움이 됩니다.

 충격 비율 = [충격 영역 영역] / [뷰포트 영역] 충격 비율 = [330 x 490] / [375 x 667] 충격 비율 = [161700] / [250125] 충격 비율 = 0.645

CLS의 거리 분수

페이지 요소가 원래 위치에서 레이아웃에서 기본적으로 이동하는 최종 위치로 이동한 공간의 양을 측정한 것입니다.

과도한 벌점을 피하기 위해 Distance Fraction을 도입하여 큰 요소를 약간 고려하여 이동합니다.

CLS에 대한 거리 분수를 계산하는 공식

CLS의 거리 비율을 계산하는 방법은 무엇입니까?

그래픽 표현은 거리 분수를 더 잘 이해하는 데 도움이 됩니다.

거리 분수 = [최대. 이동 거리] / [ViewPort 높이] 거리 분수 = [120] / [667] 거리 분수 = 0.179

Google CLS 점수 계산 공식

누적 레이아웃 점수는 영향 비율에 거리 비율을 곱하여 계산됩니다.

 누적 레이아웃 이동(CLS) = 충격 비율 x 거리 비율

CLS = 0.645 x 0.179 CLS = 0.1154 .

CLS 점수는 임팩트와 거리 비율이 증가함에 따라 계속 상승합니다.

간단한 예가 있는 누적 레이아웃 이동.

사이트를 방문하여 흥미로운 읽을거리를 보았습니다.

링크를 클릭하여 진행합니다.

그러나 링크를 클릭하려고 할 때 웹 페이지에서 링크가 0.5인치 아래로 이동하고 바로 위에 있는 광고를 클릭하게 됩니다.

출처:nitropack.io

불공평한 것 같죠?

예상치 못한 레이아웃 변경입니다.

원래 웹 페이지로 돌아와야 하는 원치 않는 방문 페이지로 리디렉션된다는 의미일 뿐입니다.

우리는 또한 예상되는 레이아웃 변화로 알려진 것을 가지고 있습니다.

웹 페이지에서 무언가를 클릭할 때 발생하며 페이지의 현재 레이아웃을 변경합니다.

예를 들어, 특정 정보를 찾기 위해 블로그로 이동합니다.

검색 창에 주제 이름을 입력하면 필요한 정보를 찾거나 주제와 관련된 몇 가지 블로그 게시물을 찾을 수 있는 특정 블로그 게시물이 검색됩니다.

출처: nitropack.io

이것은 웹 페이지에서 예상되는 결과이며 예상되는 레이아웃 변경으로 간주될 수 있습니다.

CLS 문제의 원인은 무엇입니까?

검색 엔진의 거인인 Google에 따르면 누적 레이아웃 이동에 대한 5가지 가능한 이유가 있습니다 .

치수가 없는 이미지 및 비디오

항상 이미지와 비디오의 너비와 높이를 지정하는 것이 좋습니다.

CSS 종횡비 상자를 활용하여 이미지가 로드되는 동안 브라우저가 웹 페이지에 적절한 양의 공간을 할당하도록 할 수도 있습니다.

차원이 없는 광고, 삽입 및 iframe

광고 크기는 높은 CTR을 통해 수익을 높일 수 있습니다.

그러나 이는 콘텐츠를 페이지 아래로 밀어내므로 사용자 경험의 품질을 손상시킬 수 있습니다.

이 레이아웃 이동은 광고 슬롯을 위한 공간을 예약하거나, 광고 슬롯에 대해 가능한 가장 큰 크기를 예약하여 이동을 제거하거나, 과거 데이터를 기반으로 광고 슬롯의 가능한 가장 좋은 크기를 선택하여 완화할 수 있습니다.

동적으로 주입된 콘텐츠

사용자 상호 작용에 대한 응답이 아닌 한 기존 콘텐츠 위에 새 콘텐츠를 삽입하지 마십시오.

이렇게 하면 이미지나 텍스트가 예기치 않게 움직이도록 하지 않고 발생하는 모든 레이아웃 이동이 항상 예상됩니다.

FOIT/FOUT을 유발하는 웹 글꼴

불필요한 레이아웃 이동을 방지하기 위해 auto, swap, block, fallback 및 optional과 같은 사용자 정의 글꼴과 함께 font:display 값을 사용해 보십시오.

레이아웃 이동이 없는지 확인하려면 rel=preload 링크와 함께 font:display를 사용하십시오.

해당 글꼴을 사용하는 모든 요소는 글꼴 자산이 완전히 다운로드될 때까지 숨겨지며, 이를 FOIT(Flash of Invisible Text)라고 합니다.

애니메이션 출처: malthemilthers.com

사용자 정의 글꼴이 로드될 때까지 글꼴 스택에 대체 글꼴이 표시되는 것을 FOUT(Flash of unstyled text)이라고 합니다.

DOM을 업데이트하기 전에 네트워크 응답을 기다리는 작업

레이아웃 변경을 유발하는 속성의 애니메이션에 대해서는 항상 "변환" 애니메이션을 사용하십시오.

Google CLS 점수는 광고를 통해 어떤 영향을 받나요?

CLS를 유발하는 광고를 처리하려면 광고가 표시될 요소의 스타일을 지정해야 합니다.

따라서 div, WordPress의 이미지 또는 비디오 분할 또는 특정 높이 및 너비 측정이 있는 웹사이트 요소의 스타일 을 지정하면 광고가 언급된 치수 내에서만 제한됩니다.

광고가 포함된 요소가 광고를 표시하지 않는 경우 대체 배너 광고 또는 자리 표시자 이미지가 빈 공간을 채울 수 있도록 설정할 수 있습니다.

또는 특정 레이아웃의 경우 광고가 페이지의 오른쪽 또는 왼쪽 여백에 있는 열 상단의 전체 행을 채울 수 있습니다.

페이지가 표시되지 않으면 이동이 없으며 모바일이나 데스크톱에서 차이가 없습니다.

그러나 테마 레이아웃에 따라 다르며 광고 인벤토리에 문제가 있는 경우 테스트해야 합니다.

웹 개발 중에 CLS가 어떻게 미끄러질 수 있습니까?

Google CLS는 개발 ​​단계를 건너뛸 수 있습니다.

다음은 일어날 수 있는 일입니다.

웹 페이지를 렌더링하는 데 필요한 많은 자산은 브라우저의 캐시에 로드됩니다.

다음에 개발자가 개발 중인 페이지를 방문할 때 페이지 요소가 이미 다운로드되었기 때문에 레이아웃 변경을 눈치채지 못할 것입니다.

따라서 현장이나 실험실에서 측정하는 것이 좋습니다.

누적 레이아웃 시프트 테스트

누적 레이아웃 전환 성능 웹 사이트 메트릭은 다음 방법 중 하나로 측정할 수 있습니다.

현장 도구

현장: 페이지와 실제로 상호작용하는 실제 사용자. 다음 필드 도구를 사용하여 측정할 수 있습니다.

Chrome 사용자 경험 보고서

실제 Chrome 사용자가 웹에서 인기 있는 목적지를 경험하는 방법에 대한 사용자 경험 측정항목을 제공합니다.

PageSpeed ​​인사이트

이 도구는 웹 페이지의 내용을 분석하고 해당 페이지를 이전보다 빠르게 만들기 위한 제안을 생성합니다.

Search Console(핵심 Web Vitals 보고서)

Search Console 은 실제 사용 데이터(필드 데이터라고도 함)를 기반으로 페이지 성능을 보여줍니다.

실험 도구

실습에서: 제어된 환경에서 페이지 로드를 시뮬레이션하는 도구를 사용하는 것은 다음 실습 도구를 사용하여 측정할 수 있습니다.

Chrome 개발자 도구

Chrome DevTools를 사용하면 즉석에서 페이지를 편집하고 문제를 신속하게 진단할 수 있으므로 궁극적으로 더 나은 웹사이트를 더 빨리 구축할 수 있습니다.

등대

LightHouse 는 웹 페이지의 품질을 개선하기 위한 자동화된 오픈 소스 도구입니다.

모든 웹 페이지, 공개 또는 인증이 필요한 웹 페이지에 대해 실행할 수 있습니다.

성능, 접근성, 프로그레시브 웹 앱, SEO 등에 대한 감사가 있습니다.

웹페이지 테스트

상세한 최적화 권장 사항과 함께 소비자 연결 속도로 실제 브라우저를 사용하여 전 세계에서 무료 웹 사이트 속도 테스트를 실행하십시오.

web.dev 에 따르면 ; 주의: 랩 도구는 일반적으로 합성 환경에서 페이지를 로드하며 페이지 로드 중에만 레이아웃 이동을 측정합니다.

결과적으로 주어진 페이지에 대해 실습 도구에서 보고한 CLS 값은 실제 사용자가 현장에서 경험하는 것보다 작을 수 있습니다.

누적 레이아웃 이동을 확인하는 빠른 도구

1. Chris Johnson의 Defaced Tool에서 GIF 형식의 CLS를 사용하여 문제가 있는 LS를 식별합니다.

2. 누적 레이아웃 시프트 계산기

CLS 계산의 결함

Google은 CLS 측정항목이 오랫동안 열려 있는 웹페이지를 측정하기에 부적절하여 낮은 점수로 처벌한다는 피드백을 받았습니다.

Google은 CLS 점수 방식을 업데이트하기 위해 세 가지 솔루션을 검토했으므로 이 변경으로 인해 CLS 점수가 나빠지는 것에 대해 걱정할 필요가 없습니다.

CLS 측정을 위한 세션 창

Google은 CLS를 측정하기 위해 세션 창 접근 방식을 사용했습니다.

페이지 요소의 측정은 사용자가 웹 페이지를 아래로 스크롤할 때 도달하는 웹 페이지의 다른 부분에 해당하는 세션 창에서 측정됩니다.

각 세션 창의 총 점수는 누적 레이아웃 이동, 전체 페이지의 총 이동입니다.

무한 스크롤이 있는 웹 페이지 또는 사용자 상호 작용에 느리게 반응하는 사용자 인터페이스 핸들러가 있는 웹 페이지의 3%는 점수가 좋은 평가로 상승하는 것을 볼 수 있습니다.

업데이트로 CLS 점수가 더 정확해짐

특히 오랫동안 열려 있거나 무한 스크롤을 사용하여 그로 인해 부당하게 점수가 매겨진 웹 페이지의 경우 새로운 점수 시스템이 더욱 공정해지면 게시자에게 이점이 됩니다.

핵심 성능 평가 지표가 2021년 5월에 순위 요소가 될 예정이므로 마지막 순간을 만드는 것이 중요한 변경 사항입니다.

결론

CLS(Cumulative Layout Shift)를 이해하면 앞으로 더 나은 사용자 경험을 제공하는 데 도움이 될 것입니다.

메트릭은 UX 개선을 위한 Core Web Vitals의 일부이며 2021년에 순위 신호가 될 예정이므로 사이트에 대한 중요성과 영향을 이해하는 것이 중요합니다.