PageSpeed Insights 이용하기

PageSpeed Insights

PageSpeed Insights is an open-source project started at Google to help developers optimize their web pages by applying web performance best practices. PageSpeed Insights started as an open-source browser extension, and is now available via PageSpeed Insights and as an API.

시작하기 전에

1. 구글 계정 : https://www.google.com/accounts/NewAccount

2. API key : 

   1) APIs Console(https://code.google.com/apis/console/) 에서 PageSpeed Insights API 활성화한다. 

   2) API Access(https://code.google.com/apis/console#access)페이지의 "Simple API Access" 를 선택하여 API key 를 얻는다.

   3) 얻은 API Key를 Request URL 의 파라메터로 추가한다. (key={yourAPIkey})

API calls 예제

 

From command line 

Linux/UNIX command list 에서 curl 을 이용하여 json 포멧 데이터를 얻을 수 있다. 아래의 예제는 http://daum.net 에 접속하여 pageSpeed 로 분석한 정보를 daum.json 파일로 출력하는 것이다. {yourAPIkey}

에 위에서 발급받은 APIkey 를 입력한다.

Request : 

curl -o daum.json  "https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=http://daum.net/&key={yourAPIkey}"

 

Response :

{
 "kind": "pagespeedonline#result",
 "notice": "If you would like to use this API to perform programmatic PageSpeed analysis, please use your own PageSpeed Insights API key. See https://developers.google.com/speed/docs/insights/v1/getting_started for additional details.",
 "request": {
  "url": "http://daum.net/"
 },
 "id": "http://www.daum.net/",
 "responseCode": 200,
 "title": "Daum - 모으다 잇다 흔들다",
 "score": 92,
 "pageStats": {
  "numberResources": 78,
  "numberHosts": 14,
  "totalRequestBytes": "8238",
  "numberStaticResources": 69,
  "htmlResponseBytes": "169548",
  "imageResponseBytes": "513044",
  "javascriptResponseBytes": "297450",
  "otherResponseBytes": "1149",
  "numberJsResources": 6
 },
 "formattedResults": {
  "locale": "en_US",
  "ruleResults": {
   "AvoidBadRequests": {
    "localizedRuleName": "Avoid bad requests",
    "ruleScore": 100,
    "ruleImpact": 0.0
   },

   ...

   "MinifyJavaScript": {
    "localizedRuleName": "Minify JavaScript",
    "ruleScore": 98,
    "ruleImpact": 0.1255,
    "urlBlocks": [
     {
      "header": {
       "format": "Minifying the following JavaScript resources could reduce their size by $1 ($2 reduction).",
       "args": [
        {
         "type": "BYTES",
         "value": "577B"
        },
        {
         "type": "PERCENTAGE",
         "value": "3%"
        }
       ]
      },
      "urls": [
       {
        "result": {
         "format": "Minifying $1 could save $2 ($3 reduction) after compression.",
         "args": [
          {
           "type": "URL",
           "value": "http://s1.daumcdn.net/top-sc/static/top12/suggest.answer1.1.47.min.js"
          },
          {
           "type": "BYTES",
           "value": "577B"
          },
          {
           "type": "PERCENTAGE",
           "value": "3%"
          }
         ]
        }
       }
      ]
     }
    ]
   },

   ...

       {
        "result": {
         "format": "$1",
         "args": [
          {
           "type": "URL",
           "value": "http://track.tiara.daum.net/shining/stars/index.html?v=20110931"
          }
         ]
        }
       }
      ]
     }
    ]
   },
   "SpecifyImageDimensions": {
    "localizedRuleName": "Specify image dimensions",
    "ruleScore": 100,
    "ruleImpact": 0.0
   },
   "SpriteImages": {
    "localizedRuleName": "Combine images into CSS sprites",
    "ruleScore": 100,
    "ruleImpact": 0.0
   }
  }
 },
 "version": {
  "major": 1,
  "minor": 12
 }
}

From Javascript

javascript 를 사용하는 경우도 APIkey 를 이용하여 요청한 정보를 화면에 출력할 수 있다. 이때 구글차트나 다양한 라이브러리를 이용하여 사용자에 맞게 출력할 수 있겠다. 내용은 생략하겠다. 링크를 참고하기 바란다.

참고

API console : https://code.google.com/apis/console/