22.06.28 회고(image lazy loading)

Facts(사실/ 객관)

 

---

Feelings(느낌,주관)

 

 

---

Findings(배운점)

1. image lazy loading 

1-1.  what is image lazy loading ? 

: 페이지 안의 이미지들이 실제로 보여질 때 이미지를 로드하는 기법 

-> 바로 로딩을 하지 않고 실제로 필요할 때로 로딩 시점을 미루는 것 

1-2.  why lazy loading ? 

1. 성능향상 - 웹사이트 로딩 시간 줄이기

• 초기 로딩 시 필요로 한 이미지 수를 줄일 수 있다.
• 리소스 요청을 줄이는 것은 곧 다운로드 바이트를 줄이는 것이며 이는 유저가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것임
•  절약된 리소스로 다른 리소스를 더 빨리 처리 가능 -> 유저는 페이지를 더 빨리 이용 가능 

2. 비용감소 - 통신비용 

•  이미지 전달 또는 다른 전달할 무언가는 주로 전송 바이트수에 기반하여 청구
• 이미지가 보여지지 않으면 로딩 하지 않으므로 페이지 내 전달할 총 바이트 용량을 줄일 수 있음

 

 

참고자료 

1. 웹 성능 최적화를 위한 Image Lazy Loading 기법

 

 

2. React-dev-tool 활용 성능 측정

참고자료

1. https://velog.io/@shroad1802/React-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94

2. https://velog.io/@iamjoo/react-profiler-%EC%84%B1%EB%8A%A5%ED%85%8C%EC%8A%A4%ED%8A%B8-1%ED%9A%8C%EC%B0%A8

https://jbee.io/react/error-declarative-handling-1/

React에서 선언적으로 비동기 다루기