feat(web): improve web build configuration and accessibility
- Add source maps and web renderer build arguments with defaults - Configure Caddy with CSP headers, cache policies, and service worker handling - Defer loading of import screen for performance optimization - Add semantic labels to icons for accessibility - Update web index.html with Swedish language, meta tags, and description - Add robots.txt and lighthouse configuration - Add new planning documents and archive entries
This commit is contained in:
@@ -0,0 +1,76 @@
|
||||
# Lighthouse protocol for Flutter web
|
||||
|
||||
Detta dokument implementerar en reproducerbar baseline/eftermatning enligt planen i `.kilo/plans/1779550355555-hidden-mountain.md`.
|
||||
|
||||
## 1) Fast matprofil (anvand samma varje gang)
|
||||
|
||||
- URL: samma exakta URL per miljo (`http://localhost:5000` respektive produktion).
|
||||
- Form factor: `mobile`.
|
||||
- Lighthouse-kategorier: `performance`, `accessibility`, `seo`.
|
||||
- Antal korningar: minst 3 per miljo.
|
||||
- Throttling: `simulate` (Lighthouse standard, konstant mellan korningar).
|
||||
|
||||
## 2) Korningar
|
||||
|
||||
Lokal container:
|
||||
|
||||
```bash
|
||||
docker compose -f compose.yml -f compose.flutter.yml up -d --build recipe-api recipe-flutter
|
||||
node flutter/lighthouse/collect.mjs --url http://localhost:5000 --label local-baseline --runs 3 --form-factor mobile
|
||||
```
|
||||
|
||||
Produktion:
|
||||
|
||||
```bash
|
||||
node flutter/lighthouse/collect.mjs --url https://DIN-DOMAN --label prod-baseline --runs 3 --form-factor mobile
|
||||
```
|
||||
|
||||
Resultat skrivs till `flutter/lighthouse/results/` som:
|
||||
|
||||
- `<label>-run-1.json`, `<label>-run-2.json`, `<label>-run-3.json`
|
||||
- `<label>-summary.json`
|
||||
- `<label>-summary.md`
|
||||
|
||||
## 3) Baseline-tabell (fylls med faktiska resultat)
|
||||
|
||||
| Miljo | Perf median | A11y median | SEO median | LCP ms median | TBT ms median | INP ms median | Transfer KB median | Requests median |
|
||||
| --- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
|
||||
| Lokal container | TODO | TODO | TODO | TODO | TODO | TODO | TODO | TODO |
|
||||
| Produktion | TODO | TODO | TODO | TODO | TODO | TODO | TODO | TODO |
|
||||
|
||||
## 4) Re-matning efter andringar
|
||||
|
||||
Kor samma kommandon med nya labels, till exempel:
|
||||
|
||||
```bash
|
||||
node flutter/lighthouse/collect.mjs --url http://localhost:5000 --label local-after --runs 3 --form-factor mobile
|
||||
node flutter/lighthouse/collect.mjs --url https://DIN-DOMAN --label prod-after --runs 3 --form-factor mobile
|
||||
```
|
||||
|
||||
Jamor `*-summary.md` mot baseline for att verifiera:
|
||||
|
||||
- Forbattring i minst tva nyckelmatt (exempel LCP/TBT)
|
||||
- Ingen regress i Accessibility/SEO
|
||||
|
||||
## 5) Renderer A/B (Fas 3)
|
||||
|
||||
`flutter/Dockerfile` och `compose.flutter.yml` har nu build-args for rendererexperiment:
|
||||
|
||||
- `WEB_RENDERER=auto` (default)
|
||||
- `WEB_RENDERER=canvaskit`
|
||||
- `WEB_RENDERER=skwasm`
|
||||
|
||||
Exempel (separat buildvariant):
|
||||
|
||||
```bash
|
||||
docker compose -f compose.yml -f compose.flutter.yml build --build-arg WEB_RENDERER=canvaskit recipe-flutter
|
||||
docker compose -f compose.yml -f compose.flutter.yml up -d recipe-flutter
|
||||
node flutter/lighthouse/collect.mjs --url http://localhost:5000 --label local-canvaskit --runs 3 --form-factor mobile
|
||||
```
|
||||
|
||||
Rollback-kriterium: behall `WEB_RENDERER=auto` om A/B inte ger tydlig forbattring i transfer size + LCP/TBT utan visuell regress.
|
||||
|
||||
## 6) SEO routing-beslut
|
||||
|
||||
- `robots.txt` hanteras i Flutter web app-shell (`flutter/web/robots.txt`).
|
||||
- `sitemap.xml` hanteras upstream pa domanniva eftersom absolut canonical host maste vara korrekt per miljo.
|
||||
Reference in New Issue
Block a user