Diese Seite wurde von der Cloud Translation API übersetzt.

Meine erste Client-Anwendung schreiben

Einführung

Dieses Dokument richtet sich an Entwickler, die Anwendungen erstellen möchten, die mit der PageSpeed Insights API interagieren können.

PageSpeed Insights ist ein Tool, mit dem Sie die tatsächliche Leistung einer Seite für Mobilgeräte und Computer abrufen können. Außerdem erhalten Sie Vorschläge zur Verbesserung der Seite, um Entwickler bei der Optimierung ihrer Webseiten zu unterstützen. Mit der PageSpeed Insights API kannst du programmatisch den PageSpeed-Geschwindigkeitswert, den Optimierungsfaktor und Vorschläge generieren.

Vorbereitung

Erstellen Sie sich ein Google-Konto

Sie benötigen ein Google-Konto, um einen API-Schlüssel abzurufen und Ihre Anwendung gegenüber Google zu identifizieren. Siehe dazu unten.

Mache dich mit PageSpeed vertraut.

Wenn Sie mit PageSpeed nicht vertraut sind, lesen Sie die Best Practices für die Webleistung von PageSpeed.

So identifizieren Sie Ihre Anwendung bei Google

Ihre Anwendung muss sich jedes Mal identifizieren, wenn sie eine Anfrage an die PageSpeed Insights API sendet. Dazu muss für jede Anfrage ein API-Schlüssel eingefügt werden.

API-Schlüssel erhalten und nutzen

Alternativ können Sie auf der Seite "Anmeldedaten" einen Schlüssel erstellen.

Nachdem Sie einen API-Schlüssel haben, kann Ihre Anwendung den Abfrageparameter key=yourAPIKey an alle Anfrage-URLs anhängen.

Der API-Schlüssel lässt sich sicher in URLs einbetten. Eine Codierung ist nicht notwendig.

Hintergrund der PageSpeed Insights API

Die von der PageSpeed Insights API zurückgegebenen Ergebnisse enthalten die folgenden Informationen:

Wird geladen: Der Bereich „Ladeerfahrung“ enthält eine Kategorie für die allgemeine Geschwindigkeit (SCHNELL, MITTELWERT oder LANGSAM) und Kategorieverteilungen.
Seitenstatistiken: Der Abschnitt „Seitenstatistiken“ enthält einige nützliche statistische Ergebnisse wie die erforderlichen Umläufe und die insgesamt genutzten Byte. Es zeigt an, dass die Seite möglicherweise schneller ist, wenn das Aussehen und die Funktionalität geändert werden.
Optimierungsfaktor: Der PageSpeed-Optimierungsfaktor (0–100) gibt an, wie gut eine Seite optimiert ist. Ein hoher Wert deutet auf wenig Verbesserungspotenzial hin, während ein niedriger Wert auf mehr Verbesserungspotenzial hinweist.
Regel: PageSpeed analysiert Webseiten anhand von Regeln. Jede PageSpeed-Regel basiert auf allgemeinen Prinzipien der Webseitenleistung wie Ressourcen-Caching, Daten-Upload- und -Downloadgröße und Client-Server-Umlaufzeiten. PageSpeed-Regeln generieren Regelergebnisse und Regelauswirkungen, wie unten beschrieben.
Regelergebnis: Ein Regelergebnis ist ein Vorschlag, der durch eine Regel generiert wird, die bei ihrer Implementierung die Seite beschleunigen und den PageSpeed-Wert für diese Seite erhöhen würde. Wenn beispielsweise eine komprimierbare Ressource unkomprimiert bereitgestellt wird, würde die PageSpeed-Regel Komprimierung aktivieren ein Ergebnis generieren, das dem Entwickler empfohlen, die Komprimierung für diese Ressource zu aktivieren.
Auswirkung der Regel: Jede PageSpeed-Regel generiert eine Auswirkungszahl (einen unbegrenzten Gleitkommawert), der die Wichtigkeit oder Priorität der Implementierung der Vorschläge der Regelergebnisse für die Regel im Verhältnis zu anderen Regeln angibt. Wenn beispielsweise durch die Aktivierung der Komprimierung 1 MB eingespart und durch die Optimierung der Bilder 500 KB eingespart würden, hat die Regel zum Aktivieren der Komprimierung einen doppelten Wert. Eine Auswirkung von null bedeutet, dass es keine Verbesserungsvorschläge für diese Regel gibt.

