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

Napisz swoją pierwszą aplikację kliencką

Wstęp

Ten dokument jest przeznaczony dla programistów, którzy chcą tworzyć aplikacje mogące 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 optymalizować strony internetowe. Możesz użyć interfejsu PageSpeed Insights API, aby automatycznie wygenerować wynik szybkości, wynik optymalizacji i sugestie PageSpeed.

Zanim zaczniesz

Załóż konto Google

Musisz mieć konto Google, aby uzyskać klucz interfejsu API umożliwiający identyfikację Twojej aplikacji dla Google. (Patrz niżej).

Poznaj PageSpeed

Jeśli nie znasz jeszcze PageSpeed, zapoznaj się ze sprawdzonymi metodami korzystania z internetu w tym narzędziu.

Dowiedz się, jak zidentyfikować aplikację dla Google

Aplikacja musi identyfikować się przy każdym wysyłaniu żądania 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ż je utworzyć na stronie Dane logowania.

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

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

Wprowadzenie do interfejsu PageSpeed Insights API

Wyniki zwracane przez interfejs PageSpeed Insights API obejmują te typy informacji:

Wczytuję doświadczenie: Sekcja Jakość wczytywania zawiera ogólną kategorię szybkości (FAST, AVERAGE lub SLOW) i rozkłady według kategorii.
Statystyki strony: Sekcja Statystyki strony zawiera przydatne wyniki statystyczne, takie jak wymagane przesyłanie w obie strony i łączna liczba użytych bajtów. Wskazuje on, czy strona może działać szybciej, jeśli zmienisz wygląd i funkcje.
Wynik optymalizacji: Wynik optymalizacji PageSpeed (0–100) wskazuje, jak dobrze jest zoptymalizowana strona. Wysoki wynik oznacza, że niewiele można poprawić, a niski wynik oznacza większe możliwości poprawy.
Reguła: PageSpeed analizuje strony internetowe, korzystając z reguł. Każda reguła PageSpeed opiera się na ogólnych zasadach dotyczących wydajności stron internetowych, takich jak buforowanie zasobów, rozmiar przesyłanych i pobieranych danych oraz czas błądzenia (klient-serwer). Reguły PageSpeed generują wyniki reguł i ich wpływ zgodnie z opisem poniżej.
Wynik reguły: Wynik reguły to sugestia wygenerowana przez regułę, której zastosowanie przyspieszyłoby działanie strony i podniosłoby jej wynik PageSpeed. Jeśli na przykład zasób kompresowy jest udostępniany bez kompresji, reguła Włącz kompresję narzędzia PageSpeed generuje wynik zalecany przez programistę, aby włączyć kompresję tego zasobu.
Wpływ reguły: Każda reguła PageSpeed generuje liczbę wpływu (nieograniczoną wartość zmiennoprzecinkową), która wskazuje wagę lub priorytet implementacji takich sugestii w porównaniu z innymi regułami. Jeśli np. włączenie kompresji zaoszczędzi 1 MB, a 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 0 oznacza, że nie ma sugestii 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 interfejsu API i inne parametry. Więcej informacji znajdziesz w dokumentacji API.

Przykładowe wywołania interfejsu API

Z poziomu wiersza poleceń

Interfejs PageSpeed Insights API możesz wywołać z wiersza poleceń w systemie Linux/UNIX, np. za pomocą programu curl.

W tym przykładzie użyto tej metody, aby pobrać wyniki PageSpeed dla strony https://developers.google.com/speed/pagespeed/insights/. Wynik PageSpeed, statystyki strony i wyniki w formacie PageSpeed są zwracane w formacie danych JSON.

Do sformatowanych wyników służą identyfikatory reguł (np. AvoidBadRequests czy MinifyJavaScript) i zawierają wynik oraz wpływ reguły, a także sugestie generowane przez regułę, których zaimplementowanie przyspieszy wczytywanie strony. Więcej informacji o polach w odpowiedzi JSON znajdziesz w dokumencie 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 PageSpeed Insights API możesz wywołać w przeglądarce z JavaScriptu w przeglądarce, używając parametru zapytania callback i funkcji wywołania zwrotnego do wygenerowania wyników JSON-P. Pozwala to na pisanie zaawansowanych aplikacji, które wyświetlają dane PageSpeed bez konieczności pisania kodu po stronie serwera.

W tym przykładzie użyto tej metody, aby wyświetlić wyniki PageSpeed i inne informacje dotyczące adresu URL https://developers.google.com/speed/pagespeed/insights/. W tym przykładzie użyto też narzędzi wykresów Google do wizualizacji informacji wygenerowanych przez interfejs PageSpeed Insights API.

Najpierw określ klucz interfejsu API Google (więcej informacji 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ć interesujące informacje w przeglądarce użytkownika zgodnie z poniższymi przykładami.

Przykład 1: wyświetlanie najlepszych sugestii dotyczących PageSpeed

W tym przykładzie są wyświetlane nazwy najczęstszych sugestii PageSpeed dla analizowanej strony w formie listy nieuporządkowanej. 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 PageSpeed pochodzą z interfejsu PageSpeed Insights API, ale nie wszystkie są tutaj używane, aby przykład był prosty.

<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 zestawieniem rozmiaru zasobu

W tym przykładzie wyświetlany jest wykres kołowy przedstawiający zestawienie rozmiaru zasobów na analizowanej stronie. 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 interfejsu PageSpeed Insights API na konferencji Google I/O BootCamp 2011.