🚨 Kritiska Problem (Prioritet 1: Fixa Omedelbart)
Dessa problem påverkar användarupplevelsen mest och bör åtgärdas först.

1. Prestanda: Långsam inladdning & Stora Filer
🔴 Problem:

Total storlek: 2,978 KiB (för stor för en webbapp).

/main.dart.js: 1,216 KiB (Flutter’s kompilade JavaScript).
canvaskit.wasm: 1,592 KiB (Flutter’s CanvasKit-renderare).
MaterialIcons-Regular.otf: 9.8 KiB (ikoner).

Largest Contentful Paint (LCP) misslyckades (tidsgräns överskreds).
Total Blocking Time (TBT) misslyckades (långa JavaScript-uppgifter blockerar huvudtråden).
JavaScript-exekveringstid: 1.8s (för långt).
🟢 Lösningar:
A. Optimera Flutter för Web
Flutter-webbappar är tyngre än traditionella webbappar på grund av CanvasKit. Här är hur du minskar storleken:


Använd HTML-renderaren istället för CanvasKit

CanvasKit ger bättre grafik men är mycket tyngre.
Ändra i index.html:
html
Copy

<script>
  window.flutterConfiguration = {
    renderMode: "html", // Istället för "canvas" (CanvasKit)
  };
</script>




Fördel: Minskar storleken med ~1.5MB (WASM-filen laddas inte).
Nackdel: Vissa avancerade animationer/efekter fungerar inte lika bra.


Aktivera komprimering (GZIP/Brotli)

Din server skickar okomprimerade filer.
Lösning:

Nginx: Lägg till i konfigurationen:
nginx
Copy

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;




Apache: Använd mod_deflate eller mod_brotli.
Cloudflare: Aktivera "Brotli Compression" i inställningarna.



Cachea statiska resurser

Problem: /main.dart.js och flutter_bootstrap.js har ingen cache-TTL.
Lösning: Lägg till Cache-Control-headers:
nginx
Copy

location ~* \.(js|css|png|jpg|jpeg|gif|ico|wasm|otf)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}




Besparing: ~1.2MB vid upprepade besök.


Dela upp JavaScript-koden (Code Splitting)

Flutter laddar allt i en stor fil (main.dart.js).
Lösning: Använd deferred imports för att ladda funktioner på begäran:
dart
Copy

// I din Dart-kod:
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
import 'package:my_app/receipt_import.dart' deferred as receipt_import;

// Ladda endast när behövs:
Future<void> loadReceiptImport() async {
  await receipt_import.loadLibrary();
}




Effekt: Minskar initial laddningstid.


Optimera bilder

Problem: Bilder laddas inte optimalt.
Lösning:

Använd flutter_image_compress för att komprimera bilder innan uppladdning.
För webb: Använd <picture> med srcset för responsiva bilder.
Exempel:
html
Copy

<picture>
  <source srcset="image-480w.jpg" media="(max-width: 600px)">
  <source srcset="image-800w.jpg" media="(max-width: 1200px)">
  <img src="image-1200w.jpg" alt="Receptbild">
</picture>







B. Förbättra Laddningsordningen

Fördröj laddning av icke-kritiska resurser

Ladda canvaskit.wasm efter att sidan har renderats:
html
Copy

<script>
  window.addEventListener('load', () => {
    const script = document.createElement('script');
    script.src = 'https://www.gstatic.com/canvaskit/v1/chromium/canvaskit.wasm';
    document.body.appendChild(script);
  });
</script>





Använd preload för kritiska resurser

Lägg till i <head>:
html
Copy

<link rel="preload" href="/main.dart.js" as="script">
<link rel="preload" href="/flutter_bootstrap.js" as="script">






2. Tillgänglighet: Grundläggande Problem
🔴 Problem:

[user-scalable="no"] i viewport-meta-taggen

Varför det är dåligt: Användare med nedsatt syn kan inte zooma in.
Lösning: Ta bort user-scalable="no":
html
Copy

<meta name="viewport" content="width=device-width, initial-scale=1.0">





Saknas alt-texter på bilder

Problem: Skärmläsare kan inte beskriva bilder.
Lösning: Lägg till alt-texter i Flutter:
dart
Copy

Image.network(
  'https://example.com/recept.jpg',
  semanticLabel: 'Bild på lasagne med ost och tomatsås', // Alt-text
),





Saknas lang-attribut

Problem: Skärmläsare vet inte vilket språk sidan använder.
Lösning: Lägg till i <html>:
html
Copy

<html lang="sv">






3. SEO: Grundläggande Problem
🔴 Problem:

Saknas meta description

Varför det är dåligt: Sökmotorer visar ingen beskrivning i resultaten.
Lösning: Lägg till i <head>:
html
Copy

<meta name="description" content="Upptäck och lagra dina recept. Importera kvitton och håll koll på ditt kylskåp med vår smarta app.">





Ogiltig robots.txt

Problem: Din robots.txt innehåller HTML-kod istället för korrekt syntax.
Lösning: Skapa en korrekt robots.txt:
text
Copy

