Pierwsze kroki z PageSpeed Insights API

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Za pomocą interfejsu PageSpeed Insights API możesz:

  • Pomiar skuteczności strony internetowej.
  • Sugestie dotyczące poprawy wydajności, ułatwień dostępu i SEO strony.
  • Dowiedz się, jak przekonwertować stronę w progresywną aplikację internetową.

Interfejs PageSpeed Insights API zwraca rzeczywiste dane z raportu na temat użytkowania Chrome i dane laboratoryjne z Lighthouse.

Wymagania wstępne

W tym samouczku zakładamy, że masz ogólną wiedzę o interfejsach wiersza poleceń i tworzeniu stron internetowych.

Opcjonalnie: konfigurowanie klucza interfejsu API

Jeśli chcesz wypróbować tylko interfejs PageSpeed Insights API, nie potrzebujesz klucza interfejsu API. Jeśli planujesz korzystać z interfejsu API w sposób zautomatyzowany i wysyłać wiele zapytań na sekundę, będziesz potrzebować klucza interfejsu API.

Uzyskiwanie i używanie klucza interfejsu API

Pobieranie klucza

Możesz też utworzyć je 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ć.

API Explorer

Aby generować wywołania do interfejsu PageSpeed Insights API bez konieczności pisania kodu, zajrzyj do eksploratora interfejsu API.

CURL

Aby wypróbować interfejs PageSpeed Insights API z poziomu wiersza poleceń:

  1. Otwórz terminal.
  2. Uruchom podane niżej polecenie. Dołącz &key=yourAPIKey, jeśli używasz klucza interfejsu API.

    curl https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://developers.google.com
    

    Odpowiedź jest obiektem JSON. Więcej informacji o każdej właściwości obiektu odpowiedzi znajdziesz w artykule Response (Odpowiedź).

    {
     "captchaResult": "CAPTCHA_NOT_NEEDED",
     "kind": "pagespeedonline#result",
     "id": "https://developers.google.com/",
     "loadingExperience": {
      "id": "https://developers.google.com/",
      "metrics": {
       "FIRST_CONTENTFUL_PAINT_MS": {
        "percentile": 3482,
        "distributions": [
         {
          "min": 0,
          "max": 1000,
          "proportion": 0.37151728768042963
         },
         {
          "min": 1000,
          "max": 2500,
          "proportion": 0.4244153519077991
         },
         {
          "min": 2500,
          "proportion": 0.2040673604117713
         }
        ],
        "category": "SLOW"
       },
       "FIRST_INPUT_DELAY_MS": {
        "percentile": 36,
        "distributions": [
         {
          "min": 0,
          "max": 50,
          "proportion": 0.960628961482204
         },
         {
          "min": 50,
          "max": 250,
          "proportion": 0.02888834714773281
         },
         {
          "min": 250,
          "proportion": 0.010482691370063388
         }
        ],
        "category": "FAST"
       }
      },
      "overall_category": "SLOW",
      "initial_url": "https://developers.google.com/"
     },
     "originLoadingExperience": {
      "id": "https://developers.google.com",
      "metrics": {
       "FIRST_CONTENTFUL_PAINT_MS": {
        "percentile": 2761,
        "distributions": [
         {
          "min": 0,
          "max": 1000,
          "proportion": 0.4236433226493666
         },
         {
          "min": 1000,
          "max": 2500,
          "proportion": 0.45045120795679117
         },
         {
          "min": 2500,
          "proportion": 0.1259054693938423
         }
        ],
        "category": "SLOW"
       },
       "FIRST_INPUT_DELAY_MS": {
        "percentile": 45,
        "distributions": [
         {
          "min": 0,
          "max": 50,
          "proportion": 0.9537371485251699
         },
         {
          "min": 50,
          "max": 250,
          "proportion": 0.03044972719889055
         },
         {
          "min": 250,
          "proportion": 0.01581312427593959
         }
        ],
        "category": "FAST"
       }
      },
      "overall_category": "SLOW",
      "initial_url": "https://developers.google.com/"
     },
     "lighthouseResult": {
      "requestedUrl": "https://developers.google.com/",
      "finalUrl": "https://developers.google.com/",
      "lighthouseVersion": "3.2.0",
      "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/72.0.3584.0 Safari/537.36",
      "fetchTime": "2018-11-01T03:03:58.394Z",
      "environment": {
       "networkUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3559.0 Safari/537.36",
       "hostUserAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/72.0.3584.0 Safari/537.36",
       "benchmarkIndex": 590.0
      },
      "runWarnings": [],
      "configSettings": {
       "emulatedFormFactor": "desktop",
       "locale": "en-US",
       "onlyCategories": [
        "performance"
       ]
      },
      "audits": {
       "estimated-input-latency": {
        "id": "estimated-input-latency",
        "title": "Estimated Input Latency",
        "description": "The score above is an estimate of how long your app takes to respond to user input, in milliseconds, during the busiest 5s window of page load. If your latency is higher than 50 ms, users may perceive your app as laggy. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency).",
        "score": 1.0,
        "scoreDisplayMode": "numeric",
        "displayValue": "30 ms"
       },
       "uses-rel-preconnect": {
        "id": "uses-rel-preconnect",
        "title": "Preconnect to required origins",
        "description": "Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).",
        "score": 1.0,
        "scoreDisplayMode": "numeric",
        "details": {
         "headings": [],
         "type": "opportunity",
         "items": [],
         "overallSavingsMs": 0.0
        }
       },
       ...
      },
      "categories": {
       "performance": {
        "id": "performance",
        "title": "Performance",
        "score": 0.96,
        "auditRefs": [
         {
          "id": "first-contentful-paint",
          "weight": 3.0,
          "group": "metrics"
         },
         {
          "id": "first-meaningful-paint",
          "weight": 1.0,
          "group": "metrics"
         },
         ...
        ]
       }
      },
      "categoryGroups": {
       "a11y-element-names": {
        "title": "Elements Have Discernible Names",
        "description": "These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader."
       },
       "a11y-language": {
        "title": "Page Specifies Valid Language",
        "description": "These are opportunities to improve the interpretation of your content by users in different locales."
       },
       ...
      },
      "i18n": {
       "rendererFormattedStrings": {
        "varianceDisclaimer": "Values are estimated and may vary.",
        "opportunityResourceColumnLabel": "Opportunity",
        "opportunitySavingsColumnLabel": "Estimated Savings",
        "errorMissingAuditInfo": "Report error: no audit information",
        "errorLabel": "Error!",
        "warningHeader": "Warnings: ",
        "auditGroupExpandTooltip": "Show audits",
        "passedAuditsGroupTitle": "Passed audits",
        "notApplicableAuditsGroupTitle": "Not applicable",
        "manualAuditsGroupTitle": "Additional items to manually check",
        "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:",
        "scorescaleLabel": "Score scale:",
        "crcLongestDurationLabel": "Maximum critical path latency:",
        "crcInitialNavigation": "Initial Navigation",
        "lsPerformanceCategoryDescription": "[Lighthouse](https://developers.google.com/web/tools/lighthouse/) analysis of the current page on an emulated mobile network. Values are estimated and may vary.",
        "labDataTitle": "Lab Data"
       }
      }
     },
     "analysisUTCTimestamp": "2018-11-01T03:03:58.394Z"
    }
    

