feat(web): improve web build configuration and accessibility
Test Suite / backend-pr-quick (push) Has been skipped
Test Suite / quick-import-pr-quick (push) Has been skipped
Test Suite / backend-full (push) Successful in 14m6s
Test Suite / flutter-quality (push) Failing after 4m44s

- 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:
Nils-Johan Gynther
2026-05-23 18:04:27 +02:00
parent 30d27d6b8a
commit 69bcc3e342
16 changed files with 1847 additions and 301 deletions
+76
View File
@@ -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.