L’API Google speed

Google propose depuis aujourd’hui une nouvelle API, l’API google speed

Suite au lancement il y a quelques semaines de Google Speed online, Google a aujourd’hui lancé l’API correspondante.

Un panneau de limite de vitesse

Un panneau de limite de vitesse

Permettant de faire jusqu’à 250 requêtes par jour, c’est une API très intéressante permettant d’obtenir des informations sur le temps de chargement d’une page.

On peut ainsi obtenir :

  • le code réponse de la page
  • le title
  • les possibilités de minification du css
  • les possibilités de minification du javascript
  • le nombre de fichiers js appelés
  • le nombre de fichiers css appelés
  • la spécification des tailles des images
  • l’utilisation de css sprites
  • l’utilisation de @import de css
  • les dates d’expirations spécifiées suivant les types de fichiers
  • la minification des css
  • la minification de l’HTML
  • la minification du javascript
  • et j’en passe…

Si vous voulez tester l’outil en ligne, il existe une version avec test pour client dits desktop et une version pour les clients mobiles.

L’avantage de cette API est de pouvoir plus rapidement et plus facilement obtenir des informations concernant le temps de chargement d’une page, pour pouvoir par exemple les stocker et les comparer dans le temps.

Pour pouvoir à utiliser l’API, commencez par demander une clé et ensuite vous pourrez requêter Google en appellant l’url suivante :
https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=http://code.google.com/speed/page-speed/&key=votrecléAPI
Google vous retournera alors un résultat au format JSON, que vous pourrez exploiter.

Pour rendre tout cela un peu plus parlant, vous pouvez exploiter les graphiques proposés par Google en javascript. Commencez par définir votre clé et l’url d’appel :

<script>
// Définissez votre clé API ici :
var API_KEY = 'votrecléAPI';

// Définissez la page pour laquelle vous voulez interroger l'API :
var URL_TO_GET_RESULTS_FOR = 'http://code.google.com/speed/page-speed/';
</script>

Puis récupérez les résultats Google speed :

<script>
var API_URL = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?';
var CHART_API_URL = 'http://chart.apis.google.com/chart?';

// Object that will hold the callbacks that process results from the
// Page Speed Online API.
var callbacks = {}

// Invokes the Page Speed Online API. The response will contain
// JavaScript that invokes our callback with the Page Speed results.
function runPagespeed() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
var query = [
'url=' + URL_TO_GET_RESULTS_FOR,
'callback=runPagespeedCallbacks',
'key=' + API_KEY,
].join('&');
s.src = API_URL + query;
document.head.insertBefore(s, null);
}

// Our JSONP callback. Checks for errors, then invokes our callback handlers.
function runPagespeedCallbacks(result) {
if (result.error) {
var errors = result.error.errors;
for (var i = 0, len = errors.length; i < len; ++i) {
if (errors[i].reason == 'badRequest' && API_KEY == 'yourAPIKey') {
alert('Please specify your Google API key in the API_KEY variable.');
} else {
// NOTE: your real production app should use a better
// mechanism than alert() to communicate the error to the user.
alert(errors[i].message);
}
}
return;
}

// Dispatch to each function on the callbacks object.
for (var fn in callbacks) {
var f = callbacks[fn];
if (typeof f == 'function') {
callbacks[fn](result);
}
}
}

// Invoke the callback that fetches results. Async here so we're sure
// to discover any callbacks registered below, but this can be
// synchronous in your code.
setTimeout(runPagespeed, 0);
</script>

Maintenant, on va passer aux choses sérieuses et afficher des graphiques.
Pour un graphique que je qualifierai de « compteur de vitesse » :
Compteur de vitesse

<script>
callbacks.displayPageSpeedScore = function(result) {
var score = result.score;
// Construct the query to send to the Google Chart Tools.
var query = [
'chtt=Page+Speed+score:+' + score,
'chs=180x100',
'cht=gom',
'chd=t:' + score,
'chxt=x,y',
'chxl=0:|' + score,
].join('&');
var i = document.createElement('img');
i.src = CHART_API_URL + query;
document.body.insertBefore(i, null);
};
</script>

