O.D.C Hompage 의 이미지 최적화

동아리 홈페이지를 제작하고 (https://friendly-snyder-4bece3.netlify.app/#/)

여러 개선점이 많이 보였지만, 가장 두드러진 것은 이미지 로딩 속도였다.

local 에서 개발할 때는 보이지 않던 문제점이 netlify로 배포를 하니 정도가 심했다.

 

유저들이 웹사이트를 보지 않는 가장 첫 번째 이유라고 생각했기에..

당시 한참 검색을 해서 Sprites 라이브러리, Skeleton 라이브러리, CDN, 리액트 쿼리 등 여러 방법을 알았는데,

최근에야 웹팟장님 블로그에서 좋은 글을 보았다.. (하단 링크 참조)

 

기본적인 해결책으로는 다음과 같은 방법이 있다

 

• 이미지 원본 Resize
• jpg (실사진) / png (일러스트) 구분
• 이미지 고정값 부여
• 여러 버전의 이미지 제공 (img 태그의 secret 속성)
• Lazy Loading (img 태그의 loading 속성)

 

이 중에서 Resize만 해주었는데도, 눈에 띄게 향상된 결과를 확인할 수 있었다

 

Before Resizing

After Resizing

 

img-incollege1.png 의 경우,

용량이 4.7MB 가 79B로 60배 가량 줄었고

로딩 속도는 35배 가량 빨라짐을 확인할 수 있었다

 

---

 

https://m.blog.naver.com/PostView.naver?blogId=gytks4&logNo=222489861419&navType=by 

[Web] 웹 성능을 위한 img 태그 최적화

https://velog.io/@hustle-dev/%EC%9B%B9-%EC%84%B1%EB%8A%A5%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94

웹 성능을 위한 이미지 최적화

https://www.affde.com/ko/five-reasons-people-leave-your-website.html

사람들이 웹사이트를 떠나는 5가지 이유 - Affde 마케팅