function run() {
const url = setUpQuery(); var myHeaders = new Headers(); myHeaders.append("Access-Control-Allow-Origin", "*"); myHeaders.append("Access-Control-Allow-Headers", "origin, x-requested-with, contenttype, Authorization"); myHeaders.append("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS"); var myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' }; fetch(url, myInit) .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.lighthouseResult.audits.metrics.details.items[0].firstContentfulPaint }; //ù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); });
}
let container = document.querySelector(“.livehouse”)
function setUpQuery() {
const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed'; const parameters = { url: encodeURIComponent('{{ site.urlstested[0] }}') }; let query = `${api}?`; for (key in parameters) { query += `${key}=${parameters[key]}`; } return query;
}
function showInitialContent(id) {
container.innerHTML = ''; const title = document.createElement('h2'); title.textContent = 'Live result'; container.appendChild(title); const page = document.createElement('p'); page.textContent = `URl testée: ${id}`; container.appendChild(page);
}
function showCruxContent(cruxMetrics) {
const cruxHeader = document.createElement('h2'); cruxHeader.textContent = "Chrome User Experience Report Results"; container.appendChild(cruxHeader); for (key in cruxMetrics) { const p = document.createElement('p'); p.textContent = `${key}: ${cruxMetrics[key]}`; container.appendChild(p); }
}
function showLighthouseContent(lighthouseMetrics) {
const lighthouseHeader = document.createElement('h2'); lighthouseHeader.textContent = "Lighthouse Results"; container.appendChild(lighthouseHeader); for (key in lighthouseMetrics) { const p = document.createElement('p'); p.textContent = `${key}: ${lighthouseMetrics[key]}`; container.appendChild(p); }
}