Diese Seite wurde von der Cloud Translation API übersetzt.

Meine erste Client-Anwendung schreiben

Einführung

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

PageSpeed Insights ist ein Tool, mit dem die tatsächliche Leistung einer Seite auf Mobil- und Desktop-Geräten erfasst und Verbesserungsvorschläge für Entwickler gemacht werden. Mit der PageSpeed Insights API können Sie programmatisch den PageSpeed-Geschwindigkeitsfaktor, den Optimierungsfaktor und Vorschläge generieren.

Vorbereitung

Erstellen Sie sich ein Google-Konto

Sie benötigen ein Google-Konto, um einen API-Schlüssel zu erhalten, mit dem Ihre Anwendung bei Google identifiziert werden kann. Siehe dazu unten.

PageSpeed kennenlernen

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

Informationen zum Identifizieren Ihrer Anwendung für Google

Ihre Anwendung muss sich jedes Mal identifizieren, wenn sie eine Anfrage an die PageSpeed Insights API sendet. Dazu muss bei jeder Anfrage ein API-Schlüssel angegeben 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.

PageSpeed Insights API – Hintergrund

Die Ergebnisse der PageSpeed Insights API umfassen die folgenden Arten von Informationen:

Ladezeit: Der Bereich „Ladegeschwindigkeit“ enthält eine allgemeine Geschwindigkeitskategorie (SCHNELL, MITTELWERT oder LANGSAM) und die Verteilung nach Kategorien.
Seitenstatistiken: Der Bereich „Seitenstatistiken“ enthält einige nützliche statistische Ergebnisse wie die erforderlichen Roundtrips und die insgesamt verwendeten Byte. Hier ist möglicherweise auch angegeben, ob eine Seite schneller sein könnte, wenn der Entwickler Erscheinungsbild und Funktionalität der Seite ändern würde.
Optimierungsfaktor: Der PageSpeed-Optimierungsfaktor (0–100) gibt an, wie gut eine Seite optimiert ist. Ein hoher Wert bedeutet, dass nur wenig Optimierungspotenzial besteht, während ein niedriger Wert auf größere Optimierungsmöglichkeiten hinweist.
Regel: PageSpeed analysiert Webseiten anhand von Regeln. Jede PageSpeed-Regel basiert auf allgemeinen Prinzipien für die Leistung von Webseiten, darunter Ressourcen-Caching, Upload- und Downloadgröße von Daten und Umlaufzeit von Client-Servern. PageSpeed-Regeln generieren Regelergebnisse und Regelauswirkungen, die unten beschrieben werden.
Regelergebnis: Ein Regelergebnis ist ein Vorschlag, der von einer Regel generiert wird. Wenn er umgesetzt wird, wird die Seite schneller und die PageSpeed-Bewertung für diese Seite steigt. Wenn beispielsweise eine komprimierbare Ressource unkomprimiert bereitgestellt wird, generiert die PageSpeed-Regel Komprimierung aktivieren ein Ergebnis, das dem Entwickler empfiehlt, die Komprimierung für diese Ressource zu aktivieren.
Auswirkung der Regel: Für jede PageSpeed-Regel wird eine Effektivitätszahl (ein unbegrenzter Gleitkommawert) generiert, die die Wichtigkeit oder Priorität der Implementierung der Regelergebnisvorschläge für die Regel im Vergleich zu anderen Regeln angibt. Wenn durch die Aktivierung der Komprimierung beispielsweise 1 MB eingespart werden würde, während durch die Optimierung von Bildern 500 KB eingespart werden würde, hätte die Regel zum Aktivieren der Komprimierung einen doppelt so hohen Wirkungswert wie bei der Regel „Bilder optimieren“. Ein Wert von null bedeutet, dass es für diese Regel keine Verbesserungsvorschläge 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 den API-Referenzdokumenten.

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 wird dieser Ansatz verwendet, um mobile PageSpeed-Ergebnisse für die URL https://developers.google.com/speed/pagespeed/insights/ abzurufen. Der PageSpeed-Wert, die Seitenstatistiken und die im PageSpeed-Format formatierten Ergebnisse werden im JSON-Datenformat zurückgegeben.

Formatierte Ergebnisse werden durch Regelkennungen wie AvoidBadRequests oder MinifyJavaScript gekennzeichnet und enthalten den Wert und die Auswirkungen für diese Regel sowie Vorschläge, die von der Regel generiert werden und die den Seitenaufbau beschleunigen, wenn sie implementiert werden. Weitere Informationen zu den Feldern in der JSON-Antwort finden Sie im Referenzdokument zur PageSpeed Insights API.

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

Über JavaScript

Sie können die PageSpeed Insights API über JavaScript im Browser aufrufen und mit dem Abfrageparameter callback und einer Rückruffunktion JSON-P-Ergebnisse generieren. So können Sie umfangreiche Anwendungen erstellen, die PageSpeed-Daten anzeigen, ohne serverseitigen Code schreiben zu müssen.

Im folgenden Beispiel werden mit diesem Ansatz PageSpeed-Ergebnisse und andere Informationen für die URL https://developers.google.com/speed/pagespeed/insights/ angezeigt. 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 PageSpeed-Ergebnisse aus 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>

Wenn Sie den Code oben verwenden, um Ergebnisse aus der PageSpeed Insights API abzurufen, können nun anhand der folgenden Beispiele interessante Informationen im Browser des Nutzers angezeigt werden.

Beispiel 1: Top-PageSpeed-Vorschläge anzeigen

In diesem Beispiel werden die Namen der wichtigsten PageSpeed-Vorschläge für die analysierte Seite als unsortierte Liste angezeigt. Beispiel:

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

Hinweis: Die Daten, die zum Anzeigen der vollständigen PageSpeed-Ergebnisse erforderlich sind, werden von der PageSpeed Insights API bereitgestellt. Um das Beispiel möglichst 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 mit Aufschlüsselung nach Ressourcengröße anzeigen

In diesem Beispiel wird ein Kreisdiagramm angezeigt, 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

Demo der PageSpeed Insights API beim Google I/O BootCamp 2011