docs: update ROADMAP with completed quick wins

Moved PageSpeed optimizations from "in progress" to "completed":
- Image optimization pipeline
- Font preloading
- Lazy loading
- Cache headers
- CSS bundle split

Added new completed items:
- Image Optimization Pipeline
- Themed Form Components

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood 2026-01-25 19:18:09 +00:00
parent 7d5896a1e3
commit 62faf86abe

View File

@ -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 `<img>` 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 ## Medium Features
@ -514,3 +487,28 @@ The project is currently named `simpleshop_theme` (reflecting its origins as a t
### Admin Access Route ✅ ### Admin Access Route ✅
- `/admin` redirects to `/admin/theme` (requires auth) - `/admin` redirects to `/admin/theme` (requires auth)
- Shop owners can bookmark or type `/admin` to access - 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 `<img>` tags (CLS prevention)
- Critical font preloading via `<link rel="preload">`
- 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 `<picture>` 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