User-agent: *
Allow: /
Sitemap: https://recept.gynther.se/sitemap.xml






⚠️ Viktiga Förbättringar (Prioritet 2: Fixa Inom 1-2 Veckor)
Dessa problem påverkar användarupplevelsen och SEO, men är inte lika kritiska.

1. Prestanda: JavaScript & Rendering
🟡 Problem:

Lång JavaScript-exekveringstid (1.8s)

Orsak: Flutter’s main.dart.js tar 1.7s att parsas och exekveras.

Minify CSS/JS misslyckades

Flutter genererar redan minifierad kod, men du kan optimera vidare.

🟢 Lösningar:


Aktivera Flutter’s --release flagga

Bygg appen med:
bash
Copy

flutter build web --release




Detta genererar optimerad och minifierad kod.


Använd flutter build web --no-source-maps

Source maps ökar filstorleken. Ta bort dem i produktion:
bash
Copy

flutter build web --no-source-maps






Fördröj laddning av icke-kritisk JavaScript

Använd defer eller async för skript som inte behövs omedelbart:
html
Copy

<script src="/flutter_bootstrap.js" defer></script>






Reducera DOM-storlek

Problem: Din sida har 21 element med en max-djup på 7 (acceptabelt, men kan optimeras).
Lösning: Undvik onödiga Container-widgets i Flutter. Använd const widgets där möjligt.


2. Tillgänglighet: Interaktiva Element
🟡 Problem:

Saknas focus-indikatorer

Användare som navigerar med tangentbord ser inte vilka element som är fokuserade.

Saknas aria-label på anpassade knappar

Skärmläsare vet inte vad knapparna gör.

🟢 Lösningar:

Lägg till focus-stilar i CSS

Exempel:
css
Copy

button:focus, [tabindex="0"]:focus {
  outline: 2px solid #4285F4;
  outline-offset: 2px;
}





Använd semantics i Flutter för tillgänglighet

Exempel för en knapp:
dart
Copy

Semantics(
  label: 'Importera kvitto',
  button: true,
  child: ElevatedButton(
    onPressed: () => _importReceipt(),
    child: Text('Importera'),
  ),
),





Lägg till aria-label på ikonknappar

Exempel:
dart
Copy

IconButton(
  icon: Icon(Icons.upload),
  onPressed: () => _uploadFile(),
  tooltip: 'Ladda upp kvitto', // Visas på hover
  semanticsLabel: 'Ladda upp kvitto', // För skärmläsare
),






3. Säkerhet: Content Security Policy (CSP)
🟡 Problem:

Saknas CSP-header

Din sida är sårbar för XSS-attacker (Cross-Site Scripting).

🟢 Lösning:
Lägg till en stark CSP i din serverkonfiguration:
nginx
Copy

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.gstatic.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.gstatic.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://recept.gynther.se; frame-src 'none'; object-src 'none';";




Förklaring:

script-src: Tillåter skript från self och gstatic.com (för Flutter).
unsafe-inline: Nödvändigt för Flutter (men försök minska användningen).
img-src: Tillåter bilder från self och gstatic.com.


📌 Mindre Problem (Prioritet 3: Fixa När Tid Finns)
Dessa är förbättringar som inte är kritiska men kan förbättra UX och SEO.

1. Prestanda: Bildoptimering

Problem: Bilder laddas utan width och height (orsakar layout shifts).
Lösning: Använd Image.network med explicit storlek:
dart
Copy

Image.network(
  'https://example.com/recept.jpg',
  width: 300,
  height: 200,
  fit: BoxFit.cover,
),





2. SEO: Structured Data

Problem: Saknas schema.org-markup för recept (gör att Google kan visa "rich results").
Lösning: Lägg till JSON-LD i <head>:
html
Copy

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Recipe",
    "name": "Lasagne",
    "author": {
      "@type": "Person",
      "name": "Nils-Johan Gynther"
    },
    "datePublished": "2026-05-21",
    "description": "En klassisk lasagne med köttfärs och bechamelsås.",
    "prepTime": "PT30M",
    "cookTime": "PT45M",
    "totalTime": "PT1H15M",
    "recipeYield": "4 portioner",
    "recipeCategory": "Middag",
    "recipeCuisine": "Italiensk",
    "keywords": "lasagne, pasta, köttfärs",
    "recipeIngredient": ["500g köttfärs", "250g ost", "1 paket lasagneplattor"],
    "recipeInstructions": [
      {
        "@type": "HowToStep",
        "name": "Börja med att fräsa köttfärsen.",
        "text": "Fräs köttfärsen i en stekpanna tills den är genomstekt."
      },
      {
        "@type": "HowToStep",
        "name": "Lagra lasagnen i ugnen.",
        "text": "Skikta lasagneplattor, köttfärs och sås i en ugnsform. Grädda i 45 minuter på 200°C."
      }
    ]
  }
</script>




Effekt: Google kan visa receptkort i sökresultaten (ökad klickfrekvens).

3. Tillgänglighet: Logisk Tab-Order

