Advertisement
ryan217

Pagespeed anonymize

Apr 24th, 2013
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (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.     // Our JSONP callback. Checks for errors, then invokes our callback handlers.
  30.     function runPagespeedCallbacks(result) {
  31.       if(result.error) {
  32.         var errors =result.error.errors;
  33.         for (var i = 0, len = errors.length; i < len; i++) {
  34.           if(errors[i].reason == 'badRequest' && API_KEY == '{yourAPIKey}') {
  35.             alert('Please specify your Google API key in the API_KEY variable.');
  36.           } else {
  37.             alert(errors[i].message);
  38.           }
  39.         }
  40.         return;
  41.       }
  42.       // Dispatch to each function on the callbacks object.
  43.       for (var fn in callbacks) {
  44.         var f = callbacks[fn];
  45.         if (typeof f == 'function') {
  46.           callbacks[fn](result);
  47.         }
  48.       }
  49.     }
  50.      
  51.     // Invoke the callback that fetches results. Async here so we're sure
  52.     // to discover any callbacks registered below, but this can be
  53.     // synchronous in your code.
  54.     setTimeout(runPagespeed, 0);
  55.      
  56.      
  57.      
  58.     //Google-O-Meter
  59.     callbacks.displayPageSpeedScore = function(result) {
  60.       var score = result.score;
  61.       // Construct the query to send to the Google Chart Tools.
  62.       var query = [
  63.         'chtt=Page+Speed+score:+' + score,
  64.         'chs=250x100',
  65.         'cht=gom',
  66.         'chd=t:' + score,
  67.         'chxt=x,y',
  68.         'chxl=0:|' + score,
  69.       ].join('&');
  70.       var i = document.createElement('img');
  71.       i.src = CHART_API_URL + query;
  72.       i.setAttribute('id', 'ometer');
  73.       document.getElementById('left').appendChild(i);
  74.     };
  75.      
  76.     var RESOURCE_TYPE_INFO = [
  77.       {label: 'JavaScript', field: 'javascriptResponseBytes', color: 'e2192c'},
  78.       {label: 'Images', field: 'imageResponseBytes', color: 'f3ed4a'},
  79.       {label: 'CSS', field: 'cssResponseBytes', color: 'ff7008'},
  80.       {label: 'HTML', field: 'htmlResponseBytes', color: '43c121'},
  81.       {label: 'Flash', field: 'flashResponseBytes', color: 'f8ce44'},
  82.       {label: 'Text', field: 'textResponseBytes', color: 'ad6bc5'},
  83.       {label: 'Other', field: 'otherResponseBytes', color: '1051e8'},
  84.     ];
  85.      
  86.     callbacks.displayResourceSizeBreakdown = function(result) {
  87.       var stats = result.pageStats;
  88.       var labels = [];
  89.       var data = [];
  90.       var colors = [];
  91.       var totalBytes = 0;
  92.       var largestSingleCategory = 0;
  93.       for (var i = 0, len = RESOURCE_TYPE_INFO.length; i < len; ++i) {
  94.         var label = RESOURCE_TYPE_INFO[i].label;
  95.         var field = RESOURCE_TYPE_INFO[i].field;
  96.         var color = RESOURCE_TYPE_INFO[i].color;
  97.         if (field in stats) {
  98.           var val = Number(stats[field]);
  99.           totalBytes += val;
  100.           if (val > largestSingleCategory) largestSingleCategory = val;
  101.           labels.push(label);
  102.           data.push(val);
  103.           colors.push(color);
  104.         }
  105.       }
  106.       // Construct the query to send to the Google Chart Tools.
  107.       var query = [
  108.         'chs=300x140',
  109.         'cht=p3', //Chart type
  110.         'chts=' + ['000000', 16].join(','),
  111.         'chco=' + colors.join('|'), //Colors separated by |
  112.         'chd=t:' + data.join(','), //Pie data split by ,
  113.         'chdl=' + labels.join('|'), //Name of labels/colors split by |
  114.         'chdls=000000,14', //Font size
  115.         'chp=1.6',
  116.         'chds=0,' + largestSingleCategory,
  117.       ].join('&');
  118.       var i = document.createElement('img');
  119.       i.src = CHART_API_URL + query;
  120.       i.setAttribute('id', 'piechart');
  121.       document.getElementById('right').appendChild(i);
  122.     };
  123. })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement