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,请执行以下操作:
- 打开终端。
-
运行以下命令。如果需要,请附加
&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,请执行以下操作:
-
复制以下代码。此代码使用 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>
- 将代码粘贴到 HTML 文件中。
-
在浏览器中打开 HTML 文件。成功完成后,您的网页将如下所示: 图 1.
<ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder">
</ph> 图 1.JavaScript 演示 。
后续步骤
- 请参阅响应以详细了解 响应对象。
- 如果您计划每秒执行 2 次以上的查询,请设置 API 密钥。
- 有关详情,请参阅 PageSpeed Insights API 简介 效果衡量的计算方式
反馈
此页内容对您有帮助吗?