Coding

Chrome Extention App 을 이용하여 성능측정을 통해 튜닝포인트를 찾는 것을 해보았다.

Google의 PageSpeed 제품 성능 측정은 현재 3가지 방법을 제공한다.

1. Browser Extention App

2014/10/31 - [튜닝/성능측정] - Chrome PageSpeed를 이용한 Front-End 성능측정

2. PageSpeed Insights 사이트를 이용하는 방법

2014/10/31 - [튜닝/성능측정] - PageSpeed insights를 이용한 성능측정

3. PageSpeed openapi를 이용

그럼 PageSpeed insights 사이트에 대해 간단히 알아보자.

장점

1. 데스크탑과 모바일을 한번에 확인할 수 있다.

2. 모바일 측정 결과에 사용자 환경에 대한 UX 적인 측정이 가능하다.(그렇게 디테일하진 않다.)

단점

1. User Agent와 같은 것을 변경하여 처리할 수 없다.

사용 방법

1. PageSpeed insights 에 접속
URL : https://developers.google.com/speed/pagespeed/insights/
측정하고자 하는 URL 을 입력 후 분석 버튼을 누른다.

2. 결과 값으로 아래와 같이 모바일 페이지의 대한 측정/사용자 환경에 대한 측정 스코어와 개선 사항을 제안해 준다.
추가적으로 캡처 화면을 제공하여 사용자가 좀 더 명확하게 알 수 있도록 제공한다.

3. 데스크톱 탭을 선택하면 데스크톱 단에서 나온 측정 스코어와 개선안을 제안해준다.

Chrome PageSpeed는  특정 페이지의 Front-End 단 튜닝 요소를 찾아주는 확장앱이다.

예전에는 스코어도 주었는데 Chrome Extention App에서는 현재 스코어는 빠져 있다.

특정 페이지(예: 메인 페이지)에 대해서 Front-End 단에 튜닝이 필요한 부분에 대해서 

상,중,하로 구분하여 보여주어 사용자가 우선적으로 처리해야 하는 부분과 방법을 제공한다.

사용법을 간단하며 아래와 같다.

1. 크롬 앱스토어에서 PageSpeed Insights 를 검색하여 설치.

2. Chrome 도구메뉴에서 개발자 도구를 선택한다.(windows는 F12, Mac CMD + option + i)

3. 개발자 도구 메뉴중 PageSpeed를 선택 한 후 분석 시작 버튼을 누르면 해당 페이지를 분석한다.

4. 분석이 완료되면 아래와 같이 결과값을 보여준다.
제안사항 요약을 보면 H,M,L 로 구분하여 튜닝이 필요한 부분에 대해서 제안한다.

각각의 부분을 누르면 상세 내용을 제공하므로 항목별로 눌러서 확인해보면 된다.

5. 제안내용 외에 이미 처리 되어 있는 부분은 아래와 같은 항목들이 있다. 실제 튜닝을 하지 않았다면 상당부분이 미 완료 되어 있는 것을 확인할 수 있다. 

겁나 빠른 사이트 만들기에 이어 좀 더 심화편입니다.

2014/10/31 - [세미나 자료] - 겁나 빠른 사이트 만들기

옛날에 했던 Front-end 성능 측정 관련 세미나 자료 입니다.

2014/10/31 - [세미나 자료] - Front-End 웹사이트 성능 측정 및 튜닝