首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用javascript代码for pagespeed insights api显示我的网站的结果

如何使用javascript代码for pagespeed insights api显示我的网站的结果
EN

Stack Overflow用户
提问于 2019-04-05 02:45:04
回答 1查看 368关注 0票数 0

我希望将pagespeedinsights api集成到我的网站:http://ccit324.firebird.sheridanc.on.ca/

我已尝试将url放入此网站https://developers.google.com/speed/docs/insights/v5/get-started中显示的js代码中

如何将我的网站链接放入此代码中,以便PageSpeedInsight应用编程接口工作。代码:

代码语言:javascript
复制
   <script>      
   function run() {
   const url = setUpQuery();
   fetch(url)
  .then(response => response.json())
  .then(json => {

  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>
EN

回答 1

Stack Overflow用户

发布于 2021-02-04 03:09:59

在没有PageSpeed密钥的情况下,API每几秒钟或几分钟只能工作一次,因为他们增加了冷却计时器。

因此,从这里获取一个,以便能够在没有冷却计时器的情况下发出多个请求:Get Started with the PageSpeed Insights API

您需要将其添加到"query“请求的末尾,否则可能会给出一个"Invalid API KEY”错误。

代码语言:javascript
复制
function setUpQuery() {
    const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
    const parameters = {
        url: encodeURIComponent(`http://yourwebsite.com`)
    };

    let query = `${api}?`;
    for (key in parameters) {
    query += `${key}=${parameters[key]}`;
    }

    // Add API key at the end of the query
    query += "&key=AIzaSyBuvoszTjP7QrS_aLwbIboqx8Of23As-nA"

    return query;
}

现在来看看你的网站的结果。所有内容都在json变量中。

代码语言:javascript
复制
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.
        console.log(json) // ALL YOUR WEBSITE DATA WILL BE DISPLAYED IN THE CONSOLE
    });
}

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55522990

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档