웹성능 최적화가 필요한 이유
- 서비스가 느려질수록 사용자가 떠나가게된다.
- 프론트엔드 개발자에게 경쟁력을 갖추게된다.
사용시간과 수익창출과의 관계
- 사용자가 서비스 이용시간이 늘어날수록 수익창출 또한 늘어난다 -> 해당 static 자료 조사 필요
- 그러므로 사용시간을 늘리기 위한 방법을 알아야하고 이 중 서비스 로딩 시간 또한 큰 영향을 미치는 것으로 알 수 있다.
프론트엔드 개발자의 경쟁력
- 사용자를 위한 서비스를 만들고 그 서비스의 수익창출에 영향을 줄 수 있는 프론트엔드 개발자는 많지 않고 해당 최적화를 할 줄 아느냐에 따른 경쟁력을 높다.
성능최적화 기법
가장 많이 쓰이는 방법
- 브라우저 렌더링 원리
- Performance 패널을 이용한 분석
- Lighthouse 패널을 이용한 분석
- Network패널을 이용한 분석
- webpack-bundle-analyzer를 이용한 분석
- 텍스트 압축
- 이미지 사이즈 최적화
- 적절한 사이즈로 최적화
- 이미지 CDN을 통한 최적화
- 리소스 캐싱
- 이미지 preload
- 컴포넌트 preload
- Component Lazy Load
- React Code Splitting
- Image Lazy Load
- 병목 코드 제거
- repaint, reflow 줄이기
웹성능 결정 요소
로딩성능
- 각 리소스를 불러오는 성능
렌더링 성능
- 각 리소스를 화면에 보여주는 성능
Frontend Developer