Google 엔지니어가 '웹 사이트의 이미지 로딩'을 최적화하는 방법을 설명

 

웹에 접속할 때, 이미지 로딩이 느린 경우를 한 번쯤은 겪어보셨을 것입니다. 이미지는 웹 사이트의 성능을 좌우하는 중요한 요소중 하나이며, 웹 개발 시 주의해야 합니다. 그런 이미지를 웹 사이트에서 작업할 때, 최적화하는 방법을 Google 엔지니어 Malte Ubl 씨가 해설하고 있습니다.

Maximally optimizing image loading for the web in 2021

Maximally optimizing image loading for the web in 2021

◆ img 요소에 width와 height를 지정하는
화면 비율을 유지하면서 이미지 크기를 변경하려면 「style」 요소에 「max-width : 100%」나 「height : auto」라고 지정하는 방법이 자주 사용됩니다. 이 방법 외에도 「img」 요소에 「width」와 「height」 속성을 지정하는 것이, 웹 브라우저가 이미지를 다운로드하기 전에 이미지 위치를 확보할 수 있기 때문에, 레이아웃 붕괴의 지표인 CLS를 개선할 수 있습니다.

 

Cumulative Layout Shift (CLS)

◆ 「content-visibility」 속성
CSS 속성의 content-visibility를 지정하는 것만으로도 이미지 로딩이 필요한 시점까지 지연시킬 수 있고, CPU 리소스 사용량을 최적화할 수 있습니다. 또한 content-visibility 속성을 지정하는 것 만으로는 CLS를 악화시킬 수 있으므로 contain-intrinsic-size 속성으로 요소의 사이즈를 브라우저에 알려줄 필요가 있습니다. 이 경우, img 요소에 width와 height를 지정하는 것과는 달리, 화면 비율도 지정해야 합니다.

 

◆ AVIF
AVIF는 현재 Chromium 브라우저만 기본적으로 지원하는 이미지 포맷이며, JPEG보다 일관되게 높은 성능을 가진다고 합니다. AVIF를 사용하는 경우 「picture」 요소를 이용하여 다음과 같이 코드를 작성합니다. picture 요소 자체는 레이아웃을 갖고 있지 않고, 실제로 렌더링 되는 것은 img 요소라고 합니다.

 

또한 AVIF를 서버 측에서 인코딩할 수 있는 라이브러리로 sharp 등이 있다는 것.

lovell/sharp

 

◆ 이미지 URL에 해시값을 포함
이미지 URL에 해시값을 포함하여 이미지를 갱신할 때, 해시값을 변경하도록 해두면 이미지 캐시의 유효기간을 무기한으로 설정할 수 있습니다.

◆ 지연 로드
img 요소에 「loading ="lazy"」라고 해두면, 이미지 로딩을 실제로 이미지가 표시될 때까지 지연시킬 수 있습니다.

◆ 디코딩 처리의 비 동기화
img 요소에 「decoding ="async"」로 지정하여 이미지 디코딩 처리를 백그라운드로 돌릴 수 있습니다. 다른 내용의 처리를 방해하지 않고 이미지를 로드할 수 있습니다.

◆ 플레이스 홀더로서 흐림 처리를 이용
img 요소의 「background-image」 속성에 흐릿한 이미지를 지정하면 실제 이미지가 표시될 때까지의 플레이스 홀더 이미지로서 JavaScript 없이 사용할 수 있습니다. 또한, 실제 이미지의 URI를 SVG 이미지의 URI로 감싸는 것으로, 흐림 처리를 CSS 수준이 아닌 SVG 수준에서 이루어 지므로 CPU 리소스를 절약할 수 있다는 것.

또한 이러한 이미지 로딩을 최적화하면서 블로그를 개발하는 사람들을 위해 Google이 GitHub에서 템플릿을 공개하고 있습니다.

GitHub - google / eleventy-high-performance-blog : A high performance blog template for the 11ty static site generator.

google/eleventy-high-performance-blog