Problem: Användare kan tabba till element som är dolda eller off-screen.
Lösning: Använd FocusableAction i Flutter för att kontrollera tab-order:
dart
Copy

FocusableActionDetector(
  autofocus: true,
  onFocusChange: (hasFocus) {
    if (hasFocus) {
      // Hantera focus
    }
  },
  child: MyWidget(),
),





📊 Sammanfattning av Prioriteringar


  
    
      Prioritet
      Problem
      Lösning
      Tidsuppskattning
      Impact
    
  
  
    
      1 (Kritisk)
      Stora filer (2.9MB)
      Byt till HTML-renderare, aktivera GZIP, cachea resurser
      1-2 timmar
      ⭐⭐⭐⭐⭐ (Hög)
    
    
      1 (Kritisk)
      Lång JavaScript-exekvering (1.8s)
      Code splitting, defer non-critical JS
      2-4 timmar
      ⭐⭐⭐⭐⭐ (Hög)
    
    
      1 (Kritisk)
      user-scalable="no"
      Ta bort från viewport-meta-taggen
      5 minuter
      ⭐⭐⭐⭐ (Hög)
    
    
      1 (Kritisk)
      Saknas meta description
      Lägg till i 
      5 minuter
      ⭐⭐⭐ (Medel)
    
    
      1 (Kritisk)
      Ogiltig robots.txt
      Skapa korrekt robots.txt
      10 minuter
      ⭐⭐⭐ (Medel)
    
    
      2 (Viktig)
      Saknas CSP-header
      Lägg till i serverkonfigurationen
      1 timme
      ⭐⭐⭐⭐ (Hög)
    
    
      2 (Viktig)
      Saknas alt-texter
      Lägg till semanticLabel i Flutter
      1-2 timmar
      ⭐⭐⭐ (Medel)
    
    
      2 (Viktig)
      Lång DOM-parsning
      Minska onödiga widgets
      1-2 timmar
      ⭐⭐ (Låg)
    
    
      3 (Mindre)
      Saknas structured data
      Lägg till JSON-LD för recept
      1 timme
      ⭐⭐ (Låg)
    
  



🛠️ Konkreta Åtgärder (Steg-för-Steg)
Steg 1: Fixa Prestanda (1-2 dagar)

Byt till HTML-renderare (sparar ~1.5MB):

Ändra index.html som visat ovan.

Aktivera GZIP/Brotli på servern.
Cachea statiska filer (1 år för JS/CSS).
Bygg appen med --release:
bash
Copy

flutter build web --release --no-source-maps




Ladd upp den optimerade versionen till din server.

Steg 2: Fixa Tillgänglighet (1 dag)

Ta bort user-scalable="no" från viewport.
Lägg till lang="sv" i <html>.
Lägg till alt-texter på alla bilder.
Lägg till semanticsLabel på knappar och ikoner.

Steg 3: Fixa SEO (1 dag)

Lägg till meta description.
Fixa robots.txt.
Lägg till structured data för recept.

Steg 4: Säkerhet (1 timme)

Lägg till CSP-header i serverkonfigurationen.

📈 Förväntade Resultat


  
    
      Mätning
      Nuvarande
      Efter Fixar
      Förbättring
    
  
  
    
      Total storlek
      2,978 KiB
      ~500-800 KiB
      -70%
    
    
      Laddningstid (LCP)
      Timeout
      < 2.5s
      ✅ Fixad
    
    
      JavaScript-exekvering
      1.8s
      < 1s
      -45%
    
    
      Tillgänglighet
      82/100
      95+/100
      +15 poäng
    
    
      SEO
      6/10
      9/10
      +50%
    
    
      Säkerhet
      Risk för XSS
      Skyddad
      ✅ Fixad
    
  



🔍 Hur du Testar Förbättringarna

Kör Lighthouse igen i Chrome DevTools (F12 → "Lighthouse").
Testa på mobil (använd Chrome’s "Device Toolbar").
Använd WebPageTest (webpagetest.org) för att mäta prestanda globalt.
Testa tillgänglighet med:

WAVE Evaluation Tool
Skärmläsare (t.ex. NVDA eller VoiceOver).


💡 Extra Tips för Flutter-Webbappar


Använd flutter build web --target=lib/main_deferred.dart

Förbättrar code splitting.


Ladda Flutter asynkront

Lägg till async i <script>-taggen:
html
Copy

<script src="/flutter_bootstrap.js" async></script>






Använd flutter_tex för text-rendering

Minskar beroendet av CanvasKit.


Override Flutter’s default fonts

Använd systemtypsnitt för snabbare laddning:
css
Copy

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto-Regular');
}






🎯 Sammanfattning: Vad du ska göra nu

Fixa de kritiska prestandaproblemen (HTML-renderare, GZIP, caching).
Fixa tillgänglighetsproblemen (user-scalable, alt-texter, lang).
Fixa SEO (meta description, robots.txt).
Lägg till säkerhetsheaders (CSP).
Testa och iterera med Lighthouse.
