Web Paint Benchmark

Web Paint Benchmark is a comprehensive suite of tools designed to analyze web performance and stress-test browser rendering capabilities. It consists of two main modules: a Website Auditor for analyzing live websites and a Benchmark Lab for testing browser rendering performance under heavy load.

🔗 Live Demo

🚀 Features

1. Website Auditor (index.html)

A clean, dashboard-style interface that interfaces with the Google PageSpeed Insights API to provide a comprehensive performance report for any URL.

• Performance Score: Visual gauge showing the overall performance score.
• Key Metrics: Detailed breakdown of Core Web Vitals:
  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)
• Diagnostics: Lists top optimization opportunities to improve page load speed.
• Mobile First: Analysis prioritizes mobile performance metrics.

2. Benchmark Lab (benchmark.html)

An interactive laboratory to stress-test your browser's rendering engine with various CSS and DOM manipulation scenarios.

• Test Scenarios:
  • Opacity: Baseline test using simple opacity changes.
  • Box Shadows: Heavy paint operations.
  • CSS Filters: GPU-intensive tasks.
  • Layout Thrashing: Forces browser reflows.
  • Transforms: Optimized composite-layer animations.
• Real-time Metrics: Live FPS counter, frame count, and a custom performance score.
• Visualizations: Real-time chart tracking performance over time using Chart.js.
• History Tracking: Automatically saves and lists your recent benchmark runs for comparison.
• Results Analysis: Detailed modal popup with final scores and stats after each run.
• Device Fingerprinting: Displays CPU cores, memory, and user agent info.

🛠 Installation & Usage

This project is built with vanilla HTML, CSS, and JavaScript. No build step is required.

1. Clone the repository:

   git clone https://github.com/Atul-Chahar/Web-Paint-Benchmark.git

2. Navigate to the project directory:

   cd Web-Paint-Benchmark

3. Run the application:

   • Simply open index.html in your web browser to start the Website Auditor.
   • Open benchmark.html to launch the Benchmark Lab.

   Note: For the best experience, use a modern browser like Chrome, Edge, or Firefox.

📂 Project Structure

Web-Paint-Benchmark/
├── css/
│   ├── style.css       # Styles for the Auditor
│   └── benchmark.css   # Styles for the Benchmark Lab
├── js/
│   ├── script.js       # Logic for PageSpeed API integration
│   └── benchmark.js    # Logic for rendering tests, charts, and history
├── index.html          # Main entry point (Auditor)
├── benchmark.html      # Benchmark tool entry point
└── README.md

💻 Technologies Used

• HTML5 & CSS3: Semantic markup and modern styling (Flexbox/Grid).
• JavaScript (ES6+): Core logic for API interaction and DOM manipulation.
• Chart.js: For rendering performance graphs in the Benchmark Lab.
• Google PageSpeed Insights API: For fetching real-time performance data.

🤝 Contributing

Contributions are welcome! Feel free to submit a Pull Request or open an issue if you find bugs or have feature suggestions.

📄 License

This project is open-source and available under the MIT License.