LAI 에 대해 알아본다.
Loading And Interaction
- 초기 로딩 속도 ( First Loading )
- 얼마나 빨리 페이지를 볼 수 있는가?
- 인터렉션 속도
- 스크롤이 버벅거리는 문제
- 키보드 입력하는데 버벅 거린다.
- 얼마나 매끄럽게 애니메이션이 동작하는지 안하는지
성능 개선 루틴
- 측정, 분석, 최적화 반복 ( 목표 시점까지 보통 3초 )
< Waterfall Chart 를 보고 분석 >
- 폭 줄이기
- HTTP2 사용을 통해서 browser가 하나의 connection 상에서 동시에 여러 개의 request를 보내는 기술을 사용해 폭을 줄인다.
- 네트워크를 빠르게 하거나, DB query 최적화를 통해 해결 ( 대부분 백엔드 문제일 가능성이 높음 )
- 높이 줄이기 ( Request (요청 수) 줄이기 )
- JS, CSS 파일을 merge 해서 한번 요청한다.
- 여러 이미지 파일들을 한번의 요청으로 받는다.
- 작은 이미지는 HTML, CSS 로 대체한다 ( BLOB URI ? ) ( Data URI로 처리 할 수 있다.)
- 간격 땡기기
잘못된 코드 최적화 하기 ( 가장 효과적 )
- 만능 유틸 사용 주의하기 lodash와 같은 만능 유틸 라이브러리를 사용할 때 주의한다. 일반적인 방식으로 가져와 사용하면 유틸 함수 전체가 포함되므로 자바스크립트 파일 용량이 커진다. 이 경우에 필요한 함수만 부분적으로 가져올 수 있으며 용량이 늘어나는 문제를 해결해준다. 그리고 되도록 사용하지 않는 기능이 많이 포함된 라이브러리 사용은 지양한다.