[Web][Performance][Chrome] 웹 프론트의 성능을 보자(1) - 크롬 개발자 도구와 성능 지표 보기

웹 프론트 엔드를 개발하다보면 성능을 개선해야할 일이 생긴다.

그러려면 당연히 디버깅과 모니터링이 필요하다.

여러가지 툴이... 있는지 없는지도 잘 모른다. 사실 익숙한것만 쓰기 때문이다.

그런데 필자가 자주 쓰는건 크롬의 개발자 도구이다.

 

사실 좋은 툴인건 맞지만 최강의 툴인지 까지는 잘모르겠다.

좀 많이 느린면이 있다. 하지만 굉장히 좋은 툴이라는 건 변함없다.

 

사용하는 방법은 윈도우에서는 F12를, 맥에서는 cmd+alt+I를 눌러주면된다.

보통 자주 보는 지표는 아래와 같다.

 

Network - 네트워크 request들을 본다. 앞으로 정말 정말 자주보게 될 것이다.

Performance - 성능을 스냅샷을 떠서 볼 수 있다.
켜면 좀 느려지긴 하는데 그래도 당시의 콜스택이나 타이밍, 애니메이션등을 상세하게 보여준다.
앞으로 자주보게될 성능 지표 2위.

Memory - 현재 사용중인 메모리 상태를본다.
필자같은 경우에는 어짜피 띄어놓아도 잘몰라서 현재 메모리 상태가 어떤지 개략적으로 볼 때 본다.

Application - 현재 사용중이 Cookie, Storage, Web SQL등의 데이터를 본다.
앞으로 정말 자주 사용하게 될 것이다.

Audits - 웹사이트의 문제점등을 진단해준다.
정말 구글이 어떻게 만들었는지 모를만큼 좋긴하다.
어떤 문제점이 있고 어떻게 개선하면 좋을지에 대해서 말해주는 탭이다.

 

이번에 Network지표에 대해서 간단히 알아보도록 하자.

 

https://github.com/justkukaro/WEB-PERFORMANCE-TEST/tree/master/Ch01

예제에 사용될 소스는 위의 경로에서 받자. 사실 받을 필요는 없고 그냥 보기만해도 된다.

 

 

페이지를 로딩하면 위 처럼 뜨게 된다.

Network탭에서는 현재 로딩되는 모든 정보를 한눈에 볼 수 있다.

 

 

이렇게 타임라인 형식으로 된것을 filmstrip이라고한다.

사실 프로그래밍 용어는 아니고 필름을 풀어 해친걸 filmstrip이라고 부른다.

위를 보면 어떤 데이터가 어떠한 순서대로 왔는지 그리고 유휴기간은 얼마인지를 알 수 있다.

이는 사실 되게 유용한 지표이다.

 

 

마우스를 드래그해서 간격을 정해주면 이렇게 해당 타임라인만 볼 수도 있다.

그리고 더블클릭하면 우리가 지정한 간격이 해제된다.

해당 소스를 한번 전체적으로 보자.

 

 

먼저 Type document라고 불려있고 Initiator가 Other로 되어있는 녀석이 있다.

이를 설명하고 넘어가야할것 같다.

 

Type이라는 것은 넘어온 응답의 content type을 보고 결정한다.

하지만 그중에서 document는 좀 특별한데 타입과 상관없이 해당 본문을 이루게 되는 녀석이 document가 된다.

우리가 js에서 document를 호출하면 나오는 그 녀석이 된다는 이야기 이다.

어쨋든 일반적인 웹페이지에서는 본문 html이 되게 된다.

 

Initiator는 시작지점을 의미한다 Other이라고 되있다는것은 쉽게 말해서 root를 의미한다.

즉 자기가 제일 처음 들어온 녀석이 Other로 되는데 일반적으로는 favicon.ico(혹은 favicon.png)과 본문 html이 된다.

그 외 아래녀석들은 (index)라고 되어있는데 이는 index라는 페이지에서 직접 호출됬다는 의미이다.

보통 페이지라는 개념은 url의 마지막을 의미한다.

해당 예제의 url은 http://127.0.0.1:5500/이다.

그러면 마지막은 (/)가 되는데 암묵적으로 root(/)는 index로 변환된다.

여기서 직접 호출은 조금 햇갈릴거 같은데 예제에 따라서 조금은 다를 수 있겠지만

일반적으로는 html에서 태그로 호출하는 녀석들(img:png..., font:eof..., script:js..., link:css... 등)을 의미한다.

 

Time은 요청을 시작해서 응답이 끝나는 시점까지의 시간을 의미한다.

이를 정확히 이해하려면 Waterfall과 같이 봐야한다.

 

 

Waterfall은 타임라인을 개략적으로 보여준다.

마우스를 올리면 아래와 같이 보여준다.

 

 

지표들이 전부 영어로 되어있다.

개략적으로 알아보자.

 

Queued at <N> ms - 개발자 도구를 켠 순간부터 큐에 적재되는데 까지 걸리는 시간
Started at <N> ms -  개발자 도구를 켠 순간부터 request를 보내는데 까지 걸리는 시간
Queueing - 구문 분석한 시점에서 큐에 넣는데 그게 적재되어 있는 시간
Stalled - 큐에서 request를 보내는데 그게 정지되어 있는 시간
Proxy negotiation - 브라우저가 프록시 서버로 요청을 보내는데까지 걸리는 시간
Request sent - request를 보내는데 걸리는 시간.
Waiting (TTFB) - response의 첫번째바이트가 도달하는데 까지 기다린 시간(TTFB는 Time To First Byte)
Content Download - content가 다운로드가 되는데 까지 기다린 시간, 시작 시점은 response 시작 시점, 종료 시점은 response 종료시점이라 생각해도 무방
Explanation - 이 모든걸 종료하는데 걸리는 시간

 

 

아래에 보면 위와 같은 지표를 볼 수 있다.

마지막에 DOMContentLoaded랑 Load가 매우 중요한 지표인데 이는 다음 포스팅에서 다루도록 하겠다.

하지만 아직 개략적으로 언급할게 있으므로 위의 개념을 잠시 이야기하려고한다.

 

waterfall을 보면 파란선과 빨간선이 보인다.

이 크롬개발자 도구에서 파란선은 DOMContentLoaded를 의미하고 빨간선은 Load를 의미한다.

이역시 매우 중요한 지표이다.

왜냐하면 프론트엔드는 사용자에게 직접적으로 맞다아 있는 부분이고,

사용자가 느끼기에 이 서비사가 빠르냐 안빠르냐를 판단하는 기준중에서 가장 기본이 되는게 바로 저 두 지점이기 때문이다.