[DevTalk] 웹페이지에서 60%이상 차지하는 이미지 로딩 속도 줄이는 방법

DevTalk 이란?

• APPS 정기세미나에서, 매주 새로운 유익한 개발 관련 토픽을 선정하여 약 10분간 진행하는 기술 세미나

1. 어떤 내용을 발표하였는가

1.1 로딩 속도가 중요한 이유?

1.2 로딩 속도에 영향을 주는 일반적인 요소는?

1.3 이미지가 얼마나 차지하는데?

1.4 이미지 최적화를 어떻게 할 것인가?

1.5 긴 로딩으로 인한 사용자 이탈막기 (번외)

1.6 다양한 속도 측정 도구들도 사용해보자

1.1 로딩 속도가 중요한 이유?

• 로딩 속도가 느릴수록 아래 이슈가 발생한다
  • 이탈률 증가
  • 검색 순위 하향
• 스웨덴 연구, Google 소비자 통계 에 따르면, 결론적으로

  • 로딩 시간을 2초나 3초 안으로 억제하여, 접속자들을 해당 페이지 안에 머물게 해야한다!

    

1.2 로딩 속도에 영향을 주는 요소는?

• 최적화되지 않은 대형 이미지 사용 👈 이번 DevTalk 핵심 키워드
• 캐싱이 느리거나 없는 경우
  • → 캐싱 플러그인을 사용하여 해결가능
• 무거운 스크립트/코드
  • 커스텀 코드나 플러그인을 통해 너무 많은 기능을 추가한 경우
• 호스팅 불량
  • 속도가 느리거나 신뢰할 수 없는 호스팅 서비스를 사용하는 경우
• 리다이렉트
  • 브라우저에 한 URL에서 다른 URL로 이동하도록 지시하는 경우
  • → 웹사이트가 커지면 리다이렉트가 불가피하지만 최소한으로 유지하기

1.3 이미지가 얼마나 차지하는데?

• HTTP 아카이브 연구 결과에 의하면,

  • 평균 웹사이트의 반 이상이 이미지로 이루어져 있고, 다른 콘텐츠에 비해 용량도 월등히 높다. 🤯😱

    

1.4 이미지 최적화를 하는 3가지 방법 (feat. 구현방법)

• 1) WebP & AVIF 포맷의 이미지를 사용하자

  • WebP

    • 구글에서 만든 웹에 최적화된 이미지 포맷

    • JPEG와 같은 화질을 유지하면서 파일 용량 감소

    • 카카오톡 이모티콘, 넷플릭스, 아마존, 핀터레스트 등과 같은 큰 기업들의 웹 사이트들은 이미지를

      WebP로 전환하여 웹사이트 속도를 향상 중

  • AVIF

    • 동영상 압축 기술을 이미지에 적용한 것
    • 높은 압축률과 풍부한 색상 표현력 제공
    • but, 일부 구현 브라우저나 이미지 편집 소프트웨어에서 지원되지 않을 수도 있음

• 2) 레이지로딩 (lazy loading)

  • 페이지를 불러 올 때의 필요한 이미지를 전부 불러오는 것이 아닌 스크롤이 내려가면서 화면에하나 하나씩 이미지를 로드하는 방식

    

• 3) 프리로딩 (Pre-loading)

  • 우선순위를 부여하여 특정 리소스를 빠르게 로딩하고 대기시키는 방식

    

1.5 긴 로딩으로 인한 사용자 이탈막기 (번외)

• 1) 사용자에게 로딩을 납득할 수 있는 충분한 정보를 제공

  • 스피너 로딩, 프로그래스 바 로딩, 스켈레톤 로딩 등

• 2) 속임수 사용하기

• 3) 기억에 남을 독특하고 즐거운 긍정적 경험 느끼게 하기

  

1.6 다양한 속도 측정 도구들도 사용해보자

1. 속도 측정의 정석 ‘Google PageSpeed Insights’
2. 그 외 사이트의 성능을 측정하고 분석하는 온라인 도구

• https://gtmetrix.com/
• https://www.webpagetest.org/
• https://tools.pingdom.com/

---

마치며

• 이미지 최적화는 웹사이트 성능의 핵심 부분
• 이러한 이점이 있으니, 이미지 최적화에도 관심을 가져보자!
  • 더 나은 사용자 경험 개선
  • 로딩 시간 단축 → SEO 순위에도 긍정적인 영향
  • 검색 엔진 순위 향상