diff --git a/ROADMAP.md b/ROADMAP.md index 85aa8d5..5f43cd4 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -337,33 +337,6 @@ This ensures sellers never unknowingly sell at a loss due to Printify price chan --- -## Quick Wins (Low Effort) - -### PageSpeed 100% Score -**Status:** In progress -**Effort:** 0.5-1 day - -Achieve 100% Google PageSpeed score on all core metrics. - -**Completed:** -- [x] Self-hosted fonts (removed Google Fonts external dependency) -- [x] Production asset pipeline (minified, gzipped CSS/JS) - -**Remaining:** -- [ ] Add proper image dimensions to all `` tags (CLS) -- [ ] Preload critical fonts (LCP) -- [ ] Lazy load below-fold images -- [ ] Add `fetchpriority="high"` to hero images -- [ ] Optimise mockup images (resize to actual display sizes, WebP format) -- [ ] Review and reduce unused CSS (currently 22KB gzipped) -- [ ] Add cache headers for static assets - -**Metrics to hit:** -- Performance: 100 -- Accessibility: 100 -- Best Practices: 100 -- SEO: 100 - --- ## Medium Features @@ -514,3 +487,28 @@ The project is currently named `simpleshop_theme` (reflecting its origins as a t ### Admin Access Route ✅ - `/admin` redirects to `/admin/theme` (requires auth) - Shop owners can bookmark or type `/admin` to access + +### PageSpeed 100% Score ✅ +- Self-hosted fonts (removed Google Fonts external dependency) +- Production asset pipeline (minified, gzipped CSS/JS) +- Proper image dimensions on all `` tags (CLS prevention) +- Critical font preloading via `` +- Lazy loading for below-fold images +- `fetchpriority="high"` on hero/priority images via `responsive_image` component +- Responsive image variants (AVIF/WebP/JPEG) via image optimization pipeline +- Shop CSS reduced from 122KB to 36KB (split bundles) +- Cache headers (`max-age=31536000, immutable`) on static assets + +### Image Optimization Pipeline ✅ +- Oban background job processing for variant generation +- Responsive `` element with AVIF/WebP/JPEG sources +- Only generates sizes ≤ source dimensions (no upscaling) +- Disk cache for variants (regenerable from DB) +- Mix task for mockup optimization +- On-demand JPEG fallback generation + +### Themed Form Components ✅ +- Semantic CSS classes (`.themed-input`, `.themed-button`, `.themed-card`, etc.) +- Phoenix components (`shop_input`, `shop_button`, `shop_card`, etc.) +- Consistent styling across all shop forms +- Reduced repeated inline styles