[TIL] 웹 화면 최적화 방법

📍 Image Lazy Loading

웹 페이지 성능을 향상시키기 위해 사용되는 기술 중 하나로,

웹 페이지에서 이미지를 불러올 때 페이지가 처음 로드될 때 모든 이미지를 동시에 불러오지 않고 필요한 이미지를 필요한 시점에 불러오는 방식임.

즉, 페이지 안에 있는 이미지들이 실제로 화면에 보여져야 할 때 로드되도록 하는 방식으로, 웹 페이지 내에서 바로 불러오지 않고 그 시점을 뒤로 미루는 것임.

이렇게 하면 페이지의 초기 로딩 시간을 단축하고, 사용자 경험을 향상시킬 수 있음. (웹 성능 및 디바이스 내 리소스 활용도 및 이와 연관된 비용을 줄일 수 있음)

🌸 [추가] Lazy Loading이란?

페이지 내에서 사용되는 리소스가 실제로 필요할 때까지 불러오는 그 시점을 미루는 것으로, Image Lazy Loading은 이 방식의 한 종류임.

페이지를 로드하자마자 리소스를 불러오는 기존 방식 대신, 실제로 사용자 화면에 보여질 필요가 있을 때까지 리소스 로딩을 지연함.

해당 방식은 페이지 내의 거의 모든 리소스(SPA내의 JS파일)에 적용 가능함.

이미지 레이지 로딩의 구현 방법

• 이미지 속성 (Attributes)을 사용한 구현 HTML의 <img> 태그에서 loading 속성을 사용하여 이미지 레이지 로딩을 활성화할 수 있음. loading="lazy" 값을 사용하면 해당 이미지가 화면에 표시되기 직전까지 이미지를 로드하지 않음.

  <img src="example.jpg" alt="예시 이미지" loading="lazy">

• Intersection Observer API 사용 Intersection Observer API는 뷰포트와 요소의 교차 영역을 감지하는 데 사용됨. (교차된 타겟 요소의 dataset에 등록된 이미지 주소를 src에 할당하여 로딩하는 방식으로, 이미지 로딩이 완료된 타겟 요소는 관측 요소에서 제한다.) 이미지 레이지 로딩을 구현할 때 이 API를 활용하여 화면에 보이는 이미지만 로드하도록 설정할 수 있음.
  
• JavaScript와 Lazy Loading JavaScript를 사용하여 이미지 레이지 로딩을 구현할 수도 있음. 예를 들어, window.scroll 이벤트를 감지하고 화면에 이미지가 가까워질 때 이미지를 동적으로 로드하는 방식을 사용할 수 있음.
  

Image Lazy Loading의 장점

• 성능향상 웹 사이트의 로딩 시간은 웹 성능 관리 측면에서 중요한 요소 중 하나로, Lazy Loading을 이용하면 초기 페이지 로딩 시 필요로 하는 이미지의 수를 줄일 수 있음. 리소스 요청을 줄이는 것은 곧 이미지를 다운받는 다운로드 바이트 수를 줄이는 것으로, 이는 유저가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것을 의미하며 디바이스가 다른 리소스들을 더 빠르게 처리해서 다운로드하도록 확보하는 것임.
  
• 비용 감소 위에서 이야기한 대역폭 경쟁과도 연결되는 통신 관점 이야기로, 리소스 전달의 경우 전송 바이트 수에 기반하여 청구됨. lazy loading에서 이야기했듯 이 방식을 통해 페이지 내에서 전달할 총 바이트 용량을 줄일 수 있음. 이처럼 네트워크로부터 전송될 바이트의 감소는 전송 비용을 줄일 수 있음.
  

⇒ Lazy loading에 어떤 이미지가 적합한지, 그리고 페이지 초기 로딩 시 얼마나 바이트 용량을 줄일 수 있는 지

Google Lighthouse audit tool을 이용해서 알 수 있으며, ImageKit’s website analyzer는 lazy loading 사용 여부를 알 수 있을 뿐만 아니라

페이지 내에서 크리티컬한 이미지 관련해서도 최적화 용도로도 사용 가능함.

