web 페이지의 로딩이 느린, 표시에 시간이 걸린다・・・.
하지만 원인을 모른다・・・.
그렇게 할 때 사용하는 것은 Chrome을 비롯한 브라우저에있는 Developer Tools (개발자 도구)의 네트워크 탭입니다

Qiita의 Advent Calender 2017 페이지를 사용하여 Chrome Developer Tools(개발자 도구)의 Network 탭 사용법을 살펴보겠습니다.

네트워크 탭의 위치와 사용법

아래 그림과 같이 왼쪽에서 네 번째입니다.


F12에서 Developer Tools를 시작한 후 조사 대상 웹 페이지를 F5로 다시로드하여로드 기록을 시작합니다.
녹음이 끝나면 둥근 버튼을 눌러 정지합니다.
누르지 않으면 계속 기록되어 버립니다
그건 그렇고, 기록하는 동안 빨간색으로 빛납니다

무엇을 알 수 있는지

HTML이나 CSS, 이미지 데이터 등을,

어떤 파일을

어떤 순서로

얼마나 오래 로드하는지

알아요.

구체적으로는, 이런 느낌.
이 그림 중에서 5개 나타낸 부분을, 이하 1개씩 봐 갑니다.

1. 필터 기능

CSS만, 화상만・・・등, 기록 결과를 어느 정도 좁혀 표시할 수 있습니다.
파일 이름으로 확장 검색도 가능

2. 파일 목록

맨 위가 가장 먼저 로드된 파일입니다.
처리된 순서대로 표시됩니다.

3. 파일 형식

JS라든지 CSS라든지 표시됩니다. 여기의 표시가 「1. 필터 기능」으로 좁힐 때의 파일 타입이기도 합니다.

4. 타임라인

처리 스레드마다 라인이 그려지고 라인의 길이가 처리 시간을 나타냅니다.
또한 처리 내용에 따라 노란색이나 보라색, 녹색 등의 색이 붙습니다.
그리고 타임라인 위를 드래그하면 그 부분만 꺼낸 파일 일람을 볼 수 있습니다.

5. 처리 시간

여기가 제일 보고 싶은 장소
파일당 로드 시간이 숫자로 표시되고 처리 내용이 컬러바로 표시됩니다.
색상 막대 위에 마우스 커서를 놓으면 처리 세부 사항이 팝업으로 표시됩니다.

요약

Network 탭을 기동해, web 페이지를 리로드 하는 것으로 간단하게 로드 처리를 기록할 수가 있습니다.
그리고, 처리 시간이 긴 파일을 특정할 수 있으면, 대응 방법도 끊임없이 알 수 있습니다.
ex) 화상 사이즈를 작게 하는, js 처리를 개선한다・・・등
반대로, 어느 처리도 같은 처리 시간이라면, 브라우저측이 아니라 서버측을 의심해 보는 것도 필요하게 됩니다.

빨리 보았습니다만, 이것만으로도 충분한 수치를 취득할 수 있을까.
"응답이 느리다 ~"라고 생각하면, 꼭 Network 탭을 열어 퍼포먼스 계측해 보세요