SHOW:
|
|
- or go back to the newest paste.
1 | - | (function() { |
1 | + | var runPagespeedCallbacks = (function() { |
2 | //API Key and URL | |
3 | var API_KEY = 'randomapikey'; | |
4 | var YN_URL = 'http://www.google.com'; | |
5 | ||
6 | //Fetch PageSpeed Results | |
7 | var API_URL = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?'; | |
8 | var CHART_API_URL = 'http://chart.apis.google.com/chart?'; | |
9 | ||
10 | // Object that will hold the callbacks that process results from the | |
11 | // PageSpeed Insights API. | |
12 | var callbacks = {}; | |
13 | ||
14 | // Invokes the PageSpeed Insights API. The response will contain | |
15 | // JavaScript that invokes our callback with the PageSpeed results. | |
16 | function runPagespeed() { | |
17 | var s = document.createElement('script'); | |
18 | s.type = 'text/javascript'; | |
19 | s.async = true; | |
20 | var query = [ | |
21 | 'url=' + YN_URL, | |
22 | 'callback=runPagespeedCallbacks', | |
23 | 'key=' + API_KEY | |
24 | ].join('&'); | |
25 | s.src = API_URL + query; | |
26 | document.head.insertBefore(s, null); | |
27 | } | |
28 | ||
29 | ||
30 | - | function runPagespeedCallbacks(result) { |
30 | + | |
31 | // Invoke the callback that fetches results. Async here so we're sure | |
32 | // to discover any callbacks registered below, but this can be | |
33 | // synchronous in your code. | |
34 | setTimeout(runPagespeed, 0); | |
35 | ||
36 | ||
37 | ||
38 | //Google-O-Meter | |
39 | callbacks.displayPageSpeedScore = function(result) { | |
40 | var score = result.score; | |
41 | // Construct the query to send to the Google Chart Tools. | |
42 | var query = [ | |
43 | 'chtt=Page+Speed+score:+' + score, | |
44 | 'chs=250x100', | |
45 | 'cht=gom', | |
46 | 'chd=t:' + score, | |
47 | 'chxt=x,y', | |
48 | 'chxl=0:|' + score, | |
49 | ].join('&'); | |
50 | var i = document.createElement('img'); | |
51 | i.src = CHART_API_URL + query; | |
52 | i.setAttribute('id', 'ometer'); | |
53 | document.getElementById('left').appendChild(i); | |
54 | }; | |
55 | ||
56 | var RESOURCE_TYPE_INFO = [ | |
57 | {label: 'JavaScript', field: 'javascriptResponseBytes', color: 'e2192c'}, | |
58 | {label: 'Images', field: 'imageResponseBytes', color: 'f3ed4a'}, | |
59 | {label: 'CSS', field: 'cssResponseBytes', color: 'ff7008'}, | |
60 | {label: 'HTML', field: 'htmlResponseBytes', color: '43c121'}, | |
61 | {label: 'Flash', field: 'flashResponseBytes', color: 'f8ce44'}, | |
62 | {label: 'Text', field: 'textResponseBytes', color: 'ad6bc5'}, | |
63 | {label: 'Other', field: 'otherResponseBytes', color: '1051e8'}, | |
64 | ]; | |
65 | ||
66 | callbacks.displayResourceSizeBreakdown = function(result) { | |
67 | var stats = result.pageStats; | |
68 | var labels = []; | |
69 | var data = []; | |
70 | var colors = []; | |
71 | var totalBytes = 0; | |
72 | var largestSingleCategory = 0; | |
73 | for (var i = 0, len = RESOURCE_TYPE_INFO.length; i < len; ++i) { | |
74 | var label = RESOURCE_TYPE_INFO[i].label; | |
75 | var field = RESOURCE_TYPE_INFO[i].field; | |
76 | var color = RESOURCE_TYPE_INFO[i].color; | |
77 | if (field in stats) { | |
78 | var val = Number(stats[field]); | |
79 | totalBytes += val; | |
80 | if (val > largestSingleCategory) largestSingleCategory = val; | |
81 | labels.push(label); | |
82 | data.push(val); | |
83 | colors.push(color); | |
84 | } | |
85 | } | |
86 | // Construct the query to send to the Google Chart Tools. | |
87 | var query = [ | |
88 | 'chs=300x140', | |
89 | 'cht=p3', //Chart type | |
90 | 'chts=' + ['000000', 16].join(','), | |
91 | 'chco=' + colors.join('|'), //Colors separated by | | |
92 | 'chd=t:' + data.join(','), //Pie data split by , | |
93 | 'chdl=' + labels.join('|'), //Name of labels/colors split by | | |
94 | 'chdls=000000,14', //Font size | |
95 | 'chp=1.6', | |
96 | 'chds=0,' + largestSingleCategory, | |
97 | ].join('&'); | |
98 | var i = document.createElement('img'); | |
99 | i.src = CHART_API_URL + query; | |
100 | i.setAttribute('id', 'piechart'); | |
101 | document.getElementById('right').appendChild(i); | |
102 | }; | |
103 | ||
104 | // Our JSONP callback. Checks for errors, then invokes our callback handlers. | |
105 | return function runPagespeedCallbacks(result) { | |
106 | if(result.error) { | |
107 | var errors =result.error.errors; | |
108 | for (var i = 0, len = errors.length; i < len; i++) { | |
109 | if(errors[i].reason == 'badRequest' && API_KEY == '{yourAPIKey}') { | |
110 | alert('Please specify your Google API key in the API_KEY variable.'); | |
111 | } else { | |
112 | alert(errors[i].message); | |
113 | } | |
114 | } | |
115 | return; | |
116 | } | |
117 | // Dispatch to each function on the callbacks object. | |
118 | for (var fn in callbacks) { | |
119 | var f = callbacks[fn]; | |
120 | if (typeof f == 'function') { | |
121 | callbacks[fn](result); | |
122 | } | |
123 | } | |
124 | } | |
125 | })(); |