[performance] 성능 최적화 이미지 최적화
Performance Optimization - 성능 최적화
성능 최적화? 필요한 이유는 무엇일까욥
페이지가 로딩되는 속도가 느릴수록 사용자의 이탈률이 늘어날 것이다 → 수익이 감소한다, 즉 성능 최적화로 페이지 로딩 속도를 줄여 사용자가 떠나지 않도록 해서 수익을 증대할 수 있게 된다.
? 그렇다면 웹 성능을 결정하는 요소는 ?
- 로딩성능 : 리소스를 불러오는 성능
- 렌더링 성능 : 불러온 리소스를 화면에 보여주는 성능 → 어떻게 리소스를 불러오고 빠르게 보여줄 것인가!
💡 Lighthouse 사용해보기
사용해본 적은 있지만 제대로 알고 사용하지 않았던 lighthouse! 전에는 이름이 Audits 였던 것 같다. 기능 추가된 부분이 있는 것 같은데 비슷하다.
나의 목적은 성능 최적화이기 때문에 설정을 Desktop → Performance로 체크하여 사용했다.
[METRICS] 검사 지표
[OPPORTUNITIES] 리소스의 관점에서 가이드 → 로딩 성능
[DIAGNOSTICS] 페이지 실행 관점 → 렌더링 항목
[PASSED AUDITS] 잘 적용한 항목
이미지 최적화
🔺 Properly size images : 적절한 크기의 이미지
- 화면에 표시되는 이미지의 사이즈로 불러오는 것이 적절할까? Retina display에서는 화면에 표시되는 이미지 사이즈 * 2를 사용하는 것이 적절 (고밀도로 더 많은 픽셀을 담고 있어서)
- 이미지를 줄이기 위해서는? 이미지 CDN 사용, 코드에서 받는 이미지 사이즈를 줄여줌
- 이미지 CDN 사용 → CDN(contents delivery network) : 물리적 거리의 한계를 극복하기 위해 소비자와 가까운 곳에 콘텐츠 서버를 두는 기술 → 이미지를 리사이징까지 하는 것! (이미지 CDN 주소)
- 코드 내 이미지 사이즈 변경 → unsplash에서 제공하는 이미지 프로세싱 함수
```js
function getParametersForUnsplash({width, height, quality, format}) {
return
?w=${width}&h=${height}&q=${quality}&fm=${format}&fit=crop} …
<div className={‘Article__thumbnail’}> <img src={props.image + getParametersForUnsplash({width: 240, height: 240, quality: 80, format: ‘jpg’})} alt=”thumbnail” /> </div> ```
결과적으로!
[이미지 최적화 전]
[이미지 최적화 후]
