1. Lighthouse를 이용한 검사
해당 웹페이지의 성능 검사 및 성능 향상을 위한 가이드를 제공해줌.
결과 페이지에서 성능 점수와 Metrics, 페이지와 로드되는 과정 등을 알려준다.
Metrics
왜 점수가 낮게 나왔는지를 보여주는곳
Oppotunities
리소스 관점에서의 가이드로서 로딩 성능 최적화와 연관.
회색 표시로 되어있는곳은 문제가 되는것은 아니지만 한번 살펴볼 필요는 있다 정도이다.
Diagnostics
페이지의 실행관점에서 가이드로서 렌더링 성능 최적화와 연관.
Passed audits
이미 잘 적용하고 있는 항목들
2. 이미지 최적화
api를 통해 이미지를 받아오는 경우 이미지 사이즈를 어떻게 조정할까?
1) CDN
CDN(Contents Delivery Network) : 물리적 거리의 한계를 극복하기 위해 사용자와 가까운 곳에 컨텐츠 서버를 두는 기술
Image CDN : 이미지를 사용자에게 보내기전에 특정 형태로 가공(이미지 사이즈 변경 및 포맷등)을 한 이후에 사용자에게 전달
대표적인 image cdn 서비스 : https://imgix.com/
ex) http://cdn.image.com?src=[img src]&width=number&height=number
2) unsplash에서 제공하는 파라미터 이용하기
https://unsplash.com/documentation#supported-parameters
unsplash에서 제공공하는 파라미터를 이용하여 동적으로 이미지 크기 조정이 가능하다. 대신 해당 파라미터는 unsplash API를 사용하는 경우 사용이 가능
3) 이미지 용량 줄이기
이미지 용량을 줄여주는 웹사이트가 여러곳이 있지만 https://squoosh.app 를 현재 잘 사용중이다. 하지만 이 방법은 api를 통해 받아오는 이미지에는 적용이 힘들것같다.
3) webpack Bundle Analyzer
번들의 구성이 어떻게 되어있는지 알려주는 도구이다.
google에 webpack bundle analyz를 검색하면 webpack Bundle Analyzer 툴을 쉽게 찾을 수 있다. 웹팩을 통해 번들링된 파일이 어떻게 구성되어있는지 보여줍니다. 하지만 다운받은 도구를 사용하려면 직접 webpack.config.js를 수정해야합니다.
cra로 프로젝트를 구성한 경우 webpack.config.js를 사용하려면 eject를 시켜야 해당 파일이 보이는데 eject를 하는순간 cra의 장점인 패키지 통일성을 보장받을 수 없다.
그리하여 cra-bundle-analyzer를 사용하였다.
https://www.npmjs.com/package/cra-bundle-analyzer
사용법은 간단하다 npm install 혹은 yarn으로 설치를 한뒤 npx cra-bundle-analyzer 를 입력해주면 된다.
4) Code Splitting
코드를 분할하는 것. 덩치가 큰 번들파일을 쪼개 작은 파일로 나누는것
불필요한 코드 또는 중복되는 코드 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드될 수 있도록 하는것
코드 스플릿팅을 하는 주체는 리액트가 아니라 웹팩이므로 따로 설정이 필요하다. (https://webpack.js.org/guides/code-splitting/)
하지만 cra로 만든 프로젝트는 생성시점부터 설정이 되어있기 때문에 위의 과정을 생략할 수 있다.
참고 자료: https://www.inflearn.com/course/웹-성능-최적화-리액트-1/dashboard
