Bulk Google Speed Insight Test App Source Code

Bulk Google Speed Insight Test App Source Code

by

Bulk Google Speed Insight Test App Source Code

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.

Hello, I am Erwin Salarda, the coder of this tool. In today’s digital age, website performance is paramount. Recognizing this need, I developed a tool designed to evaluate the performance of multiple websites swiftly and efficiently. This application leverages the power of Google’s PageSpeed Insights API to assess the performance of websites on both mobile and desktop platforms. Users simply input a list of URLs, and the tool works its magic, iterating through each URL and fetching its performance score. The results are color-coded for clarity: green signifies excellent performance, orange indicates moderate performance, and red warns of subpar performance. This visual representation aids users in quickly identifying areas of improvement.

To use the provided script, please follow the instructions below:

  • Copy the code.
  • Open Notepad or another text editor of your choice.
  • Paste the copied code into the editor.
  • Navigate to ‘File’ > ‘Save As’.
  • Choose the location where you’d like to save the file.
  • Enter a title of your choice for the file, for example: ‘PerformanceChecker.html’.
  • In the ‘Save as type’ dropdown, ensure you select ‘All Files (.).
  • Click ‘Save’.

Warning: This tools will not work without the Google Speed Insight API keys, Please watch this video on how to get the Google Speed Insight API Keys.

COPY THE CODE:

<!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><>
Thank you very much, please follow my Facebook Page: NIWRE7<>