여러 프로젝트를 작업하다 보니 렌더링 이슈가 생각보다 많이 발생하고 어떻게 하면 렌더링 이슈를 조금이라도 더 줄일 수 있을까 고민하게 되는데요. 해당 웹 페이지 성능에 영향을 끼치는 것 중 하나인 이미지를 최적화하여 렌더링 이슈를 줄여보고자 합니다.

이미지는 웹 사이트 내 많은 용량을 차지할 수밖에 없고 실제 통계에서도 이미지가 상당 부분을 차지합니다.

[출처] https://wp-rocket.me/blog/best-practice-guide-reducing-website-page-weight/

이미지를 최적화한다면 브라우저가 다운로드해야 하는 Byte가 줄어들어 렌더링 이슈를 어느 정도 해결하기도 하고 구글이 검색 순위를 결정할 때에도 영향을 미칩니다.

그렇다면 이미지를 어떻게 최적화할까?

• 이미지 width 값 조절

  • 이미지 사이즈만 줄여도 Byte가 줄어듦

• 최적화된 이미지 포맷 사용

  • JPEG, WebP, AVIF 중 WebP 포맷이 대체로 크기가 작음
  • WebP는 구글에서 웹 내의 트래픽 감소와 로딩 속도 감축을 위해 발표한 포맷
  • AVIF는 JPEG보다 높은 성능을 가지고 있지만 지원하는 브라우저가 한정된 포맷, 서버 측에서 인코딩 하려면 sharp등 라이브러리 사용

• img 태그에 width, height값 선언

  • 크기가 정해지지 않은 이미지는 Reflow를 발생시키기 때문에 값을 미리 선언하여 이미지가 Load 되는 동안 브라우저가 필요한 공간만 차지할 수 있도록 함

  • +) 살짝 주제를 벗어난 이야기지만, 이미지가 상대적으로 다른 컴포넌트보다 늦게 로드되면서 UX적으로도 불편함을 야기하게 되어 크기는 미리 선언하는 것을 권장

    

    [출처] https://wit.nts-corp.com/2020/12/28/6240 상단의 이미지가 늦게 로드되면서 잘못된 클릭을 유도하는 등 사용자 경험 측면에서의 문제가 발생

    • Placeholder를 사용하여 이미지 블러 처리(선언된 width, height 값으로 실제 이미지 불러오기 전 레이아웃 표시)
      • img 태그의 background-image 속성에 블러 이미지를 지정하여 실제 이미지 로드 전까지 placeholder로 이미지 영역에 노출 (이전 블로그 중 ‘스켈레톤 UI 구현’에서 이를 활용할 수 있을 듯하다)

• Image CDN 사용

  • image CDN으로 전환하면 이미지 크기를 40~80% 정도 줄일 수 있음

  • image CDN에서 로드된 이미지의 경우 image URL에서 크기나 형식, 포맷을 매개변수로 나타내어 이미지를 변형 가능

    

    [출처] https://web.dev/i18n/ko/image-cdns

• CSS Sprite 기법 사용

  • 서버에서 아이콘이나 버튼 등의 이미지를 가져오는 경우, 여러 이미지를 받아오지 않고 한 이미지 파일로 만든 후 position 값으로 각각 이미지를 불러오는 기법

  div.parent {
  	background: url('/image/1.jpg');
  }
  
  div.children-01 {
  	background-position: 0 0;
  }
  
  div.children-02 {
  	background-position: 0 -15px;
  }
  
  div.children-03 {
  	background-position: 0 -30px;
  }
  

  • 말 그대로 하나의 이미지에서 잘라내어 가져오는 방법

• Lazy Loading 사용(지연 로드)

  • 페이지 로드 시 모든 이미지를 로드하지 않고 먼저 필요한 자원만 서버에 요청하여 받아오는 방법
  • img 태그 내 속성은 lazy-loading을 지원하고 실제 사용 시 loading 속성 값을 사용
    • <img loading="lazy"/>
  • 랜딩 페이지에서는 해당 속성을 사용하지 않아야 함 (필수로 불러오는 값)

이미지만이 아니더라도 웹 사이트의 성능을 향상시킬 수 있는 방법은 많습니다. 성능을 높일 수 있는 여러 방법론을 통해 웹 사이트를 개선하고 UI/UX 측면으로 바라보는 눈을 길러 사용자 친화적인 웹 사이트를 만들어가면 좋을 것 같습니다.