Lighthouse Performance Test - ConnectAlp

🚀 Hogyan futtasd a Lighthouse tesztet

1. Chrome DevTools-ban (AJÁNLOTT)

1. Nyisd meg a Chrome böngészőt
2. Menj a weboldal címére: http://localhost:8081/de/
3. Nyomd meg: F12 vagy Ctrl+Shift+I
4. Válaszd ki a Lighthouse fület (jobb oldalt)
5. Beállítások:
   • ✅ Performance
   • ✅ Accessibility
   • ✅ Best Practices
   • ✅ SEO
   • Device: Mobile vagy Desktop
6. Kattints az "Analyze page load" gombra
7. Várj 30-60 másodpercet...
8. Nézd meg az eredményeket! 📊

2. Online Lighthouse (Deploy után)

Ha már élő az oldal:

• PageSpeed Insights: https://pagespeed.web.dev/
• Add meg: https://connectalp.netlify.app
• Automatikusan futtatja Mobile & Desktop teszteket

3. Lighthouse CLI (Terminal)

# Telepítés (egyszer)
npm install -g lighthouse

# Desktop teszt
lighthouse http://localhost:8081/de/ --view --preset=desktop

# Mobile teszt
lighthouse http://localhost:8081/de/ --view --preset=mobile

# Összes kategória
lighthouse http://localhost:8081/de/ --view --preset=desktop --output=html --output-path=./lighthouse-report.html

🎯 Várt Eredmények

Jelenlegi Optimalizációk:

✅ Performance (Teljesítmény)

• Modern Inter betűtípus (Google Fonts)
• Lazy loading képeknél
• CSS minifikáció
• Gzip compression (.htaccess)
• Browser caching

✅ Accessibility (Hozzáférhetőség)

• ARIA labels
• Alt szövegek minden képen
• Skip to content link
• Semantic HTML5

✅ Best Practices

• HTTPS (Netlify-n automatikus)
• Security headers
• No console errors
• Modern JavaScript

✅ SEO

• Meta descriptions
• Canonical URLs
• Hreflang tagek
• robots.txt & sitemap.xml
• Structured Data (Schema.org)

📊 Tipikus Score-ok (Lokális teszt)

Desktop:

• Performance: 90-100 ⚡
• Accessibility: 95-100 ♿
• Best Practices: 90-100 ✅
• SEO: 95-100 🔍

Mobile:

• Performance: 85-95 📱
• Accessibility: 95-100 ♿
• Best Practices: 90-100 ✅
• SEO: 95-100 🔍

(Mobile kissé alacsonyabb a lassabb hálózat szimuláció miatt)

🔧 Ha Alacsony a Score

Performance javítás:

❌ Probléma: Képek túl nagyok
✅ Megoldás: WebP konverzió, tömörítés
   - https://squoosh.app/
   - https://tinypng.com/

❌ Probléma: Render-blocking resources
✅ Megoldás: Critical CSS inline
   - Font display: swap

❌ Probléma: Unused CSS
✅ Megoldás: CSS purge (később)

Accessibility javítás:

❌ Probléma: Kontrasztarány
✅ Megoldás: Színek igazítása (min. 4.5:1)

❌ Probléma: Alt szövegek hiányoznak
✅ Megoldás: Minden képhez alt attribútum

SEO javítás:

❌ Probléma: Meta description hiányzik
✅ Megoldás: Már van minden oldalon! ✅

❌ Probléma: Canonical URL hiányzik
✅ Megoldás: Már implementálva! ✅

📱 Mobilnézet Tesztelés

Chrome DevTools:

1. F12 → Toggle Device Toolbar (Ctrl+Shift+M)
2. Válassz eszközt:
   • iPhone 12/13/14
   • Samsung Galaxy S20/S21
   • iPad Air
3. Tesztelés különböző méreteken

Responsive Breakpointek:

• Mobile: < 480px (kis telefonok)
• Tablet: 481px - 768px
• Desktop: > 768px

🎨 Mobile Optimalizációk (Már implementálva)

✅ Viewport meta tag ✅ Touch-friendly gombok (min. 48x48px) ✅ Responsive images (width: 100%) ✅ Stack layout mobillon ✅ Hamburger menü (jelenleg stacked) ✅ Nyelvválasztó dropdown jól működik ✅ Gomb méretek optimalizálva

🚀 További Optimalizációk (Opcionális)

1. Képek WebP formátumra

<picture>
  <source srcset="/images/smart-home.webp" type="image/webp">
  <img src="/images/smart-home.jpg" alt="Smart Home" loading="lazy">
</picture>

2. Kritikus CSS inline

<style>
  /* Kritikus fenti fold CSS itt */
  body { font-family: Inter, sans-serif; }
  .header-image { display: block; }
</style>
<link rel="stylesheet" href="/css/style.css" media="print" onload="this.media='all'">

3. Service Worker (PWA)

• Offline működés
• Gyorsítótár
• Push notifications

📞 Segítség

Ha kérdésed van a tesztelésről:

1. Chrome DevTools Docs: https://developer.chrome.com/docs/lighthouse/
2. Web.dev: https://web.dev/measure/
3. PageSpeed Insights: https://pagespeed.web.dev/

Most futtasd a tesztet és nézd meg az eredményt! 📊