Browser Speed Benchmark 🚀

Performance comparison between Google Chrome and Microsoft Edge using Playwright automation.

📊 What This Tests

The benchmark measures comprehensive web performance metrics:

⏱️ Timing Metrics

1. Browser Launch Time - How fast the browser starts
2. TTFB (Time to First Byte) - Server response speed
3. DOMContentLoaded - When HTML is parsed
4. Load Complete - When all resources are loaded
5. Page Load Time - Total loading time

🎯 Core Web Vitals (Google Ranking Factors)

• LCP (Largest Contentful Paint) - Main content render time
• CLS (Cumulative Layout Shift) - Visual stability
• FID (First Input Delay) - Interactivity

🌐 Network Analysis

• HTTP Requests - Total number of requests
• Domains - Number of different domains contacted
• Total Size - Page weight in MB

📦 Content Breakdown

• JavaScript - Count, size, percentage of total
• CSS - Count, size, percentage of total
• Images - Count, size, percentage of total
• Fonts - Count, size, percentage of total

🏗️ DOM Metrics

• Elements - Total DOM complexity
• Links - Number of links on page
• Images - Number of images in DOM

🔒 Privacy & Tracking

• Cookies - Total cookies (including third-party)
• Trackers - Detection of 15+ known trackers:
  • Google Analytics, Tag Manager, Ads
  • Facebook Pixel, SDK
  • Hotjar, Mouseflow, Microsoft Clarity
  • And more...

⭐ Quality Score (0-100)

• Overall page quality rating with grade (A+ to F)
• Based on: Performance, Size, Requests, Privacy, DOM Complexity

🧪 Interactive Test Selection

The benchmark features an interactive menu allowing you to:

1. BBC - Test 13 different BBC pages (News, Sport, Business, Innovation, etc.)
2. Seznam.cz - Test 9 Czech services (Internet, Firmy, Mapy, Zboží, etc.)
3. Y Combinator / Hacker News - Test 7 YC and HN pages
4. Wikipedia - Test 6 major articles (United States, World War II, etc.)
5. CSV Import 📄 - Bulk test multiple domains from url.csv file
   • Add URLs to url.csv (one per line)
   • Choose sub-page limit: 1, 5, 10, 20, 50, or all
   • Script automatically discovers and tests all URLs
   • Perfect for testing multiple sites at once
6. Custom URL - Enter any domain and auto-discover sub-pages
   • Script analyzes the site and finds all sub-pages
   • Choose to test all pages or select specific ones
7. Exit - Return to menu after each test, run multiple benchmarks

🛠️ Prerequisites

• Node.js (v16 or higher)
• npm (comes with Node.js)
• Windows OS (for Edge testing)

📦 Installation

# 1. Clone/download this repository
cd C:\testy\browsers_speed

# 2. Install dependencies
npm install

# 3. Install browsers (optional - uses system browsers if available)
npm run install-browsers

🚀 Usage

Run the benchmark in headless mode (default, fastest):

npm test

Run in headed mode (with visible browser windows for debugging):

npm run test:headed
# OR
node benchmark.js --headed

Headless vs Headed:

• Headless (default): Browsers run without visible windows, faster and more consistent results
• Headed: Browsers open visible windows, you can see what's being tested (slower, for debugging)

📄 CSV Bulk Testing

Test multiple domains at once using the CSV import feature:

1. Create/Edit url.csv in the project folder:

   # One URL per line (without https://)
   thechive.com
   salon.com
   ghostery.com
   bbc.com

2. Run the benchmark and select option 5. Načíst URL ze souboru url.csv

3. Choose sub-page limit:

   • 1 - Only main page (no sub-pages)
   • 5 - Main page + first 5 sub-pages
   • 10 - Main page + first 10 sub-pages
   • 20 - Main page + first 20 sub-pages
   • 50 - Main page + first 50 sub-pages
   • all - Main page + all discovered sub-pages

4. Script automatically:

   • Discovers sub-pages for each URL
   • Tries both with and without www. prefix
   • Tests all pages on both Chrome and Edge
   • Saves comprehensive results to JSON

Perfect for: Testing multiple competitor sites, portfolio websites, or client projects in one go!

📈 Output

The script will:

• Run tests on both Chrome and Edge
• Display real-time progress
• Calculate averages
• Declare a winner with percentage difference
• Save detailed results to timestamped JSON files in output/ folder (e.g., output/speedtest_bbc_co_uk_20260118_143025.json)

Example output:

🚀 Browser Speed Benchmark

================================================================================

📊 Testing Chrome (Chromium)...

  Testing: https://www.google.com
    ✅ Total: 1234ms (load: 567ms, js: 45ms)

📊 Testing Microsoft Edge...

  Testing: https://www.google.com
    ✅ Total: 1189ms (load: 534ms, js: 43ms)

================================================================================

📈 RESULTS

Chrome (Chromium):
  Browser Launch:    345.67ms
  Page Load:         567.89ms
  Screenshot:        123.45ms
  JavaScript Exec:   45.67ms
  DOM Query:         12.34ms
  Total Avg:         1234.56ms

Microsoft Edge:
  Browser Launch:    320.12ms
  Page Load:         534.21ms
  Screenshot:        118.90ms
  JavaScript Exec:   43.21ms
  DOM Query:         11.78ms
  Total Avg:         1189.34ms

================================================================================

🏆 Winner: Edge is 3.66% faster!

================================================================================

💾 Results saved to speedtest_google_com_20260118_143025.json

📂 Project Structure

browsers_speed/
├── benchmark.js              # Main benchmark script
├── package.json              # Project configuration
├── README.md                 # This file
├── .gitignore                # Git ignore rules
├── url.csv                   # Your custom URL list (create from template)
├── url.csv.template          # Template for URL list
├── output/                   # Test results folder (generated)
│   └── speedtest_*.json      # Test results with timestamps
└── screenshot-*.png          # Screenshots (generated)

🔧 How It Works

The benchmark uses Playwright - a Node.js library for browser automation:

• DevTools Protocol - Direct communication with browser engine (not UI automation)
• Headless Mode - Browsers run without visible windows for accurate timing
• Network Idle - Waits for all network requests to complete
• Multiple Iterations - Tests multiple sites for average results

📊 Understanding Results

• Lower ms = Faster (milliseconds)
• Tests run in headless mode (no GUI overhead)
• Interactive menu - select from pre-configured sites or enter custom URLs
• Auto-discovery - option 5 automatically finds sub-pages on custom domains
• Results saved to timestamped JSON files for historical tracking

⚠️ Important Notes

Chromium vs Chrome

• Chromium is used for testing (not Google Chrome)
• Chromium is the open-source version of Chrome - same engine (Blink), same performance
• Playwright automatically downloads Chromium - no manual installation needed
• Results are identical to Chrome for performance testing purposes
• You don't need to install Google Chrome separately

Edge Detection

• Script automatically detects system Edge installation
• Edge must be installed on your system (comes pre-installed on Windows)

Test Consistency

• Headless Mode (default): Tests run without visible windows for consistent, accurate results
• Headed Mode (--headed): Shows browser windows - use for debugging/visualization only
• Network: Results may vary based on internet speed
• System Load: Close other applications for accurate results

🤝 Contributing

Feel free to:

• Add more pre-configured website categories
• Improve auto-discovery algorithm (prioritize important pages)
• Add result comparison between different test runs
• Add charts/graphs for visualizing historical data
• Export results to CSV for spreadsheet analysis

📄 License

MIT

🔗 Links

• Playwright Documentation
• Chrome DevTools Protocol
• Microsoft Edge

---

Created with ❤️ using Claude Code