[FE] 1장 성능 최적화 준비
첫번째 STEP : 성능 최적화 배경
- 페이지 표시 시간 증가에 따른 이탈률 (1초 느려지면 사용자 이탈률 10% 증가)
두번째 STEP : 성능 최적화를 위한 테스트 환경 세팅
1) 브라우저 캐시 비활성화 => 리소스 캐시 비활성화 (새로고침 시 처음 접속한 것처럼)
2) 인터넷 환경 설정 => No throttling 선택 시 가장 빠른 옵션
*Throttling : 디바이스에 무리를 주는 것을 방지하기 위해 고의로 성능을 낮추는 조절 방식
3) Lighthouse
-
Performance : 화면에 콘텐츠가 얼마나 빨리 표시되는지
-
Accessibility : 서비스 접근성이 높은지
-
Best Practice : 웹 표준 모범 사례 잘 따르는지 (ex) https 프로토콜을 사용하는지 등)
-
SEO : 서비스 검색 최적화가 되어있는지
-
Progressive Web App : 웹사이트가 모바일 어플리케이션에서도 잘 동작하는지
-
Opportunities : 로드 속도에 도움이 되는 제안
-
Diagnostics : 로드 속도와 관련되지 않지만 성능과 관련된 기타 정보
세번째 STEP: 성능 최적화 결정 요소
1) 로딩성능
- 리소스(이미지,html,css,js 등) 다운로드 할 때의 성능
=> 리소스 수 줄이기 / 리소스 용량 줄이기 / 지연 로딩 등으로 성능 최적화
2) 렌더링 성능
- 리소스를 가지고 화면에 그릴 때의 성능
=> 효율적인 js코드의 작성 등으로 성능 최적화
