웹사이트 속도 측정 크롬 - websaiteu sogdo cheugjeong keulom

페이지 속도는 블로그 포스트 검색 순위에 영향을 미친다. 

구글의 경우 속도가 2% 느려지면 검색량도 2% 감소

야후는 400ms 빨라지면 트래픽이 9% 증가한다. 

로딩 속도가 너무 느리면 창을 끄고 비슷한 정보를 볼 수 있는 다른 사이트로 이탈한다. 

사용자가 이탈하지 않고 만족하면서 사이트에 머무는 적정한 로드시간은 1~2초 

전환 최적화 전문가 제레미 스미스 Jeremy Smith에 따르면, 

1~2초가 가장 좋다. 

3~6초는 평균으로 사용자가 참을만 하다. 

7~10초 속도개선 작업 필요하다.

10초 이상 사용자 이탈이 발생한다. 

사이트의 로딩 속도를 확인하는 방법, 그리고 미충족 결과에 대한 개선 방법을 하려면 어떻게 해야 할까. 

웹사이트 퍼포먼스를 모니터링하고 최적화하는 방법의 기준은 아래와 같다. 

1. 페이지스피드 인사이트 - 목표 85점 보다 크다. 

2. 스피드인덱스 - 목표 1000 보다 작다.

3. 시각적인 로딩 완료 - 목표 1초 보다 적다. 

4. 완전한 로드 - 목표 7초 보다 적다. 

웹 페이지 속도 테스트, 모니터링을 하기 위한 툴은 아래 3가지를 사용한다. (PageSpeed Tools) 

1. 크롬 개발자도구

2. WebPageTest

3. PageSpeed Insights 

구글 PageSpeed Tools > Insights 사용히기

구글 검색창에서 "페이지속도"로 검색하면 PageSpeed Insights 가 나온다. 

모바일일 경우 "모바일 웹페이지 속도 테스트 도구"로 검색

검사를 원하는 웹페이지 주소를 넣고 분석 버튼을 누르면 "기기별 페이지속도점수"와 "페이지속도 관련 분석리포트"를 "모바일"과 "데스크톱"으로 나누어 확인할 수 있다. 

분석 후 결과 값이 좋지 않다면 "실제 속도 데이터가 충분하지 않습니다"라는 안내를 받는다. 

이어서 하단에 있는 "실험실 데이터"를 통해 추정치 값을 확인할 수 있다. 

또한 "추천" 항목의 속도 개선을 위한 제안 사항을 통해 속도 개선을 할 수 있다. 

퍼스트 뷰 Above-the-Fold(ATF)가 로드 및 렌더링 될 때까지 1초의 값을 충족하려면 다음을 염두에 두고 개발한다.

1. 레이지 로딩 - 사용자가 스크롤을 움직일 때 추가 콘텐츠를 로드한다. 

2. Inline CSS - CSS를 둘로 나누어 퍼스트 뷰에서는 inline CSS를 사용한다. 

3. 3rd party 위젯 - 공유하기 등 3rd party 위젯은 콘텐츠 다음에 로드한다. 

1. HTTP 요청수 줄이기

1) 모바일 사이트를 여는데 필요한 HTTP 요청수 목표를 40 이하로 설정

2) 동일한 타입의 파일을 병합하고, 중복된 요청과 인라인 소형 JS 제거

3) 인라인 소형 CSS파일은 HTML 헤드 부분에 위치

4) 아이콘과 같은 작은 이미지를 위해 여러번 요청을 보내는 대신 스프라이트 이미지를 사용

2. 렌더링 차단 자바스크립트와 CSS 삭제하기

1) 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링하는 데이터 사이즈를 제한 (HTML 마크업, 이미지, CSS, 자바스크립트)

2) 초기 렌더링에 큰 영향이 없는 스크립트는 비동기식 또는 첫번째 렌더링 이후 까지 지연되도록 구현

3. 모든 리소스 파일 최소화 및 압축하기

1) 프로세싱과 상황에 맞는 최적화를 통해 리소스를 최소화 (HTML/CSS/JS)

2) 파일 크기를 줄이기 위해 서버에 GZIP 활성화 (GZIP을 텍스트 파일에 적용할 경우 70~90% 정도 압축 기대)

4. 브라우저 캐싱 사용하기 

1) 리소스 파일들이 브라우저 캐싱을 적절하게 활용하도록 확인

: 캐시 라이프타임에 따른 제안

: 일반적인 리소스 파일 (이미지/JS/CSS)는 최소 1주에서 최대 1년

: 빠르게 변경되는 리소스는 0~10분 사이

: 캐시할 리소스는 스타일시트, JS 파일, 웹폰트, 통계리소스 (로고/이미지/뉴스사진 등)

: 캐시하지 말아야 하는 리소스는 동적 정보, 사용자 정보, 빠르게 변경되는 데이터 (기온)

5. 서버 응답시간 단축하기 

웹서버 최적화를 통해 서버 응답시간을 단축한다.

체크리스트 

1) 애플리케이션 로직

2) 프레임워크 및 라이브러리 업데이트

3) 데이터베이스 요청

4) 라우팅 및 로드 밸런싱

5) CPU 및 메모리 활용

HTML, JS, CSS 최소화 도구 

1. HTMLMinifier - HTML 최소화

2. CSSNano, csso - CSS 최소화

3. UglifyJS, Closure Complier - JavsScript 최소화 

* PageSpeed Module 

* 관련 링크는 포스트 하단에

무료 검사도구 WebPageTest.org 활용하기 

테스트하고 싶은 URL과 테스트 지역, 브라우저 종류를 선택 후 START TEST를 누른다. 

좀 더 자세한 테스트 옵션을 설정하려면 Advanced Settings를 눌러 설정한다.

테스트 결과나 나오면 아래와 같은 기준을 충족해야 한다. 

SpeedIndex < 1000

Documnet Complete Time < 7s

Fully Loaded Time < 7s

Document Complete Requests < 최소 40

Fully Loaded Requests < 최소 40

Document Bytes In < 750KB 이하 권장

Fully Loaded Bytes In < 750KB 이하 권장

Filmstrip View 분석하기

0.1s ~ 5s 사이의 사이트 로딩 화면을 필름처럼 시각화하여 보여준다. 

사이트 로드시 타임라인 차트, 사이트로드 진행률 그래프, 이벤트 소요시간 그래프, 각 리소스별 요청수 그래프, 각 요소별 바이트 크기 정보를 통해 웹사이트 로드시 문제가 되는 부분을 파악할 수 있다. 

크롬개발자 도구 사용하기 

크롬개발자 도구는 크롬브라우저에서 마우스 오른쪽 클릭을 한 후 "검사"(요소검사)를 누르면, 화면 하단 또는 오른쪽에 위와 같은 창이 뜬다. 

Element, Console, Sources, Network, Performance, Memory, Application, Security, Lighthout 등의 메뉴가 있고, 항목별로 측정 결과를 확인할 수 있다.

[관련 링크]

PageSpeed Insights - https://developers.google.com/speed/pagespeed/insights/?hl=ko

모바일 사이트 속도 비교 : Think with Google - www.thinkwithgoogle.com/intl/ko-kr/feature/testmysite/

WebPageTest - http://www.webpagetest.org 

HTMLMinfier - https://html-minifier.com/

CSSNano - https://cssnano.co/

CSSO - https://css.github.io/csso/

Uglify JS 

Closure Complier - https://developers.google.com/closure/compiler

한국구글애드센스 배도 유튜브 - youtu.be/Oco_KqvXTlE