dev/React2 React.lazy 와 Suspense로 성능개선! 현재 진행중인 프로젝트에서 로그인 페이지를 lightHouse로 분석해보니 아래와 같은 결과가 나왔다. 사용하고 있지 않는 자바스크립트를 같이 불러오고 있어서 페이지 로딩시간이 긴거같아서 이 부분을 개선해 보려고 한다. 🤔 왜 React.lazy를 생각했는지 react로 만들어지는 앱을 빌드하면 보통 js 파일이 index 파일 하나로 통합빌드가 이뤄지는데 최초 앱 렌더링시 당장 보여지지 않는 컴포넌트를 모두 불러와서 최초 로딩 속도를 지연시키는 원인이 되기도 한다. 이것을 코드 분활을 통해서 당장 사용할 컴포넌트만 불러오도록 개선을 해야하는데 어디선가 블로그에서 봤던 React.lazy를 이용해보려고한다. React.lazy는 리액트에서 제공하는 내장기능으로 필요에 따라 컴포넌트를 불러오도록 동작해주기.. 2023. 7. 29. 이미지 최적화를 통한 웹 성능 개선 🤔 이미지 최적화 왜 필요할까? 진행하던 프로젝트의 성능을 분석하다 보니 lightHouse 결과 웹 성능이 대체로 60-70점 언저리인것을 발견했다. 성능 저하의 원인에는 여러 원인이 있지만 그 중 이미지를 집중적으로 먼저 개선해보려 한다! 이미지 최적화에 들어가기 전 먼저 현재 우리 사이트에 이미지 관련 어떤 문제가 있는지 살펴보기 위해 Network 를 통해 트래픽 속도를 측정해보니 아래와 같은 문제점들을 발견했다. 불러오는 이미지의 수가 많음 매페이지 공통으로 사용하는 이미지 매번 불러옴 압축이 적은 이미지 유형 다른 문제도 있지만 위 문제점들로 인해 로딩속도가 저하되는거 같은데 페이지 로딩 시간은 웹 성능을 최적화 하는데 있어 중요한 부분중 하나이다. 페이지 로딩에서 100밀리 초만 지연되더라도.. 2023. 7. 20. 이전 1 다음