Pour une liste simple, comme ceci :

  • Minifier le css
  • Minifier le javascript

<script>
callbacks.displayTopPageSpeedSuggestions = function(result) {
var results = [];
var ruleResults = result.formattedResults.ruleResults;
for (var i in ruleResults) {
var ruleResult = ruleResults[i];
// Don't display lower-impact suggestions.
if (ruleResult.ruleImpact < 3.0) continue;
results.push({name: ruleResult.localizedRuleName,
impact: ruleResult.ruleImpact});
}
results.sort(sortByImpact);
var ul = document.createElement('ul');
for (var i = 0, len = results.length; i < len; ++i) {
var r = document.createElement('li');
r.innerHTML = results[i].name;
ul.insertBefore(r, null);
}
if (ul.hasChildNodes()) {
document.body.insertBefore(ul, null);
} else {
var div = document.createElement('div');
div.innerHTML = 'No high impact suggestions. Good job!';
document.body.insertBefore(div, null);
}
};

// Helper function that sorts results in order of impact.
function sortByImpact(a, b) { return b.impact - a.impact; }
</script>

Et le meilleur pour la fin, un graphique de type camembert qui classe les ressources par poids :
Camembert vitesse

<script>
var RESOURCE_TYPE_INFO = [
  {label: 'JavaScript', field: 'javascriptResponseBytes', color: 'e2192c'},
  {label: 'Images', field: 'imageResponseBytes', color: 'f3ed4a'},
  {label: 'CSS', field: 'cssResponseBytes', color: 'ff7008'},
  {label: 'HTML', field: 'htmlResponseBytes', color: '43c121'},
  {label: 'Flash', field: 'flashResponseBytes', color: 'f8ce44'},
  {label: 'Text', field: 'textResponseBytes', color: 'ad6bc5'},
  {label: 'Other', field: 'otherResponseBytes', color: '1051e8'},
];

callbacks.displayResourceSizeBreakdown = function(result) {
  var stats = result.pageStats;
  var labels = [];
  var data = [];
  var colors = [];
  var totalBytes = 0;
  var largestSingleCategory = 0;
  for (var i = 0, len = RESOURCE_TYPE_INFO.length; i < len; ++i) {
    var label = RESOURCE_TYPE_INFO[i].label;
    var field = RESOURCE_TYPE_INFO[i].field;
    var color = RESOURCE_TYPE_INFO[i].color;
    if (field in stats) {
      var val = Number(stats[field]);
      totalBytes += val;
      if (val > largestSingleCategory) largestSingleCategory = val;
      labels.push(label);
      data.push(val);
      colors.push(color);
    }
  }
  // Construct the query to send to the Google Chart Tools.
  var query = [
    'chs=300x140',
    'cht=p3',
    'chts=' + ['000000', 16].join(','),
    'chco=' + colors.join('|'),
    'chd=t:' + data.join(','),
    'chdl=' + labels.join('|'),
    'chdls=000000,14',
    'chp=1.6',
    'chds=0,' + largestSingleCategory,
  ].join('&');
  var i = document.createElement('img');
  i.src = 'http://chart.apis.google.com/chart?' + query;
  document.body.insertBefore(i, null);
};
</script>

A votre tour maintenant, si vous avez des bonnes astuces à faire partager, allez-y !

3 réponses sur L’API Google speed

  1. Est-ce que ça rejoint les infos disponibles dans Google Analytics ?

  2. Disons qu’il faut utiliser les deux pour pouvoir faire fignoler son temps de chargement. Google Analytics constate, l’API explique.

  3. J’ai apporté quelques modifications par rapport à la doc de Google. Je partagerai pour afficher un peu plus d’infos

Laisser un commentaire

CommentLuv badge