Tabla de contenidos
Google을 완전히 행복하게 유지하는 것은 불가능합니다. 저는 오래 전에 포기했지만 다음과 같은 해결해야 할 문제가 있습니다 CLS (누적 레이아웃 시프트).
누적 레이아웃 시프트
누적 레이아웃 이동은 레이아웃의 누적 변경 사항입니다. 이 메트릭은 다음을 분석하기 때문에 중요합니다 시각적 안정성 방문자가 예상치 못한 디자인 변경을 경험하는 빈도도 증가했습니다.
간단히 말해, 로딩 중 페이지 상단에 있는 요소의 변위를 측정하는 것입니다.
낮은 CLS를 달성하면 사이트가 다음과 같이 보장됩니다 nice 동시에 독자가 중요한 탐색 요소를 놓치거나 위치를 잃어버릴 수 있는 성가신 움직임을 방지합니다.
CLS가 0.1을 초과하지 않으면 좋은 사용자 경험으로 간주되며 0.25까지는 개선이 필요하며 그 이후부터는 나쁜 점수로 간주됩니다. 아시다시피 이것은 여러 가지 방법으로 측정할 수 있습니다. 가장 일반적으로 사용되는 방법은 다음과 같습니다. PageSpeed Insights.
문서에서 언급했듯이 Core Web Vitals, 잘못된 CLS는 크기를 알 수 없는 이미지나 동영상, 대체 글꼴보다 크거나 작게 표시되는 글꼴, 동적으로 크기가 변경되는 타사 광고나 위젯 또는 애니메이션 효과 등 다양한 요소로 인해 발생할 수 있습니다.
역설적이게도, CLS를 방해하는 요소 중 일부는 구글 애드센스 광고입니다. 특히 자동 공지 사항 Google이 모든 것을 결정하도록 내버려 둡니다(권장하지 않음, 자동 광고는 글머리 기호 및/또는 앵커 광고만 표시하는 것이 가장 좋습니다). 심지어 로딩 속도를 완전히 망치는 경우도 있습니다.
변위 감지 방법
문제의 핵심은 정확히 무엇을 찾아야 하고 어떻게 찾아야 할까요? 로딩 중에 크기가 변하거나 이동하는 모든 것입니다.
이제 애드센스 문제를 해결하려고 노력 중이므로 CLS에 부담을 줄 수 있는 나머지 요소를 살펴볼 수 있습니다. 이를 수행하는 방법에는 여러 가지가 있으며 다음은 몇 가지입니다.
보기
가장 소박한 방법은 눈으로 간단하게 관찰하는 것입니다. 변위가 눈에 띄면 즉시 볼 수 있지만 면밀한 검사가 필요한 덜 눈에 띄는 움직임이 있습니다.
En 검색 콘솔
GSC의 ‘상위 웹 메트릭’에서 CLS 및 LCP 문제가 있는 URL 목록을 가져와 하나씩 자세히 살펴볼 수 있습니다.
누적 레이아웃 시프트 디버거
Cumulative Layout Shift Debugger 는 분석하려는 URL을 입력하면 모바일 및 데스크톱 버전의 모든 디자인 변경 사항을 보여주는 애니메이션 GIF를 생성하는 웹사이트입니다.
Chrome 엔지니어가 만든 이 도구는 CLS 문제를 찾는 데 가장 유용한 도구 중 하나입니다.
페이지의 대부분의 텍스트가 강조 표시되어 있다면 글꼴로 인해 레이아웃이 변경된 것일 수 있습니다.
레이아웃 시프트 GIF 생성기
Layout Shift GIF Generator 는 동일한 작업을 수행하는 또 다른 웹사이트로, 모바일 및 데스크톱 버전의 변위값이 포함된 GIF를 생성합니다. 결과를 비교하기 위해 사용해 볼 수 있습니다. 각 도구의 측정값에는 항상 약간의 차이가 있으며 한 도구에서 다른 도구가 표시할 수 없거나 특정 시간에 감지하지 못하는 것을 찾을 수 있습니다.
CLS 비주얼라이저
가장 간단한 도구 중 하나 인이 도구는 제가 최고의 변위를 잡을 수 있었던 도구입니다.
CLS Visualizer 는 이름에서 알 수 있듯이 페이지의 누적 레이아웃 시프트 지표를 시각화하여 어떤 요소가 어떻게 변화하고 있는지 정확하게 보여 주는 매우 유용한 확장 기능입니다. 이 도구는 기기, 브라우저, 화면 해상도 또는 연결 유형에 따라 데이터를 제공하는 실습용 도구이기도 합니다.
확장 프로그램을 활성화하면 CLS 측정값이 목록으로 표시되며, 각 측정값을 클릭하면 원인이 되는 요소의 애니메이션이 빨간색으로 표시됩니다.
이 확장 프로그램 덕분에 많은 페이지에서 CLS를 제로로 만들 수 있었습니다. 원인이 너무 많아서 서두르지 않고 URL을 검토하기 위해 설치해 두었습니다.
Chrome 개발자 도구로 사이트 로딩 속도 변경
크롬 개발자 도구는 흥미로운 가능성을 제공하는데, 그중 가장 유용한 기능 중 하나는 페이지가 로드되는 대역폭을 줄여 디자인 변경이 언제 발생하고 어떤 요소가 영향을 미치는지 명확하게 확인할 수 있는 옵션입니다.
이렇게 하려면 브라우저에서 Chrome 개발자 도구를 열고 웹사이트를 마우스 오른쪽 버튼으로 클릭한 다음 네트워크에서 이미지에 표시된 와이파이 아이콘을 찾으면 그 옆에 사용자 지정 속도를 추가할 수 있는 드롭다운이 있습니다.
새 프로필을 만들고 100Kb 이하를 추가하여 ‘슬로우 모션’으로 테스트합니다.
이제 인터넷이 빠른 속도로 실행되던 시절의 속도로 서핑을 하면 로딩 중에 문제를 일으킬 수 있는 요소를 훨씬 쉽게 파악할 수 있습니다.
렌더링
Chrome 개발자 도구의 레이아웃 이동 영역에서 페이지를 실시간으로 탐색할 때 레이아웃 변경 사항이 파란색으로 강조 표시되는 것도 확인할 수 있습니다.
디자인 변경 영역을 활성화하는 단계는 다음과 같습니다:
콘솔에서 “렌더링” 또는 영어로 된 경우 “렌더링”을 검색합니다.
렌더링 지역 확인란과 시도하려는 다른 확인란을 선택합니다.디자인 변경 영역을 활성화하는 단계는 다음과 같습니다:콘솔에서 “렌더링” 또는 영어로 된 경우 “렌더링”을 검색합니다.렌더링 지역 확인란과 시도하려는 다른 확인란을 선택합니다.
이제 페이지를 탐색할 때 디자인 변경 사항이 파란색으로 강조 표시됩니다.
브라우저 확장 프로그램 사용
Chrome에서 확장 프로그램을 설치할 수 있습니다 CLS Checker – Journey Further 를 클릭하고 구두점으로 가득 찬 모든 URL을 테스트하세요. 또한 확장 프로그램은 빨간색 태그 형태로 힌트를 제공하고 요소 목록과 해당 요소가 사용하는 CLS를 표시합니다. “Toogle”을 클릭하면 해당 요소가 강조 표시됩니다. 제 경우에는 이미 애드 센스 광고 문제를 해결했기 때문에 하나만 나타납니다.
웹페이지 테스트
테스트 실행을 수행할 수 있는 다른 측정 사이트는 다음과 같습니다. webpagetest.org 를 클릭하고 생성된 동영상과 애니메이션 GIF를 볼 수 있습니다.
동영상을 일시 정지하면 작은 변위를 더 쉽게 찾을 수 있습니다.
자세히 보면 메뉴 항목과 제목 및 텍스트가 글꼴 크기 및/또는 배치 변경으로 인해 오른쪽으로 약간 이동했지만 제목 위의 광고 공간은 이미 예약되어 있으므로 콘텐츠가 아래로 이동하지 않습니다. H1의 크기를 약간 줄이고 함께 제공되는 텍스트의 래핑을 수정하여 해결했습니다.
하지만 이는 다른 문제이므로 광고의 동작을 다루겠습니다.
광고 차단 공간 예약을 위한 솔루션
가장 빠르고 좋은 해결책을 찾던 중 각 광고 블록 주위의 래퍼(div)에 최소 높이 값을 추가하여 해당 공간을 확보하고 로딩 후 스크롤을 방지하는 것이 가장 좋은 해결책이라는 것을 알게 되었습니다.
그러나 클래스를 사용하여 이 CSS 속성을 가리키는 것만으로는 충분하지 않고 래퍼에 ID를 사용하는 것만으로는 충분하지 않은 것 같습니다. 알 수 없는 이유로 Google 애드센스 자바스크립트가 부모 객체에서 최소 높이 지시문을 제거하는 것 같습니다. 그러나 ID가 CSS 타겟팅에 사용되는 경우에는 제거되지 않습니다.
이는 다음과 같이 설명됩니다 여기 요약되고 어느 정도 더 자세한 정보 를 사용하는 것이 좋습니다. 이 솔루션은 모든 블록을 확인해야 하는 번거로움이 있었기 때문에 저에게 적합한 대안을 찾을 때까지 계속해서 대안을 찾았습니다 Ad Inserter. 이렇게 단계를 거쳤습니다.
적응형 광고를 고정 크기로 변경
가장 먼저 적응형 광고 블록 사용을 중단했습니다. 모든 블록을 고정 크기로 변경했습니다.
이 결정은 사례별로 연구하고 평가해야 합니다.
Google은 맞춤 설정 광고가 다양한 크기를 표시할 수 있기 때문에 더 많은 수익을 창출한다고 주장하지만, 이는 매우 탄력적이며 시나리오에 따라 달라질 수 있습니다. 가장 인기 있는 크기를 선택하면 항상 광고가 게재됩니다.
크기 최적화 비활성화
블록의 크기는 이미 고정되어 있지만 Google이 모바일 광고의 크기를 자체적으로 결정할 수 있도록 허용하는 옵션을 비활성화해야 합니다. 이 옵션은 애드센스 관리의 광고/글로벌 설정에서 찾을 수 있습니다.
이렇게 하면 수작업으로 배치한 광고가 남는 경우를 방지할 수 있습니다. 어쨌든 크기가 고정되어 있다고 해서 더 이상 반응하지 않는다는 의미는 아닙니다.
광고 삽입기로 광고 공간 예약하기
광고 삽입기는 다른 콘텐츠를 추가하는 데에도 사용할 수 있는 광고 관리를 위한 최고의 플러그인이라고 생각합니다.
각 광고의 공간을 예약하려면 ‘디스플레이’로 이동하여 각 블록의 너비와 높이를 정의하기만 하면 됩니다.
사용하시는 경우 PRO 버전, 지연 부하를 설정할 수도 있는데, 이 역시 CLS를 다소 완화하는 데 도움이 되는 경향이 있습니다.
몇 가지 고려 사항
애드센스 공간을 예약하면 해당 크기로 광고가 게재되지 않거나 사이트에 광고주가 없어 광고를 게재할 수 없는 경우 예약한 공간만큼의 빈 공간이 생길 수 있다는 단점이 있습니다.
광고 삽입기에서는 서버 측 삽입물의 경우에만 코드를 사용하여 높이를 직접 정의할 수 있습니다 사용자 지정 CSS .
광고의 높이는 광고 코드에 의해 정의됩니다. 적응형 광고 코드는 사용 가능한 공간에 따라 광고의 높이를 설정할 수 있습니다.
애드센스 등 일부 광고 네트워크에서는 사용 가능한 공간보다 작은 광고를 게재할 수도 있습니다. 광고 삽입기에 정의된 블록 높이는 삽입된 블록의 높이, 즉 블록을 감싸는 div의 높이를 의미합니다. 광고를 위해 예약된 공간입니다. 예약할 때 다음과 같은 일이 발생할 수 있습니다:
- 광고의 높이가 예약된 공간의 높이(블록 높이)와 동일한 경우 디자인은 변경되지 않으며 CLS에 영향을 미치지 않습니다.
- 광고의 높이가 예약된 공간의 높이(블록 높이)보다 큰 경우 광고를 수용하기 위해 디자인이 아래쪽으로 이동하여 CLS에 영향을 줄 수 있습니다.
- 광고 높이가 예약 공간 높이(블록 높이)보다 작은 경우 광고 아래에 빈 공간이 생기지만 레이아웃은 변경되지 않으며 CLS에 영향을 미치지 않습니다.
애드센스 적응형 광고 코드와 같은 일부 광고 코드는 기본 컨테이너의 높이를 재정의할 수 있습니다. 이 경우 블록 높이가 재정의되고 적용되지 않습니다.
즉, 디자인 변경을 최소화하여 긴급하게 해결해야 하는 CLS 문제의 경우, 가장 빠른 방법은 가능한 한 고정 광고 크기를 사용하는 것입니다.
이미지에 누락된 치수가 없는지 확인하는 것도 여러 가지 방법으로 해결할 수 있습니다. 몇 가지 빠르고 쉬운 방법은 다음과 같습니다 Perfmatters (플러그인 추천) o WP Rocket (둘 다 유료입니다).
또는 플러그인 Litespeed Cache Litespeed 서버에서 블로그를 호스팅하는 경우.
모든 것이 순조롭게 진행되었다면 몇 시간 후 현장 보고서에서 CLS가 떨어지고 며칠 후 실험실 보고서에서 다음과 같은 결과를 확인할 수 있습니다 PageSpeed Insights.
