Use a API PageSpeed Insights para:
- Medir o desempenho de uma página da Web.
- Receba sugestões sobre como melhorar o desempenho, a acessibilidade e a SEO da página.
- Saiba como converter a página em um formato App da Web.
A PageSpeed Insights API retorna dados reais do usuário do Google Chrome Relatório de experiência e dados de laboratório do Lighthouse.
Pré-requisitos
Este tutorial pressupõe que você tenha conhecimento geral de interfaces de linha de comando e no desenvolvimento de software.
Opcional: configurar uma chave de API
Se quiser apenas testar a API PageSpeed Insights, você não precisa de uma chave de API. Se você planeja usar a API de forma automatizada e fazer várias consultas por segundo, precisa de uma chave de API.
Como receber e usar uma chave de API
Acessar uma chaveOu crie uma na página Credenciais.
Depois que você tiver uma chave de API, seu aplicativo poderá anexar o parâmetro de consulta key=yourAPIKey
a todos os URLs de solicitação.
É seguro incorporar a chave de API a URLs. Não é necessário codificá-la.
API Explorer
Para fazer chamadas para a API PageSpeed Insights sem escrever códigos, confira a APIs Explorer.
CURL
Para testar a API PageSpeed Insights na linha de comando:
- Abra um terminal.
-
Execute o comando a seguir. Anexe
&key=yourAPIKey
se você estiver usando uma chave de API.curl https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://developers.google.com
A resposta é um objeto JSON. Consulte Resposta para saber mais sobre cada uma das propriedades do objeto de resposta.
{ "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
Para testar a API PageSpeed Insights em JavaScript:
-
Copie o código abaixo. O código usa a API PageSpeed Insights para medir o desempenho do
https://developers.google.com
e, em seguida, exibe os resultados.<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>
- Cole o código em um arquivo HTML.
-
Abra o arquivo HTML em um navegador. Após a conclusão, a página terá esta aparência Figura 1.
Figura 1. A demonstração do JavaScript .
Próximas etapas
- Consulte Resposta para saber mais sobre cada uma das propriedades do objeto de resposta.
- Configure uma chave de API se você planeja fazer mais de duas consultas por segundo.
- Consulte Sobre a API PageSpeed Insights para saber mais. sobre como as medições de desempenho são calculadas.
Feedback
Esta página foi útil?