Add Export APIs & Optimization Checks (Phases 14-15)

Features Added:
- HAR file export endpoint (/api/export/:testId/har)
- CSV metrics export endpoint (/api/export/:testId/csv)
- Optimization checker analyzing 8 categories:
  * Image optimization
  * Text compression (gzip/brotli)
  * Cache policies
  * Render-blocking resources
  * Unused JavaScript
  * Unused CSS
  * HTTP/2 adoption
  * Code minification
- Frontend optimization checklist with color-coded warnings
- Export buttons integrated into results UI

Technical Implementation:
- Created lib/optimization-checker.js with Lighthouse audit analysis
- Added optimization score calculation (0-100%)
- Potential time savings displayed for each check
- Export buttons wired to download endpoints
- Optimization data saved alongside each test result
This commit is contained in:
2025-12-28 01:41:33 +11:00
parent 57c5209108
commit fd67a8a4fa
5 changed files with 211 additions and 2 deletions

View File

@@ -105,6 +105,26 @@
<canvas id="breakdown-chart" style="max-width: 500px; margin: 0 auto;"></canvas>
<div id="breakdown-stats" style="margin-top: 1rem;"></div>
</div>
<!-- Optimization Checklist -->
<div id="optimization-checklist" style="margin-top: 2rem; display: none;">
<h3>Optimization Opportunities</h3>
<div id="optimization-score" style="font-size: 2rem; font-weight: bold; text-align: center; margin: 1rem 0;"></div>
<div id="optimization-items"></div>
</div>
<!-- Export Buttons -->
<div id="export-buttons" style="margin-top: 2rem; display: none; text-align: center;">
<h3>Export Results</h3>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a id="export-har" href="#" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; border-radius: 8px; border: 2px solid var(--color-border);">
📦 Download HAR
</a>
<a id="export-csv" href="#" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; border-radius: 8px; border: 2px solid var(--color-border);">
📊 Download CSV
</a>
</div>
</div>
</div>
<!-- History -->