먼저 Front-end 웹 성능은 크게 로딩 성능과, 렌더링 성능으로 결정된다.
로딩 성능
서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할 때의 성능
ex. 고화질 이미지 등이 포함되어 있을 때 느린 인터넷 환경에서 늦게 표시되는 것.
로딩 성능을 개선하는 가장 좋은 방법은, 다운로드해야 하는 리소스 수를 줄이거나 크기를 줄이는 방법이 있다.
렌더링 성능
다운로드한 리소스를 가지고 화면을 그릴 때의 성능
코드를 실행하여 화면에 보여주는 과정.
렌더링 성능에 가장 크게 영향을 주는 것은 Javascript 코드로,
JS 코드를 얼마나 효율적으로 작성했는지에 따라 화면이 그려지는 속도와, 사용자 인터랙션의 자연스러운 정도가 달라진다.
개발자 도구 탭 종류
분석 툴은 크롬의 개발자 도구(F12)를 이용한다.
Network Tab
현재 웹 페이지에서 발생하는 모든 네트워크 트레픽을 상세하게 보여준다.
Performance Tab
웹 페이지가 로드될 때 실행되는 모든 작업을 보여준다.
Lighthouse Tab
웹 사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴이다.
책, 프론트엔드 성능 최적화 가이드 - 윤동균
- 레이아웃 이동 - 화면상에서 요소의 위치나 크기가 순간적으로 변하는 것 [본문으로]