Warum Geschwindigkeit wichtig ist
Die Hälfte aller Menschen schließt eine Website, die länger als 3 Sekunden zum Laden braucht. Deine Besucher haben nicht alle ein brandneues Handy mit schnellem WLAN – manche haben ein älteres Handy in der Bahn. Ein Projektleiter denkt auch an sie.
Gute Nachricht: den größten Geschwindigkeits-Boost bekommst du aus nur einer Sache – Bilder. Ein Foto direkt vom Handy kann leicht 5 MB groß sein; eine Website braucht nur ein Zehntel davon.
Zeig mir das: messen mit Lighthouse
Lighthouse ist ein Messwerkzeug, das direkt in Chrome eingebaut ist:
- Öffne deine Website (die Live-Version, nicht localhost).
- F12 → Tab Lighthouse → Analyze page load.
- Du bekommst einen Score von 0–100 für Performance, Barrierefreiheit, SEO – und vor allem eine Liste konkreter Tipps, was du verbessern sollst.
Die häufigsten Tipps und was du dagegen tun kannst:
| Lighthouse-Tipp | Was tun |
|---|---|
| Properly size images | Bilder verkleinern (siehe unten) |
| Serve images in next-gen formats | als WebP speichern |
| Image elements do not have width/height | width- und height-Attribute hinzufügen |
| Links do not have descriptive text | statt „hier klicken” sagen, wohin der Link führt |
Bilder verkleinern
- Abmessungen: eine Website braucht nur etwa 1200px Breite (ein Hero-Foto) oder etwa 600px (ein normales Foto). Du kannst in jedem Editor verkleinern, auch online (z. B. squoosh.app).
- Format: WebP ist bei gleicher Qualität etwa ein Drittel kleiner als JPG.
- Lazy Loading: Bilder unterhalb des sichtbaren Bereichs laden erst, wenn der Besucher runterscrollt:
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />Jetzt du 💪
- Miss deine Website mit Lighthouse und schreib deinen Performance-Score auf – das ist deine Startlinie.
- Finde die 3 größten Bilder auf deiner Website (F12 → Network-Tab → nach Size sortieren).
- Verkleinere sie (Abmessungen + WebP) und füge
loading="lazy"überall hinzu, außer beim ersten Bild ganz oben. - Miss erneut und vergleiche die Scores. Schreib in
LAUNCH.md: vorher → nachher. - Bonus: teste deine Website auf dem Handy mit ausgeschaltetem WLAN. Wie ist es?
Erwarte keine 100 Punkte. Selbst große Websites erreichen 70–90. Was zählt, ist Fortschritt: von 60 auf 85 zu kommen ist ein Gewinn, den Besucher wirklich merken.
Kontrolliere dich selbst: Du kennst deinen Lighthouse-Score vorher und nachher. Deine Bilder sind verkleinert, in WebP und nutzen Lazy Loading. Deine Website lädt auf dem Handy spürbar schneller.
Das nimmst du aus dieser Lektion mit
- Geschwindigkeit = Besucher bleiben. 3 Sekunden ist die Grenze.
- Lighthouse sagt dir genau, was du verbessern sollst.
- Der größte Hebel: kleinere Bilder (Abmessungen, WebP, Lazy Loading).
© 2026 Ing. Martin Polak / AlgoRhino · Nutzungsbedingungen für Inhalte