Nils-Johan Gynther
69bcc3e342
- 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
77 lines
2.8 KiB
Markdown
77 lines
2.8 KiB
Markdown
# 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.
|