구글 크롬 개발자 도구를 사용하여 웹 사이트 성능을 측정하는 방법

이 문서에서는 측정하고 웹 사이트의 성능을 모니터링하기 위해 구글 크롬의 개발자 도구를 사용하는 방법에 대해 설명합니다.

크롬 개발자 도구 사용

구글 크롬 웹 브라우저에는 개발자 도구가 포함되어 있습니다.:

다음 이미지는 구글 홈 페이지에서 열린 개발자 도구를 보여 줍니다:

개발자 도구 창의 네트워크 탭에서 크롬은 현재 페이지에 대한 모든 연결을 나열합니다. 특정 페이지를 테스트하려면 개발자 도구를 열고 테스트할 페이지로 이동합니다. 현재 페이지를 테스트하려는 경우 또는,단순히 페이지를 새로 고칩니다.

크롬은 각 페이지 자원 및 요청에 대한 정보를 표시합니다.

메서드: 메서드(가져 오기 또는 게시).

상태:서버가 반환한 상태 코드입니다.

유형:자원의 마임 유형.

시작자:서버로 보낸 리퍼러입니다.

크기: 브라우저에서 수신한 리소스의 크기입니다(페이지가 서버에 의해 압축된 경우 이 값은 실제 파일 크기보다 작습니다).

시간:리소스를 검색하는 총 시간입니다.

타임라인:타임라인은 각 요청의”폭포”타임랩스 뷰입니다. 폭포의 막대 위에 마우스 포인터를 올려 놓으면 다운로드 시간에 대한 자세한 설명과 함께 도구 설명이 나타납니다:

• 차단:이 시간에는 서버에 대한 연결 시간이 포함됩니다.
• 보내기: 여기에는 모든 요청 데이터가 포함된 요청을 서버로 보내고 서버에서 요청을 받았다는 확인을 받는 시간이 포함됩니다.
• 대기 중:여기에는 서버가 콘텐츠를 렌더링하여 제공되고 브라우저로 보내기 시작하는 시간이 포함됩니다.
• 수신:여기에는 콘텐츠를 다운로드하는 데 걸리는 시간이 포함됩니다.

대기 시간과 수신 시간의 조합은 사이트 속도를 결정하는 가장 중요한 요소입니다. 그러나 인터넷 연결 속도도 성능에 영향을 줄 수 있으므로 사이트 성능 벤치마크를 설정할 때는 항상 같은 위치의 시간을 비교해야 합니다.

네트워크 탭의 맨 아래에 페이지 로드 프로세스의 요약이 있습니다. 이 요약에는 총 요청 수,리소스를 포함한 전체 페이지의 총 크기 및 브라우저에서 페이지를 렌더링하는 데 소요 된 시간 분석이 포함됩니다.

첫 번째 시간 값은 페이지의 모든 콘텐츠를 로드하는 데 소요된 총 시간입니다. 이 값에는 페이지가 렌더링된 후 자바스크립트에 의해 로드된 콘텐츠가 포함되므로 요청이 백그라운드에서 발생하면 이 숫자가 변경될 수 있습니다.

괄호 안의 두 시간 값은 사이트 최적화에 중요한 이벤트입니다:

• 부하: 이 이벤트는 페이지를 로드하는 시간입니다. 이 이벤트는 일반적으로 돔 컨텐트 로드된 이벤트보다 오래 걸립니다.
• 돔 컨텐트 로드됨:이 이벤트는 사용자가 페이지를 로드하는 데 인지한 시간을 나타냅니다. 자바스크립트가 추가 리소스를 요청하기 전에 원본 문서에 설명된 대로 페이지를 렌더링해야 합니다. 이 시간은 브라우저가 자바스크립트에서 돔콘텐츠로드된 이벤트를 실행할 때 저장됩니다. (돔 외부에서 요청되는 리소스의 예는 구글 애널리틱스입니다.)