API aufrufen

Rufen Sie zum Aufrufen der API die Methode runPagespeed auf und geben Sie die URL, den API-Schlüssel und andere Parameter im Abfragestring an. Weitere Informationen finden Sie in der API-Referenz.

Beispiele für API-Aufrufe

Über die Befehlszeile

Sie können die PageSpeed Insights API über die Linux/UNIX-Befehlszeile mit einem Programm wie curl aufrufen.

Im folgenden Beispiel werden anhand dieses Ansatzes mobile PageSpeed-Ergebnisse für die URL https://developers.google.com/speed/pagespeed/insights/ abgerufen. Der PageSpeed-Wert, die Seitenstatistiken und die Ergebnisse im PageSpeed-Format werden im JSON-Datenformat zurückgegeben.

Formatierte Ergebnisse werden anhand von Regelkennungen wie AvoidBadRequests oder MinifyJavaScript verschlüsselt und enthalten den Wert und die Auswirkung für diese Regel sowie die Vorschläge, die von der Regel generiert werden und die bei ihrer Implementierung dazu führen, dass die Seite schneller geladen wird. Weitere Informationen zu den Feldern in der JSON-Antwort finden Sie in der PageSpeed Insights API-Referenz.

Anfrage

$ curl 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=https://developers.google.com/speed/pagespeed/insights/&strategy=mobile&key=yourAPIKey'

Antwort

{
 "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
 }
}

Aus JavaScript

Sie können die PageSpeed Insights API über JavaScript im Browser aufrufen, indem Sie den Abfrageparameter callback und eine Callback-Funktion verwenden, um JSON-P-Ergebnisse zu generieren. Auf diese Weise können Sie umfangreiche Anwendungen schreiben, die PageSpeed-Daten anzeigen, ohne serverseitigen Code schreiben zu müssen.

Im folgenden Beispiel werden PageSpeed-Ergebnisse und andere Informationen für die URL https://developers.google.com/speed/pagespeed/insights/ so dargestellt. In diesem Beispiel werden auch die Google-Diagrammtools verwendet, um die von der PageSpeed Insights API generierten Informationen zu visualisieren.

Geben Sie zuerst Ihren Google API-Schlüssel an (weitere Informationen zu API-Schlüsseln):

<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>

Rufen Sie als Nächstes die PageSpeed-Ergebnisse von der PageSpeed Insights API ab:

<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>

Mithilfe des obigen Codes zum Abrufen von Ergebnissen aus der PageSpeed Insights API können wir nun mithilfe der folgenden Beispiele interessante Informationen im Browser des Nutzers anzeigen.

Beispiel 1: Top-PageSpeed-Vorschläge anzeigen

In diesem Beispiel werden die Namen der besten PageSpeed-Vorschläge für die zu analysierende Seite als ungeordnete Liste angezeigt. Beispiel:

Browser-Caching nutzen
JavaScript später parsen
HTML reduzieren
JavaScript minimieren

Hinweis: Die zur Anzeige der vollständigen PageSpeed-Ergebnisse erforderlichen Daten werden von der PageSpeed Insights API bereitgestellt. Um das Beispiel einfach zu halten, werden hier jedoch nicht alle Daten verwendet.

<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>

Beispiel 2: Kreisdiagramm der Aufschlüsselung der Ressourcengröße anzeigen

Dieses Beispiel zeigt ein Kreisdiagramm, das die Aufschlüsselung der Ressourcengröße der analysierten Seite zeigt. Beispiel:

<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>

Demovideo

PageSpeed Insights API-Demo auf dem Google I/O BootCamp 2011.