Image lazyload(with lazysizes)
이미지가 너무커서 호스팅에 옮길때 환장하게 느린경우가 발생했다.
오늘 배운 이미지 로딩중에 사이즈 줄여버리기
https://github.com/aFarkas/lazysizes
GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more,
High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without...
github.com
1. CDN 추가하기
https://cdnjs.com/libraries/lazysizes
lazysizes - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets). - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, se
cdnjs.com
2. 깃허브에 나온대로 class="lazyload"
3. 원하는 이미지경로에 data-src
data-src="images/placeholder.png"4. 이미지가 로드되는동안 보여질 placeholder를 src에 넣어주면 끝
나는 검정색으로 넣었는데 흰색도가능함
검정 : https://place-hold.it/10x10/000/000
흰색 : https://place-hold.it/10x10/fff/fff
최종
<img src="/images/placeholder.jpg" data-src="images/ollies1.jpeg" class="lazyload">
깃허브 사이트가면 팬시한거 더많은데 우선 기본적인것만 이렇게하면 속도 오짐