크롬 트래픽 확인 - keulom teulaepig hwag-in

1

2

3

4

5

6

7

8

9

10

11

15

크롬 브라우저 개발자 도구를 이용한 웹 페이지 속도 테스트의 모든 것

웹 사이트가 다양한 접속 환경을 지원하기 시작하면서 웹 페이지의 로딩 속도가 갈수록 중요해지고 있습니다. 이번 포스팅에서는 크롬(Chrome) 브라우저를 이용하여 로컬 PC에서 웹 페이지 속도를 테스트하는 방법에 대하여 알아보도록 하겠습니다.

먼저 크롬(Chrome) 브라우저를 실행하여 F12(또는 Ctrl+Shift+I)를 누르면 크롬 개발자 도구가 나옵니다. 크롬 개발자 도구는 다양한 기능을 제공하고 있는데 그중 Network 기능을 이용하면 웹 사이트의 속도 테스트가 가능합니다. 기존에 크롬(Chrome) 개발자 도구를 알고 있었다면 쉽게 사용하실 수 있습니다.

크롬 브라우저를 실행하여 원하는 사이트에 접속 후 오른쪽의 제어 메뉴를 이용하거나 F12(또는 Ctrl+Shift+I)를 누르면 페이지의 오른쪽에 크롬 개발자 도구가 표시됩니다.

​

​

Network 탭으로 이동하여 Record를 실행합니다. Record 버튼이 빨간색으로 변경되었는지 확인 후 F5를 눌러 사이트를 새로 고침 합니다.

​

​

웹 페이지가 로드되면 각 항목별로 소요된 시간과 상태를 확인할 수 있습니다. 각 항목별로 처리 시간을 확인한 후 시간이 오래 걸리는 항목을 최적화해주면 전체 사이트 속도 향상에 도움이 됩니다.

​

​

각 항목을 클릭하면 상세 정보가 오른쪽에 표시되는데 속도와 관련된 정보는 “Timing” 탭에서 확인 가능합니다.

​

Timing에서는 브라우저에서 특정 파일을 서버에 요청 후 다운로드가 완료될 때까지 모든 구간의 소요 시간이 표시됩니다.

​

​

여기에서 주의 깊게 봐야 하는 것은 “Waiting(TTFB)” 입니다.

Waiting(TTFB)는 브라우저가 서버에 파일을 달라고 요청(Request) 한 후 최초 응답을 받을 때까지 걸리는 시간을 의미하는데 DNS 처리 시간, 클라이언트에서 서버까지의 네트워크 통신 시간, 서버 내에서의 처리 시간이 모두 포함된 수치라고 보시면 됩니다.

주로 웹 서버가 느릴 경우, 시간이 길어질 수 있는데 이 시간이 지나치게 길게 나오면 웹 서버에 문제가 없는지 점검해 보아야 합니다.

​

페이지를 표시하는데 걸린 전체 소요 시간은 하단 상태 바에 확인이 가능합니다.

- DOMContentLoaded : HTML 파싱에 필요한 자원이 모두 다운로드 되어 첫 마크업이 파싱 되는 시점.

(이 시점부터 순차적으로 웹 페이지가 표시됩니다.)

- Load : HTML이 모두 파싱 되고 이미지 등 모든 자원이 다운로드 되어 페이지가 완전히 로드 된 상태.

​

※ 크롬 개발자 도구의 자세한 사용 방법은 구글 사이트의 크롬 개발자 도구 매뉴얼을 참조하시면 됩니다.

​

[크롬 개발자 도구 매뉴얼]

https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading?hl=ko

​

​

​

추가로 재미있는 기능을 소개하자면 카메라 아이콘을 활성화한 상태에서 새로 고침을 누르면 페이지를 로드하는 과정을 스크린샷으로 남길 수 있습니다.

3G 환경과 같이 네트워크 속도가 느린 환경에서 속도 테스트를 하고 싶다면 쓰로틀링(Throttling) 기능을 이용하여 Fast 3G 나 Slow 3G 와 같은 환경에서 테스트가 가능합니다.

HAR (HTTP Archive)을 이용한 속도 측정 결과 저장 및 공유

Chrome 개발자 도구로 로컬에서 속도 테스트를 하는 경우 위치나 지역에 따라 테스트 결과가 다르게 나올 수 있습니다.

​

이런 경우 테스트 결과를 저장해 서로 공유를 해야 하는 경우가 발생하는데 이때 HAR 파일을 이용하면 저장 및 공유가 가능합니다.

HAR 파일을 저장하는 방법은 간단합니다.

각 자원의 결과가 표시되는 Requests Table의 아무 곳에나 마우스 오른쪽 버튼을 클릭해 나오는 메뉴 중에서 "Save as HAR with content"를 선택하면 테스트했던 모든 결과를 HAR 포맷의 파일로 저장 할 수 있습니다.

​

저장된 HAR 파일은 구글에서 제공하는 HAR Analyzer라는 G Suit 도구 상자에 업로드해 열어볼 수 있으며, HTTP Archive Viewer라는 크롬 확장 프로그램을 설치해서 확인할 수도 있습니다.

​

[G Suit 도구 상자]

https://toolbox.googleapps.com/apps/har_analyzer/?lang=ko

G Suit 도구 상자

HTTP Archive Viewer

​

※ HAR 파일 공유 시 한가지 주의할 점은 HAR 파일에는 테스트를 하면서 기록한 모든 쿠키와 개인 정보가 포함되어 있습니다. 만약 테스트에서 실제 신용카드 정보나 주민등록 번호와 같은 고객 정보를 이용한 경우에는 외부로 유출이 되지 않도록 주의해야 합니다.

​

​

​

지금까지 로컬 브라우저를 이용한 속도 테스트에 대해 소개해드렸습니다.

브라우저가 아닌 외부 서비스를 이용한 속도 테스트가 필요하시면 지난 번 포스팅을 참고해주세요!

​

​

[지난 포스팅 - '웹 페이지 속도 테스트를 위해 꼭 알아야 할 4가지 서비스' 바로가기]

https://blog.naver.com/didim365_/221387090765

​

​

​

​

KT Cloud 플래티넘 파트너 / 클라우드 전문

홈페이지 : www.didim365.com

​

​