javascript - 如何使用 javascript 代码进行 pagespeed 洞察 api 显示我的网站的结果
问题描述
我想将 pagespeedinsights api 集成到我的网站: http ://ccit324.firebird.sheridanc.on.ca/
我尝试将 url 放入本网站 https://developers.google.com/speed/docs/insights/v5/get-started中显示的 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>
解决方案
PageSpeed Insight 在没有 API 密钥的情况下每隔几秒或几分钟才会工作一次,因为它们添加了一个冷却计时器。
因此,从这里获取一个能够在没有冷却计时器的情况下发出多个请求:PageSpeed Insights API 入门
您需要在“查询”请求的末尾添加它,否则它会给出“无效的 API KEY”错误。
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=YOUR_API_KEY"
return query;
}
现在来获取您网站的结果。一切都将在json
变量中。
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
});
}
推荐阅读
- python - Python - 将渐变绘制到图像的选定不规则区域
- c# - IObservable 默认吞下异常?
- c++ - 为什么这个交换函数在堆实现中表现不一致?
- java - 在没有root权限的情况下在Android中读取/sys/class文件
- css - 物化 css HTML5 Range 滑块不显示拇指
- excel - 100K+ 记录的 VBA Instr 函数
- android - Android Studio/IntelliJ ADB 未找到
- nullreferenceexception - System.NullReferenceException 当我测试 NetworkStream 是否为空时
- json - Mac 终端:从 Json 文件中删除整列
- bash - check-mk 检查主机名和/或 ip 是否已经存在