이미지에 대한 CLS 모범 사례

Google이 핵심 Web Vital 지표를 알고리즘에 도입하기 위한 6월 목표에 가까워짐에 따라 커뮤니티가 예상할 수 있는 것을 파악하도록 돕는 것이 좋을 것이라고 생각했습니다.

3가지 핵심 Web Vitals가 있습니다: LCP (가장 큰 콘텐츠가 포함된 페인트), CLS (누적 레이아웃 이동), FID (첫 번째 입력 지연). 각각에 대해 더 자세히 살펴볼 계획이지만, 사용하고 구현하기 쉽기 때문에 이미지부터 시작하는 것이 좋겠다고 생각했습니다.

먼저 CLS가 실제로 무엇인지에 대해 이야기해 보겠습니다. 구글에 따르면:

CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

레이아웃 이동은 페이지의 요소가 프레임 렌더링 중에 위치를 이동할 때 발생하며 사용자 경험에 상당한 영향을 미칠 수 있습니다. 페이지 로드 중 또는 이후에 콘텐츠가 점프하는 일부 웹사이트에서 자주 볼 수 있습니다.

레이아웃 변경의 가장 큰 원인 중 하나는 이미지입니다.
이 기사를 읽는 대부분의 사람들이 알겠지만 반응형 웹 디자인 패턴이 등장하기 전에는 이미지에 width 및 height 치수를 추가하는 것이 항상 모범 사례였습니다.

반응형 웹에 이어 정적width 및 height 속성을 제거하고 이미지를 보다 유동적으로 처리하는 데 중점을 두는 것이 좋습니다.

img {
  height: auto;
  max-width: 100%;
}

위의 규칙은 이미지가 변화하는window 크기나 장치 크기에 적절하게 반응하도록 하기 위해 셀 수 없이 많이 사용되었습니다.

CLS의 도입으로 이제 최소한의 레이아웃 이동/재배치로 더 빠른 렌더링을 허용하기 위해 이미지를 약간 다르게 처리하라는 조언을 받았습니다.

Lighthouse 감사를 실행할 때 CLS가 0에 가깝게 유지되도록 하는 몇 가지 지침은 다음과 같습니다.

1. 모든 이미지에 너비와 높이 속성이 있는지 확인

<img src="https://source.unsplash.com/1600x900/?nature" width="1600" height="900" alt="Waterfall" />

브라우저가 이러한 속성으로 하는 일은 반응형 CSS 규칙 사촌과 함께 종횡비를 계산하는 것입니다.

img {
 aspect-ratio: attr(width) / attr(height);
 height: auto;
 max-width: 100%;
}

위의 내용을 통해 브라우저는 이미지가 페이지에 배치되는 방식과 그렇게 하기 위해 예약해야 하는 공간을 이해할 수 있습니다. 이제 브라우저 스타일시트가 이를 처리하므로 CSS에 aspect-ratio 속성을 추가할 필요가 없습니다.

2. 반응형 이미지 기술로 너비와 높이를 처리합니다.

srcset 또는 <picture>를 사용하여 반응형 이미지가 있는 경우 이미지의 종횡비를 계산하고 종횡비를 width 및 height 속성으로 추가합니다.

<img srcset="large.jpg  1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" src="small.jpg"
alt="A rad wolf" width="16" height="9" />

이것은 브라우저가 종횡비를 이해하고 Lighthouse 감사를 통과하며 여전히 반응형 크기를 사용하여 다양한 중단점에서 이미지를 처리하는 데 도움이 됩니다.

3. 모든 이미지가 LazyLoaded인지 확인합니다.

이를 처리하는 여러 기술이 있지만 lazy="loaded"속성을 사용하면 modern browsers 에서 도움이 될 수 있습니다.

<img src="https://source.unsplash.com/1600x900/?nature" width="1600" height="900" alt="Waterfall" loading="lazy" />

또한 이really great library를 사용하여 전체적이고 잘 지원되는 방식으로 이미지 로드를 처리하거나 LQIP 기술을 수동으로 구현하는 것을 볼 수 있습니다.

4. 스크롤 없이 볼 수 있는 부분에 이미지 미리 로드

또 다른 유용한 기술은 스크롤 없이 볼 수 있는 부분에 배치된 이미지를 미리 로드하는 것입니다. Preload에는 웹 전체에 relatively okay support이 있지만 .

<link rel="preload" as="image" href="/path/to/image" />

이를 통해 브라우저는 훨씬 더 높은 우선 순위로 이미지를 캐시하고 요청할 수 있으므로 브라우저에 훨씬 더 빨리 도착할 수 있습니다.

미리 로드하려는 리소스와 관련하여 더 정확한 유형 속성을 지정할 수도 있습니다.

<link rel="preload" as="image" href="/path/to/image" type="image/webp" />

5. 최신 형식의 이미지를 제공하고 있는지 확인

이것은 관리하기가 약간 어려울 수 있지만 일부 CDN은 특정 형식으로 이미지를 즉석에서 설정하는 유용한 쿼리 문자열을 제공합니다. WebP는 아마도 가장 일반적이지만 더 많은 최적화를 제공할 수 있는 AVIF와 같은 다른 형식이 있습니다. 보고 싶다면 Cloudinary에 훌륭한 comparison chart이 있습니다.

기타 사소한 팁과 요령도 다음과 같습니다.

CDN을 통해 이미지 제공

이미지가 서버에서 적절하게 캐시되었는지 확인

이미지 크기가 올바른지 확인합니다. 즉, 300x150 슬롯에서 3000x1500 이미지를 렌더링하지 않습니다.

이 정보가 도움이 되기를 바랍니다. 질문이 있는 경우 언제든지 touch with me over email에 들어가십시오. 무료 컨설팅 슬롯을 제공합니다!