Introduction
Ce document est destiné aux développeurs qui souhaitent développer des applications capables d'interagir avec l'API PageSpeed Insights.
PageSpeed Insights est un outil qui génère des rapports sur les performances réelles d'une page sur les appareils mobiles et les ordinateurs, et propose des suggestions d'amélioration pour aider les développeurs à optimiser leurs pages Web. Vous pouvez utiliser l'API PageSpeed Insights pour générer de manière programmatique le score de vitesse, le taux d'optimisation et des suggestions.
Avant de commencer
Obtenir un compte Google
Vous devez disposer d'un compte Google pour obtenir une clé API permettant à Google d'identifier votre application. (voir ci-dessous).
Se familiariser avec PageSpeed
Si vous ne connaissez pas PageSpeed, consultez les Bonnes pratiques liées aux performances sur le Web.
Découvrez comment identifier votre application auprès de Google.
Votre application doit s'identifier chaque fois qu'elle envoie une requête à l'API PageSpeed Insights, en incluant une clé API dans chaque requête.
Obtenir et utiliser une clé API
Obtenir une cléVous pouvez également en créer un sur la page Identifiants.
Une fois la clé API obtenue, votre application peut ajouter le paramètre de requête key=yourAPIKey à toutes les URL de requête.
La clé API peut s'intégrer aux URL en toute sécurité et ne nécessite pas d'encodage.
Contexte de l'API PageSpeed Insights
Les résultats renvoyés par l'API PageSpeed Insights incluent les types d'informations suivants:
- Chargement de l'expérience...
- La section "Expérience de chargement" inclut une catégorie de vitesse globale (RAPIDE, MOYENNE ou LENTE) et des distributions par catégorie.
- Statistiques de la page
- La section "Page Stats" contient des résultats statistiques utiles, comme le nombre d'allers-retours requis et le nombre total d'octets utilisés. Il indique si la page peut être plus rapide en modifiant l'apparence et les fonctionnalités.
- Taux d'optimisation
- Le score d'optimisation PageSpeed (0-100) indique dans quelle mesure la page est bien optimisée. Un score élevé indique qu'il y a peu de marge de progression, tandis qu'un score faible indique qu'il y a davantage de possibilités d'amélioration.
- Règle
- PageSpeed analyse les pages Web à l'aide de règles. Chaque règle PageSpeed est basée sur des principes généraux de performance des pages Web, tels que la mise en cache des ressources, la taille de l'importation et du téléchargement des données, et les délais aller-retour client-serveur. Les règles PageSpeed génèrent des résultats et des impacts sur ces règles, comme décrit ci-dessous.
- Résultat de la règle
- Un résultat de règle est une suggestion générée par une règle qui, si elle est implémentée, rendrait la page plus rapide et augmenterait le score PageSpeed de cette page. Par exemple, si une ressource compressible est diffusée sans être compressée, la règle de PageSpeed Activer la compression génère un résultat qui recommande au développeur d'activer la compression pour cette ressource.
- Impact des règles
- Chaque règle PageSpeed génère un nombre d'impact (une valeur à virgule flottante illimitée) qui indique l'importance ou la priorité de l'implémentation des suggestions de résultats de la règle par rapport aux autres règles. Par exemple, si l'activation de la compression permet de gagner 1 Mo, tandis que l'optimisation des images permet d'économiser 500 Ko, la valeur d'impact de la règle "Activer la compression" est deux fois supérieure à celle de la règle "Optimiser les images". Une incidence de zéro indique qu'il n'existe aucune suggestion d'amélioration pour cette règle.
Appeler l'API
Pour appeler l'API, appelez la méthode runPagespeed en spécifiant l'URL, la clé API et d'autres paramètres dans la chaîne de requête. Pour en savoir plus, consultez la documentation de référence de l'API.
Exemples d'appels d'API
Depuis la ligne de commande
Vous pouvez appeler l'API PageSpeed Insights à partir de la ligne de commande Linux/UNIX, à l'aide d'un programme comme curl.
L'exemple suivant utilise cette approche pour récupérer les résultats PageSpeed sur mobile pour l'URL https://developers.google.com/speed/pagespeed/insights/. Le score PageSpeed, les statistiques des pages et les résultats au format PageSpeed sont renvoyés au format de données JSON.
Les résultats mis en forme sont associés à des identifiants de règle (tels que AvoidBadRequests ou MinifyJavaScript). Ils contiennent le score et l'impact de cette règle, ainsi que les suggestions générées par la règle qui, si elle est implémentée, accélérera le chargement de la page. Pour en savoir plus sur les champs de la réponse JSON, consultez la documentation de référence de l'API PageSpeed Insights.
Requête :
$ curl 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=https://developers.google.com/speed/pagespeed/insights/&strategy=mobile&key=yourAPIKey'
Réponse :
{
"captchaResult": "CAPTCHA_NOT_NEEDED",
"kind": "pagespeedonline#result",
"id": "https://developers.google.com/speed/pagespeed/insights/",
"responseCode": 200,
"title": "PageSpeed Insights",
"ruleGroups": {
"SPEED": {
"score": 99
}
},
"loadingExperience": {
"id": "https://developers.google.com/speed/pagespeed/insights/",
"metrics": {
"FIRST_CONTENTFUL_PAINT_MS": {
"median": 678,
"distributions": [
{
"min": 0,
"max": 1567,
"proportion": 0.8726942914078067
},
{
"min": 1567,
"max": 2963,
"proportion": 0.07357226585394444
},
{
"min": 2963,
"proportion": 0.053733442738248746
}
],
"category": "FAST"
},
"DOM_CONTENT_LOADED_EVENT_FIRED_MS": {
"median": 559,
"distributions": [
{
"min": 0,
"max": 2120,
"proportion": 0.9287991742172268
},
{
"min": 2120,
"max": 4226,
"proportion": 0.035877050120426655
},
{
"min": 4226,
"proportion": 0.0353237756623466
}
],
"category": "FAST"
}
},
"overall_category": "FAST",
"initial_url": "https://developers.google.com/speed/pagespeed/insights/"
},
"pageStats": {
"numberResources": 11,
"numberHosts": 6,
"totalRequestBytes": "1874",
"numberStaticResources": 6,
"htmlResponseBytes": "72494",
"overTheWireResponseBytes": "324002",
"cssResponseBytes": "8467",
"imageResponseBytes": "5363",
"javascriptResponseBytes": "841488",
"otherResponseBytes": "14548",
"numberJsResources": 4,
"numberCssResources": 1,
"numTotalRoundTrips": 13,
"numRenderBlockingRoundTrips": 0
},
"formattedResults": {
"locale": "en_US",
"ruleResults": {
"AvoidLandingPageRedirects": {
"localizedRuleName": "Avoid landing page redirects",
"ruleImpact": 0.0,
"groups": [
"SPEED"
],
"summary": {
"format": "Your page has no redirects. Learn more about {{BEGIN_LINK}}avoiding landing page redirects{{END_LINK}}.",
"args": [
{
"type": "HYPERLINK",
"key": "LINK",
"value": "https://developers.google.com/speed/docs/insights/AvoidRedirects"
}
]
}
},
"EnableGzipCompression": {
"localizedRuleName": "Enable compression",
"ruleImpact": 0.0,
"groups": [
"SPEED"
],
"summary": {
"format": "You have compression enabled. Learn more about {{BEGIN_LINK}}enabling compression{{END_LINK}}.",
"args": [
{
"type": "HYPERLINK",
"key": "LINK",
"value": "https://developers.google.com/speed/docs/insights/EnableCompression"
}
]
}
},
...
"PrioritizeVisibleContent": {
"localizedRuleName": "Prioritize visible content",
"ruleImpact": 0.0,
"groups": [
"SPEED"
],
"summary": {
"format": "You have the above-the-fold content properly prioritized. Learn more about {{BEGIN_LINK}}prioritizing visible content{{END_LINK}}.",
"args": [
{
"type": "HYPERLINK",
"key": "LINK",
"value": "https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent"
}
]
}
}
}
},
"version": {
"major": 1,
"minor": 15
}
}
À partir de JavaScript
Vous pouvez appeler l'API PageSpeed Insights à partir de JavaScript dans le navigateur à l'aide du paramètre de requête callback et d'une fonction de rappel pour générer des résultats JSON-P. Vous pouvez ainsi développer des applications enrichies qui affichent des données PageSpeed, sans avoir à écrire de code côté serveur.
L'exemple suivant utilise cette approche pour afficher les résultats PageSpeed et d'autres informations concernant l'URL https://developers.google.com/speed/pagespeed/insights/. Cet exemple utilise également les outils de graphique Google pour visualiser les informations générées par l'API PageSpeed Insights.
Commencez par spécifier votre clé API Google (en savoir plus sur les clés API):
<script>
// Specify your actual API key here:
var API_KEY = 'yourAPIKey';
// Specify the URL you want PageSpeed results for here:
var URL_TO_GET_RESULTS_FOR = 'https://developers.google.com/speed/pagespeed/insights/';
</script>
Ensuite, récupérez les résultats de PageSpeed depuis l'API PageSpeed Insights:
<script>
var API_URL = 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?';
var CHART_API_URL = 'http://chart.apis.google.com/chart?';
// Object that will hold the callbacks that process results from the
// PageSpeed Insights API.
var callbacks = {}
// Invokes the PageSpeed Insights API. The response will contain
// JavaScript that invokes our callback with the PageSpeed 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>
Grâce au code ci-dessus afin d'extraire les résultats de l'API PageSpeed Insights, nous pouvons désormais afficher des informations intéressantes dans le navigateur de l'utilisateur, comme le montre les exemples ci-dessous.
Exemple 1: Afficher les principales suggestions de PageSpeed
Cet exemple affiche les noms des principales suggestions PageSpeed pour la page en cours d'analyse, sous forme de liste non ordonnée. Exemple :
- Exploiter la mise en cache du navigateur
- Différer l'analyse du code JavaScript
- Réduire la taille des ressources HTML
- Réduire la taille des ressources JavaScript
Remarque: Les données nécessaires pour afficher les résultats complets de PageSpeed Insights sont fournies par l'API PageSpeed Insights. Toutefois, pour que cet exemple reste simple, toutes ces données ne sont pas utilisées ici.
<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>
Exemple 2: Afficher un graphique à secteurs de répartition par taille des ressources
Cet exemple affiche un graphique à secteurs indiquant la répartition par taille des ressources de la page en cours d'analyse. Exemple :
<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>
Vidéo de démonstration
Démonstration de l'API PageSpeed Insights lors du BootCamp 2011 du Google I/O