성능측정- CRP

crp 를 찾을때 상위 카테고리
'성능 지표 용어'

CRP(Critical Rendering Path)

crp는 문서(html, js, css)를 화면에 표현하기 위해 거치는 일련의 과정을 말하다.
html문서가 브라우저에 의해 구문 분석될때 dom트리와 css dom 트리를 구성한다.
css dom 트리와 dom 트리를 결합하여 render 트리를 구성하고, 레이아웃을 통해
페이지에 그려질 요소들의 크기와 위치를 결정한다(layout). 마지막으로 그려질 위치가 정해지면 그리기(painting) 과정을 통해 픽셀이 화면에 그려진다.
더 나은 성능과 우수한 사용자 경험을 제공하기 위해서 crp 최적화 하는 것은 중요하다.

CRP 최적화 요소 찾기

chrome 개발자도구, lighthouse

웹 앱의 품질을 개선하는 오픈 소스 자동화 도구이며, 크롬의 확장 프로그램이나 node 패키지를 통해 사용할 수 있다.

perfomance API, HTML Events

특정 페이지에 대한 타이밍 관련 성능 정보를 나타낸다.
위 이미지는 페이지가 로드될 때 브라우저가 추적하는 타임스탬프 중 일부 순서를 표현한다.

domLoading: 전체 프로세스의 시작. 브라우저가 처음 수신한 HTML 문서 바이트의 파싱을 시작하는 시점이다..
domInteractive: 브라우저가 파싱을 완료. 모든 HTML 및 DOM 생성 작업이 완료되는 시점이다..
domContentLoaded: DOM이 준비되고 자바스크립트 실행을 차단하는 스타일시트가 없는 시점이며 이제 렌더링 트리를 생성할 수 있다.
domComplete: 이름이 의미하는 바와 같이, 모든 처리가 완료되고 페이지의 모든 리소스(이미지 등)의 다운로드가 완료된 시점이다.
loadEvent: 각 페이지 로드의 최종 단계로, 브라우저가 onload 이벤트를 발생시킨다.

devTools

크롬 갭라자 도구에서 performance-eventLog를 이용하여 crp 각각의 소요 시간을 체크할 수 있다.

CRP 최적화하기

http request 줄이기

• 리소스 파일들을 번들링한다.
• css sprites 기법을 사용한다.
  하나의 이미지로 병합하고, background-position으로 사용할 이미지만 보이게 하는 기법.

파일 크기 줄이기

초기 렌더링 최적화

• 처음 문서가 로드될때 실행되는 ajax 요청을 최소화한다.
• css 파일은 header에서 로드한다.
  dom트리 구성을 멈추기 때문에, css를 header에서 로드하여 전부 완료된 후 dom을 구성하게 해야한다.
• js 파일은 body의 마지막 부분에서 로드하거나 지연로드(lazy load)한다.