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

我想将pagespeedinsights api集成到我的网站：

我试着把这个url放到这个网站的js代码中

如何将我的网站链接放入此代码中，以便PageSpeedInsight API工作。 守则：

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

函数运行（）{
const url=setUpQuery（）；
获取（url）
.then（response=>response.json（））
。然后（json=>{
showInitialContent（json.id）；
常数cruxMetrics={
“First Contentful Paint”：json.loadingExperience.metrics.First_Contentful_Paint_MS.category，
“首次输入延迟”：json.loadingExperience.metrics.First\u Input\u Delay\u MS.category
};
showCruxContent（cruxMetrics）；
const lighthouse=json.lighthouse结果；
常量灯塔度量={
“First-Contentful-Paint”：lighthouse.audits['First-Contentful-Paint'].displayValue，
“速度指数”：lighthouse.audits['Speed-Index'].displayValue，
“互动时间”：lighthouse.audits['Interactive'].displayValue，
“第一个有意义的油漆”：lighthouse.audits['First-Mentactive-Paint'].displayValue，
“第一个CPU空闲”：lighthouse.audits['First-CPU-Idle'].displayValue，
“估计输入延迟”：lighthouse.audits['Estimated-Input-Latency'].displayValue
};
ShowLighthouse内容（Lighthouse Metrics）；
});
}
函数setUpQuery（）{
常量api=
'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
常数参数={
url:encodeURIComponent（'https://developers.google.com')
};
让查询=`${api}？`；
用于（输入参数）{
查询+=`${key}=${parameters[key]}`；
}
返回查询；
}
函数showInitialContent（id）{
document.body.innerHTML=''；
const title=document.createElement（'h1'）；
title.textContent='PageSpeed Insights API Demo'；
文件.正文.附件（标题）；
const page=document.createElement（'p'）；
page.textContent=`page tested:${id}`；
document.body.appendChild（第页）；
}
函数showCruxContent（cruxMetrics）{
const cruxHeader=document.createElement（'h2'）；
cruxHeader.textContent=“Chrome用户体验报告结果”；
document.body.appendChild（cruxHeader）；
for（输入cruxMetrics）{
const p=document.createElement（'p'）；
p、 textContent=`${key}:${cruxMetrics[key]}`；
文件.正文.附件（p）；
}
}
功能ShowLighthouse内容（Lighthouse Metrics）{
const lighthouse header=document.createElement（'h2'）；
Lighthouse header.textContent=“Lighthouse结果”；
document.body.appendChild（lighthouseHeader）；
对于（Lighthouse Metrics中的关键）{
const p=document.createElement（'p'）；
p、 textContent=`${key}:${Lighthouse Metrics[key]}`；
文件.正文.附件（p）；
}
}
run（）；
在没有API密钥的情况下，PageSpeed Insight每隔几秒或几分钟只工作一次，因为他们添加了冷却计时器

因此，从这里获得一个无需冷却计时器即可发出多个请求：

您需要将其添加到“查询”请求的末尾，否则可能会出现“无效API密钥”错误


函数setUpQuery（）{
常数api=https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
常数参数={
url:encodeURIComponent(`http://yourwebsite.com`)
};
让查询=`${api}？`；
用于（输入参数）{
查询+=`${key}=${parameters[key]}`；
}
//在查询末尾添加API键
query+=“&key=AIzaSyBuvoszTjP7QrS\u aLwbIboqx8Of23As-nA”
返回查询；
}
请阅读提供最低限度工作示例的规则，以便我们查看和查看。您可能需要替换并添加API密钥。您好，欢迎使用stackoverflow。请阅读并相应地编辑您的问题。我对PageSpeed Insights API一无所知，但您显示的代码使用
https://developer.google.com
作为URL，看起来像是从链接的“入门”页面复制意大利面。请显示您试图运行的实际代码。这是我试图运行的代码，我正在复制并粘贴到HTML中。但是，当我将URL更改为我的网站链接时：它不会提供响应