Velox is a high-performance web application designed to provide comprehensive web performance analysis using the Google PageSpeed Insights API.
The design follows a Dark Studio aesthetic, prioritizing clarity, speed, and premium technical feel.
- Background:
#09090b(Deep Zinc) - Primary Accent:
#99f6e4(Aquamarine) - Secondary Accent:
#6366f1(Indigo) - Good/Success:
#22c55e(Emerald) - Warning:
#f59e0b(Amber) - Bad/Danger:
#ef4444(Rose)
- Primary:
Inter- A clean, modern sans-serif for high readability. - Monospace:
JetBrains Mono- Used for metrics, data, and technical details to emphasize precision.
- Semantic HTML: Proper use of
<nav>,<main>,<section>, and<footer>tags. - Meta Optimization: Comprehensive Open Graph and Twitter card integration for social sharing.
- Structured Data: JSON-LD
WebApplicationschema for search engine rich results. - Performance: Zero-dependency vanilla JS and CSS to ensure the analyzer itself loads instantly.
Velox is built as a Single Page Application (SPA) in a single HTML file to minimize network requests and ensure maximum portability.
- Logic: Vanilla JavaScript (ES6+).
- Styling: Modern CSS variables and flexbox/grid layouts.
- API: Directly interfaces with Google PageSpeed Insights V5.
Velox tracks 17+ metrics, including:
- Core Web Vitals: LCP, CLS, INP (via CrUX).
- Lab Data: FCP, TBT, TTI, Speed Index.
- Network: TTFB, Fully Loaded, Transfer Sizes.