Core Web Vitals 대응: CLS의 주요 원인인 이미지 및 광고 수정 방법

개시하다

CLS 발생 원인과 관련해서는'이미지의 종횡비를 지정하지 않음','광고'가 주된 원인으로 꼽혔다.(경험담).
우리는 주로 CSS로 처리한다.

CLS 발생의 기본 메커니즘 및 대책

CLS 발생 메커니즘은 다음과 같습니다.

HTML을 읽을 때 높이를 결정하지 못하는 요소(그림이나 광고)가 있습니다. 예를 들어 그림의 URL에서 실제 높이와 너비를 알 수 없습니다.)

이 점에서 컴포넌트의 높이는 0으로 간주됩니다.

HTML 재현 후 실제 요소(이미지 또는 광고)의 로드가 발생하여 높이를 결정한다

원소'삽입'은 원래 0의 높이에서 내용 전체가 이동한 것으로 보인다

대책은 미리에서 얻은 높이를 css로 지정합니다.
:::message warn
이 문장에서 풍격은sacc로 기술한다.(작자의 취향)
:::

CLS 대응~ 이미지 편~

그림은 대부분 터미널에 따라 디스플레이 크기를 바꿉니다. (회전식 지원)

HTML을 통해 이미지의 가로 비율 지정[1]

css에서 회전 스펀지 지원

이런 방법으로 높이를 예약한다.

<!-- 3:2 の比率を指定しておく -->
<img class="article-header__image" alt="魚　タイ　鯛　さばき方　下処理　うろこ　ウロコ取り" width="480" height="320" 
src="https://d17uhz2kob7es4.cloudfront.net/images/pictures/images/000/022/196/shutterstock_260564267-thumb_480.jpg?1617095560">

.article-header {
  &__image {
    width: 100%;
    height: auto;
    max-height: 425px;
    object-fit: contain; // 縦長画像でもサイズを比率を維持して枠にいれる
  }
}

CLS대응~광고편~

애드리브가 가장 일반적이라고 생각해서 거기서 설명해 드리죠.
css의 지정이 없으면 초기 높이가 0이 되기 때문에 광고상자 주변에'최소 이 높이'로 미리 예약하세요.

<div class="responsibe-adsense-wrap">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-xxxxxxxxxxxxx"
       data-ad-slot="xxxxxxxxxxxxxx"
       data-ad-format="rectangle"
       data-full-width-responsive="true"></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

// 広告サイズの想定に関しては
// できる限り大きいもの > 336×280 > 300x250 の優先度を想定
.responsibe-adsense-wrap {
  width: auto;
  min-height: 280px;
  height: auto;

  text-align: center;

  @media screen and ( max-width: 339px ) {
    width: 300px;
    min-height: 250px;
    height: auto;
  }
}

CLS의 필드 데이터 개선 관점에서

①페이지의 표시 속도를 증가시키고 스크롤한 후 머지않아 내용을 표시합니다

②firstView에 광고를 넣지 않음

이런 대응도 수치를 개선할 수 있다.
실제로 구글 문서에서firstView에서도 광고를 사용하지 말라고 권고하고 있다.

최후

이번에는 기본적인 CLS 대책을 소개했다.발생하는 원리는 매우 간단하기 때문에 비교적 이해하기 쉽다.
수익 측면에서 볼 때 GoogleAdmer(GAM)와 Header Bidding 등 광고 기술을 사용하는 경우도 많다고 생각합니다.
제가 운영하는 서비스도 GAM을 사용했어요.
여기에 미리 자바스크립트로 광고 상자의 사이즈를 지정했지만 보고서를 보면 이외의 사이즈의 광고도 대량으로 발송된다.
당사는 보고서에서 빈도가 높은 사이즈를 구하기 위해 최소 사이즈를 결정했습니다.
이 근처에서는 Core Web Vitals와 GAM의 보고서만 정기적으로 보고 조정할 수 있습니다.
좋은 방법 아시는 분 있으면 꼭 알려주세요.

참고 문헌

Optimize Cumulative Layout Shift

각주
Modern best practice ↩︎