Analyze Website Performance and Explore Optimization Tips | Arcade
app.arcade.software
TL;DR: I missed the old GTmetrix letter grades (A-F), so I built GradeMySpeed.com. It's a simple, free wrapper around the Google PageSpeed Insights API that restores the letter grading system. No huge frameworks, just Vanilla JS and a simple PHP proxy.
The Motivation 📉
Google's PageSpeed Insights (PSI) is the source of truth, but I always found the UX a bit dense for quick checks. I mostly just wanted to know: "Is this an A site or an F site?"
Since GTmetrix changed their UI a while back, I decided to build a simple clone of their old grading system for my own use.
The Tech Stack 🛠️
Nothing fancy here. I wanted it to run on cheap shared hosting without a build step.
1. Frontend: Vanilla JavaScript
I avoided React/Next.js to keep it lightweight. It uses ES6 modules and CSS variables for the dark/light mode.
2. Backend: Simple PHP Proxy
You can't call the PSI API directly from the browser (CORS + exposing API keys), so I wrote a minimal proxy.
3. Caching
To avoid hitting Google's rate limits and to speed up repeat checks, I added basic file-based caching. If a URL was checked recently, it serves the local JSON instead of hitting the API again.
The Grading Logic 🧮
The "Letter Grade" isn't magic—it's just a weighted calculation I added on top of the Lighthouse data:
- Performance Score (60%): The raw Lighthouse performance score.
- Structure Score (40%): A composite of Accessibility, Best Practices, and SEO.
const totalScore = (performance * 0.6) + (structure * 0.4);
if (totalScore >= 90) return 'A';
if (totalScore >= 80) return 'B';
// ... etc
Comparisons & Dark Mode
I also added a "Compare" feature to run two checks side-by-side, which is useful for checking Mobile vs Desktop scores simultaneously. Plus, a dark mode because... well, why not?
Links
It's
free. If you want a simpler view of your PSI data, give it a try.
👉 Live Tool: GradeMySpeed.com
Feedback welcome!
Top comments (0)