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 다양한 속도 측정 도구들도 사용해보자
- 속도 측정의 정석 ‘Google PageSpeed Insights’
- 그 외 사이트의 성능을 측정하고 분석하는 온라인 도구
마치며
- 이미지 최적화는 웹사이트 성능의 핵심 부분
- 이러한 이점이 있으니, 이미지 최적화에도 관심을 가져보자!
- 더 나은 사용자 경험 개선
- 로딩 시간 단축 → SEO 순위에도 긍정적인 영향
- 검색 엔진 순위 향상