Test the Google Core Vitals of your website pages with just one click. I designed this tool after my website faced penalties for failing to meet Google’s standards related to website speed.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”author” content=”Erwin C. Salarda”>
<title>PageSpeed Insights Checker</title>
<link rel=”stylesheet” href=”speed.css”>
<style>
body {
font-family: ‘Arial’, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-top: 0;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
margin: 20px 0;
border-radius: 5px;
border: 1px solid #ddd;
resize: none;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
#exportToExcel{
background-color: green;
}
.score {
font-weight: bold;
}
.des {
text-align: center;
}
textarea {
padding: 0px;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
#waitingBall {
display: none;
width: 50px;
height: 50px;
background-color: #007BFF;
border-radius: 50%;
margin: 20px auto;
animation: bounce 2s infinite;
}
#statusText {
text-align: center;
margin-top: 10px;
display: none;
}
.dev{
text-align: center;
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
color: blue;
}
</style>
</head>
<body>
<div class=”container”>
<h1>Niwre7 Bulk Website Page Speed Test</h1>
<p class=”dev”>This Simple application was Developed by Erwin C. Salarda, Niwre7</p>
<p class=”des”>”Check the speed of each page on your website. Simply paste the links below.”</p>
<ul>
<li>Ensure the URLs you input are correct and accessible.</li>
<li>For accurate results, avoid running the test multiple times in quick succession.</li>
<li>Consider testing during off-peak hours for best performance insights.</li>
</ul>
<textarea id=”urlList” placeholder=”Enter URLs separated by new lines -Brought to you by: Niwre7 – Example URL: https://erwinsalarda.com”></textarea>
<button onclick=”checkScores()”>Check Scores</button>
<button id=”exportToExcel” onclick=”exportResultsToExcel()”>Export Results to Excel</button>
<div id=”waitingBall”></div>
<p id=”statusText”>Checking page 1 of …</p>
<div id=”results”></div>
</div>
<script>
const apiKey = ‘PASTE HERE YOUR API KEY’;
async function checkScores() {
const urlList = document.getElementById(‘urlList’).value.split(‘\n’);
const resultsDiv = document.getElementById(‘results’);
const waitingBall = document.getElementById(‘waitingBall’);
const statusText = document.getElementById(‘statusText’);
resultsDiv.innerHTML = ”;
waitingBall.style.display = ‘block’;
statusText.style.display = ‘block’;
for (let i = 0; i < urlList.length; i++) {
const trimmedUrl = urlList[i].trim();
statusText.innerText = `Checking page ${i + 1} of ${urlList.length}…`;
const mobileScore = await getPerformanceScore(trimmedUrl, ‘mobile’);
const desktopScore = await getPerformanceScore(trimmedUrl, ‘desktop’);
resultsDiv.innerHTML += `
<p><span class=”url”>${trimmedUrl}</span> – Mobile Score: <span class=”score” style=”color: ${scoreColor(mobileScore)};”>${mobileScore}</span></p>
<p><span class=”url”>${trimmedUrl}</span> – Desktop Score: <span class=”score” style=”color: ${scoreColor(desktopScore)};”>${desktopScore}</span></p>
<hr>
`;
await sleep(1000);
}
waitingBall.style.display = ‘none’;
statusText.style.display = ‘none’;
}
function scoreColor(score) {
if (score >= 90) return ‘green’;
if (score >= 50) return ‘orange’;
return ‘red’;
}
async function getPerformanceScore(url, strategy) {
try {
const response = await fetch(`https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}&strategy=${strategy}&key=${apiKey}`);
const data = await response.json();
const performanceScore = data.lighthouseResult.categories.performance.score * 100;
return performanceScore;
} catch (error) {
console.error(`Error processing URL ${url} with strategy ${strategy}:`, error);
return ‘Error’;
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function exportResultsToExcel() {
const resultsDiv = document.getElementById(‘results’);
const paragraphs = Array.from(resultsDiv.querySelectorAll(‘p’));
const rows = [[“URL”, “Mobile Score”, “Desktop Score”]];
Array.from({length: paragraphs.length / 2}, (_, i) => i).forEach(index => {
const url = paragraphs[index * 2].querySelector(‘.url’).innerText.trim();
const mobileScore = paragraphs[index * 2].querySelector(‘.score’).innerText;
const desktopScore = paragraphs[index * 2 + 1].querySelector(‘.score’).innerText;
rows.push([url, mobileScore, desktopScore]);
});
const csvContent = rows.map(row => row.join(‘,’)).join(‘\n’);
const blob = new Blob([csvContent], { type: ‘text/csv’ });
const link = document.createElement(‘a’);
link.href = window.URL.createObjectURL(blob);
link.download = ‘PageSpeedResults.csv’;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>