📍 View Transitions API

2023년에 나온 API로, 외부 라이브러리를 사용하지 않고도, 서로 다른 화면 상태 간에 애니메이션 전환을 쉽게 만들 수 있는 매커니즘을 제공하는 동시에

화면 내용을 한 단계로 업데이트 함.

기존의 경우, 외부 라이브러리 없이 해당 효과를 구현해야 하려면 이전화면과 새 콘텐츠의 로그 및 위치를 지정하는 처리를 해야 하고

또 Transition을 위해 이전 상태와 새로운 상태를 또 애니메이션으로 만들어줘야 하며, 이전 콘텐츠와 사용자의 상호작용이 영향이 미치지 않아야 할 뿐만 아니라

Transition이 완료되면 이전 내용을 제거해야 함. 그 외에도 새 콘텐츠와 기존 콘텐츠가 동시에 DOM에 존재하여 발생하는 접근성 문제도 있음.

물론 나온 지 얼마 안 되어서 표준 스펙이 아니기도 하고, 최신 기준 브라우저만 지원하고 있으나 다른 브라우저로 확장될 가능성이 높은 API임.

크롬에서 View Transitions API를 사용하기 위해 아래 링크로 들어가서 따로 설정을 해줘야 함.

chrome://flags/#view-transtion

📍 HTML <picture> 태그

• <img> 요소의 다중 이미지 리소스를 위한 컨테이너를 정의할 때 사용함
  • 뷰포트의 너비에 따라 커지거나, 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줌.
    
• 웹 개발자가 이미지의 리소스를 유연하게 지정할 수 있게 해주므로, 웹 페이지에서 반응형 이미지를 구현하기 위한 HTML5 요소
• 다양한 화면 크기와 해상도에 따라 다른 이미지를 제공하는데에 사용 → 사용자 경험을 개선하고 대역폭을 효과적으로 관리하기 위해 활용

Picture 태그 구조

<picture> 요소는 1개 이상의 <source> 요소와 하나의 <img> 요소로 구성되며,

브라우저는 <source> 요소 중에서 해당 뷰포트와 가장 잘 어울리는 <source> 요소를 사용하여 선택함.

또한 브라우저는 <picture> 내에 선언된 source 요소 중에서 선언된 속성들을 통해 기기에 적합한 이미지를 노출하게 됨.

• source 요소
  • srcset : 이미지 파일 경로
  • media : 지정한 이미지를 표시하기 위한 조건
  • type : 이미지 파일 유형
  • sizes : 이미지 파일 크기

아래와 같은 구조로 <picture> 태그 활용됨

<picture>
  <source srcset="image-small.jpg" media="(max-width: 768px)">
  <source srcset="image-medium.jpg" media="(max-width: 1200px)">
  <img src="image-large.jpg" alt="대체 텍스트">
</picture>

• <source> 요소 <picture> 요소 안에 포함되며, 다른 이미지 소스를 정의합니다. srcset 속성을 사용하여 다양한 이미지 파일과 해당 이미지가 표시되어야 하는 미디어 조건(media condition)을 지정 가능함. 브라우저는 이러한 <source> 요소 중에서 가장 적절한 이미지를 선택하여 표시함. 미디어 조건은 media 속성에 CSS 미디어 쿼리와 유사하게 지정함.
  
• <img> 요소 <picture> 요소 안에 포함되며, <source> 요소에서 지정한 이미지를 렌더링하지 못할 경우 대체할 이미지를 정의함. 이 <img> 요소는 <picture> 요소 안에서 가장 뒤에 위치해야 함.
  

Picture 태그 장점

• Media Query를 CSS에서 일일히 작성할 필요 없이, 웹 브라우저 너비 변화에 맞춰 동적으로 이미지 너비 또한 변경됨.
• <picture> 태그를 지원하지 않는 브라우저에서도, <img> 태그를 통한 지원이 되기 때문에 호환성 문제도 없음.
• 화면 사이즈에 따른 이미지를 제공하므로 응답속도나 비용문제에서도 훨씬 더 유리함.