Custom Hook

[이미지 렌더링: 02] 웹 성능과 이미지 최적화

지난 무한스크롤 기능과 이미지 로딩에 이어, 이미지 렌더링의 최적화를 연습해보기 위해 두가지의 페이지를 추가 구현 해 보았다. 우선, 이미지를 렌더링하는데 있어서 컴포넌트 혹은 이미지를 특정 시점에 로딩함으로써 불필요한 이미지 렌더링을 줄임으로 초기 로딩 시간을 대폭 줄일 수 있다. 물론 이미지를 효율적으로 렌더링 하는 방법은 다양하지만 (위의 방법 외에도 source와 picture 태그를 이용한 렌더링 등) 이미지를 받아오는 서버를 직접 만들지 않는점을 고려하여 우선은 두가지만 진행하였다. 첫번째 방법은 Chrome 75에서 소개한 Native Lazy Loading 방식으로, 태그의 CSS property 중 loading에 lazy를 활용하는 것이다. 다음과 같이 loading property에 ..

[이미지 렌더링: 01] 무한스크롤과 이미지 렌더링

타 사이트들을 돌아다니며, 크롬 개발자 도구의 Ligthouse 를 사용하여 성능 측정을 해보았다. 꽤나 많은 사이트들이 성능 점수에서 낮은 것을 확인할 수 있었고, 이에 대한 이유를 파악해보고자 하였다. 해당 사이트(어디인지는 비밀 ㅎ...)는 성능적으로 매우 아쉬운 점수를 보였다. 체감 상, 이 점수대의 성능에서는 웹 인터렉션이 빠르다 라는 체감을 전혀 받지 못하는 것 같다. 다소 버벅거림이 있는 성능, 주된 원인으로서 이미지라 생각했다. 해당 사이트는 다량의 이미지를 렌더링하는데, lazy loading과 같이 성능적인 설계를 전혀 고려하지 않았었다. 조금 더 근거를 얻기 위해 Lighthouse의 의견을 들어보았다. 이미지 인코딩과 크기, 차세대 형식 및 오프스크린 이미지 지연하기를 제외한 부분들..