Developer / Tools
Performance Dashboard
File sizes, CDN dependencies, optimization status, and estimated Lighthouse scores for every page in the GFS Design System. Data extracted from disk at build time.
02
System Overview
Aggregate metrics across all pages
■ Sizes represent raw uncompressed HTML file sizes on disk. Gzip typically reduces transfer by 70-80%.
03
File Size Leaderboard
Every page sorted and color-coded by size
■ Click any column header to sort. Green = under 100KB, Yellow = 100-300KB, Red = over 300KB. Est. load assumes 10Mbps connection + gzip.
04
Size Distribution Chart
Pages grouped into size buckets
■ Inline SVG bar chart. Bucket boundaries: <50KB, 50-100KB, 100-200KB, 200-500KB, 500KB-1MB, 1MB+.
05
CDN Dependencies
External libraries loaded from CDN
| Library |
CDN URL |
Est. Size |
Pages |
Fallback |
■ All external JS/CSS loaded via CDN. Sizes are approximate minified+gzip estimates from public benchmarks.
06
Optimization Checklist
15 items evaluated against current codebase
■ Status reflects current implementation across the design system. Partial = some pages comply, others do not.
07
Performance Tips
Best practices for keeping pages fast
■ Follow these guidelines when adding new pages or modifying existing ones.
08
Lighthouse Score Estimates
Estimated scores based on page characteristics
System-wide average estimates (not actual Lighthouse runs). Based on file size, CDN count, script count, inline SVG density, and semantic HTML usage.
Per-Page Estimates
| Page |
Performance |
Accessibility |
Best Practices |
SEO |
Overall |
■ Estimates are heuristic-based, not actual Lighthouse audits. Run real audits for production validation.