View difference between Paste ID: RrQ2848j and fj9rP7FM
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
})();