PageSpeed Insights API 使用入门

PageSpeed Insights API 可用于:

  • 衡量网页的效果。
  • 获取有关如何改进网页性能、无障碍功能和搜索引擎优化 (SEO) 的建议。
  • 了解如何将网页转换为渐进式网页 Web 应用。

PageSpeed Insights API 会返回Chrome 用户的实际数据 来自 Lighthouse 的体验报告和实验室数据。

<ph type="x-smartling-placeholder">

前提条件

本教程假定您对命令行界面和 Web 开发。

可选:设置 API 密钥

如果您只是试用 PageSpeed Insights API,并不需要 API 密钥。如果您 如何以自动化方式使用 API 并每秒进行多次查询 需要 API 密钥。

获取和使用 API 密钥

获取密钥

或者在“凭据”页面中创建一个。

在您获得 API 密钥后,您的应用便可在所有请求网址后附加查询参数 key=yourAPIKey

API 密钥可以安全地嵌入网址中;不需要进行任何编码。

API Explorer

要在不编写任何代码的情况下调用 PageSpeed Insights API,请查看 API Explorer

CURL

要通过命令行试用 PageSpeed Insights API,请执行以下操作:

  1. 打开终端。
  2. 运行以下命令。如果需要,请附加 &key=yourAPIKey 使用 API 密钥

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

    响应一个 JSON 对象。如需了解详情,请参阅响应 响应对象中的每个属性。

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

要通过 JavaScript 试用 PageSpeed Insights API,请执行以下操作:

  1. 复制以下代码。此代码使用 PageSpeed Insights API 衡量 https://developers.google.com,然后显示结果。

    <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. 将代码粘贴到 HTML 文件中。
  3. 在浏览器中打开 HTML 文件。成功完成后,您的网页将如下所示: 图 1.

    <ph type="x-smartling-placeholder">
    </ph> <ph type="x-smartling-placeholder">
    </ph> 图 1.JavaScript 演示

后续步骤

反馈

此页内容对您有帮助吗?

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">