JavaScript

Aby wypróbować interfejs PageSpeed Insights API z poziomu kodu JavaScript:

  1. Skopiuj poniższy kod. Kod wykorzystuje interfejs PageSpeed Insights API do pomiaru skuteczności interfejsu https://developers.google.com, a potem wyświetla wyniki.

    <script>
    function run() {
      const url = setUpQuery();
      fetch(url)
        .then(response => response.json())
        .then(json => {
          // See https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response
          // to learn more about each of the properties in the response object.
          showInitialContent(json.id);
          const cruxMetrics = {
            "First Contentful Paint": json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,
            "First Input Delay": json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category
          };
          showCruxContent(cruxMetrics);
          const lighthouse = json.lighthouseResult;
          const lighthouseMetrics = {
            'First Contentful Paint': lighthouse.audits['first-contentful-paint'].displayValue,
            'Speed Index': lighthouse.audits['speed-index'].displayValue,
            'Time To Interactive': lighthouse.audits['interactive'].displayValue,
            'First Meaningful Paint': lighthouse.audits['first-meaningful-paint'].displayValue,
            'First CPU Idle': lighthouse.audits['first-cpu-idle'].displayValue,
            'Estimated Input Latency': lighthouse.audits['estimated-input-latency'].displayValue
          };
          showLighthouseContent(lighthouseMetrics);
        });
    }
    
    function setUpQuery() {
      const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
      const parameters = {
        url: encodeURIComponent('https://developers.google.com')
      };
      let query = `${api}?`;
      for (key in parameters) {
        query += `${key}=${parameters[key]}`;
      }
      return query;
    }
    
    function showInitialContent(id) {
      document.body.innerHTML = '';
      const title = document.createElement('h1');
      title.textContent = 'PageSpeed Insights API Demo';
      document.body.appendChild(title);
      const page = document.createElement('p');
      page.textContent = `Page tested: ${id}`;
      document.body.appendChild(page);
    }
    
    function showCruxContent(cruxMetrics) {
      const cruxHeader = document.createElement('h2');
      cruxHeader.textContent = "Chrome User Experience Report Results";
      document.body.appendChild(cruxHeader);
      for (key in cruxMetrics) {
        const p = document.createElement('p');
        p.textContent = `${key}: ${cruxMetrics[key]}`;
        document.body.appendChild(p);
      }
    }
    
    function showLighthouseContent(lighthouseMetrics) {
      const lighthouseHeader = document.createElement('h2');
      lighthouseHeader.textContent = "Lighthouse Results";
      document.body.appendChild(lighthouseHeader);
      for (key in lighthouseMetrics) {
        const p = document.createElement('p');
        p.textContent = `${key}: ${lighthouseMetrics[key]}`;
        document.body.appendChild(p);
      }
    }
    
    run();
    </script>
    
  2. Wklej kod do pliku HTML.
  3. Otwórz plik HTML w przeglądarce. Gdy się zakończy, strona będzie wyglądać jak Rysunek 1.

    Rysunek 1. Wersja demonstracyjna JavaScript

Dalsze kroki

Opinia

Czy ta strona była pomocna?