Ta strona została przetłumaczona przez Cloud Translation API.

Napisz swoją pierwszą aplikację kliencką

Wprowadzenie

Ten dokument jest przeznaczony dla programistów, którzy chcą pisać aplikacje, które mogą współpracować z interfejsem PageSpeed Insights API.

PageSpeed Insights to narzędzie, które raportuje rzeczywistą wydajność strony na urządzeniach mobilnych i komputerach oraz sugeruje, jak można ją ulepszyć, aby pomóc deweloperom w optymalizacji stron internetowych. Do automatycznego generowania wyniku szybkości, wyniku optymalizacji i sugestii PageSpeed możesz użyć interfejsu PageSpeed Insights API.

Zanim rozpoczniesz

Załóż konto Google

Musisz mieć konto Google i uzyskać klucz interfejsu API, który umożliwi Google identyfikację Twojej aplikacji. (Patrz niżej).

Zapoznaj się z PageSpeed

Jeśli nie znasz PageSpeed, zapoznaj się ze sprawdzonymi metodami dotyczącymi wydajności witryny.

Dowiedz się, jak zidentyfikować aplikację w Google

Aplikacja musi się identyfikować za każdym razem, gdy wysyła żądanie do interfejsu PageSpeed Insights API, dołączając do każdego żądania klucz interfejsu API.

Uzyskiwanie i używanie klucza interfejsu API

Możesz też utworzyć konto na stronie Dane logowania.

Gdy uzyskasz klucz interfejsu API, aplikacja może dołączać parametr zapytania key=yourAPIKey do wszystkich adresów URL żądań.

Klucz interfejsu API można bezpiecznie umieszczać w adresach URL, więc nie trzeba go kodować.

Informacje ogólne o interfejsie PageSpeed Insights API

Wyniki zwracane przez interfejs PageSpeed Insights API zawierają następujące typy informacji:

Wczytywanie: Sekcja Sposób ładowania zawiera ogólną kategorię szybkości (SZYBKA, ŚREDNIA lub POWOLNA) oraz rozkłady kategorii.
Statystyki strony: Sekcja Statystyki strony zawiera przydatne wyniki statystyczne, takie jak wymagana liczba cykli wymiany danych i łączna liczba bajtów. Informuje, jeśli strona może przyspieszyć działanie po zmianie wyglądu i funkcji.
Wynik optymalizacji: Wynik optymalizacji PageSpeed (0–100) wskazuje, jak dobrze zoptymalizowana jest strona. Wysoki wynik oznacza, że niewiele można poprawić, a niski wynik oznacza, że można jeszcze poprawić.
Reguła: PageSpeed analizuje strony internetowe za pomocą reguł. Każda reguła PageSpeed jest oparta na ogólnych zasadach dotyczących wydajności stron internetowych, takich jak buforowanie zasobów, rozmiar przesyłanych i pobieranych danych oraz czas obiegu serwera klienta. Reguły PageSpeed generują wyniki i wpływ reguł, co opisano poniżej.
Wynik reguły: Wynik reguły to sugestia generowana przez regułę, która – po zaimplementowaniu – przyspieszy działanie strony i zwiększy jej wynik w PageSpeed. Jeśli na przykład zasób skompresowany jest udostępniany bez kompresji, reguła Włącz kompresję PageSpeed wygeneruje wynik sugerujący, że programista powinien włączyć kompresję tego zasobu.
Wpływ reguły: Każda reguła PageSpeed generuje liczbę wpływu (nieograniczoną wartość zmiennoprzecinkową), która wskazuje na wagę lub priorytet wdrożenia sugestii dotyczących reguły w porównaniu z innymi regułami. Jeśli na przykład włączenie kompresji pozwoli zaoszczędzić 1 MB, podczas gdy optymalizacja obrazów pozwoli zaoszczędzić 500 KB, reguła „Włącz kompresję” będzie miała dwukrotnie większy wpływ niż reguła „Optymalizuj obrazy”. Wpływ równy 0 oznacza, że nie ma żadnych sugestii dotyczących poprawy danej reguły.

Wywoływanie interfejsu API

Aby wywołać interfejs API, wywołaj metodę runPagespeed, podając w ciągu zapytania adres URL, klucz API i inne parametry. Więcej informacji znajdziesz w dokumentach Dokumentacja interfejsu API.

Przykładowe wywołania interfejsu API

Z poziomu wiersza poleceń

Interfejs PageSpeed Insights API możesz wywołać z poziomu wiersza poleceń systemu Linux/UNIX za pomocą programu takiego jak curl.

W tym przykładzie korzystamy z tego podejścia, aby pobrać wyniki PageSpeed dla adresu URL https://developers.google.com/speed/pagespeed/insights/. Wynik PageSpeed, statystyki strony i wyniki sformatowane przez PageSpeed są zwracane w formacie danych JSON.

Sformatowane wyniki są powiązane z identyfikatorami reguł (np. AvoidBadRequests lub MinifyJavaScript) i zawierają wynik oraz wpływ tej reguły, a także sugestie wygenerowane przez regułę, które po wprowadzeniu przyspieszą wczytywanie strony. Więcej informacji o polach odpowiedzi JSON znajdziesz w dokumentacji interfejsu PageSpeed Insights API.

Prośba:

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

Odpowiedź:

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

Z JavaScriptu

Interfejs API PageSpeed Insights możesz wywoływać z JavaScriptu w przeglądarce, używając parametru zapytania callback i funkcji wywołania zwrotnego, aby generować wyniki w formacie JSON-P. Dzięki temu możesz pisać rozbudowane aplikacje wyświetlające dane PageSpeed bez konieczności pisania kodu po stronie serwera.

W tym przykładzie zastosowano to podejście do wyświetlania wyników PageSpeed i innych informacji dotyczących adresu URL https://developers.google.com/speed/pagespeed/insights/. W tym przykładzie wykorzystano też Google Chart Tools do wizualizacji informacji generowanych przez interfejs PageSpeed Insights API.

Najpierw podaj klucz interfejsu API Google (dowiedz się więcej o kluczach interfejsu 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>

Następnie pobierz wyniki PageSpeed z interfejsu PageSpeed Insights API:

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

Używając powyższego kodu do pobierania wyników z interfejsu PageSpeed Insights API, możemy teraz wyświetlać w przeglądarce użytkownika interesujące informacje zgodnie z poniższymi przykładami.

Przykład 1. Wyświetlanie najważniejszych sugestii PageSpeed

W tym przykładzie wyświetlane są nazwy najważniejszych sugestii PageSpeed dotyczących analizowanej strony w postaci nieuporządkowanej listy. Na przykład:

Wykorzystaj pamięć podręczną przeglądarki
Wstrzymaj analizowanie kodu JavaScript
Zmniejsz HTML
Zmniejsz JavaScript

Uwaga: dane potrzebne do wyświetlenia pełnych wyników w PageSpeed są dostarczane przez interfejs PageSpeed Insights API, ale aby zachować prostotę, nie wykorzystaliśmy tu wszystkich danych.

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

Przykład 2. Wyświetlanie wykresu kołowego z podziałem rozmiaru zasobów

Ten przykład przedstawia wykres kołowy przedstawiający podział rozmiaru zasobów na stronie analizowanej. Na przykład:

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

Film demonstracyjny

Prezentacja PageSpeed Insights API na konferencji Google I/O BootCamp 2011.