Step 1: PageSpeed Insights API Key lena
Sabse pehle, aapko Google PageSpeed Insights API key lena padega. Agar aapke paas API key nahi hai, to aap Google Cloud Platform par jaake ek naya project create karke PageSpeed Insights API enable kar sakte hain aur API key generate kar sakte hain.
Step 2: Basic HTML aur JavaScript Script likhna
Niche diya gaya code ek basic example hai jo ek website ki URL le kar uski speed check karega aur result display karega.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Speed Check</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
input, button {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
background-color: #007bff;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Website Speed Check</h1>
<input type="text" id="url" placeholder="Enter website URL">
<button onclick="checkSpeed()">Check Speed</button>
<div id="result"></div>
</div>
<script>
async function checkSpeed() {
const apiKey = 'YOUR_API_KEY_HERE'; // Replace with your actual API key
const url = document.getElementById('url').value;
const resultDiv = document.getElementById('result');
if (!url) {
resultDiv.innerHTML = 'Please enter a URL';
return;
}
const apiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url)}&key=${apiKey}`;
resultDiv.innerHTML = 'Checking...';
try {
const response = await fetch(apiUrl);
const data = await response.json();
if (data.error) {
resultDiv.innerHTML = `Error: ${data.error.message}`;
return;
}
const speedScore = data.lighthouseResult.categories.performance.score * 100;
resultDiv.innerHTML = `<p>Speed Score: ${speedScore}</p>`;
} catch (error) {
resultDiv.innerHTML = `Error: ${error.message}`;
}
}
</script>
</body>
</html>
Step 3: API Key ko Replace karna
Script me const apiKey = 'YOUR_API_KEY_HERE'; line me YOUR_API_KEY_HERE ko apni asli API key se replace karein.
Step 4: Script ko Apne WordPress Website me Use karna
Is script ko apni WordPress website me use karne ke liye aap niche diye steps follow karein:
- Appearance > Customize > Additional CSS section me jaake CSS code paste karein.
- Appearance > Theme Editor me jaake Theme Header (header.php) ya Theme Footer (footer.php) me HTML aur JavaScript code ko paste karein.
Aap alternatively ek plugin ka bhi use kar sakte hain jaise ki Insert Headers and Footers plugin aur wahan par HTML aur JavaScript code ko add kar sakte hain.
Is tarah aap apne WordPress website par easily website speed check functionality add kar sakte hain. Agar aapko kisi bhi step me dikkat ho, to zaroor batayein.