Webdesign

Eine Website, die auf dem Handy fünf Sekunden lädt, verliert die Hälfte der Besucher, bevor überhaupt der erste Inhalt sichtbar ist. Für Berliner KMU, deren Kunden die Website oft unterwegs in der S-Bahn oder zwischen zwei Terminen aufrufen, ist Performance kein technisches Detail mehr, sondern eine direkte Frage der Anfragen. Google misst das seit 2021 in Form der Core Web Vitals – und gewichtet diese Werte seit 2024 noch deutlicher im Ranking. Dieser Ratgeber zeigt, was sich konkret hinter den Zahlen verbirgt und was du dagegen tun kannst.

Ich bin Fynn Thöne, IHK-zertifizierter Fachinformatiker aus Berlin-Schöneberg, und baue Websites für kleine Berliner Firmen technisch sauber – mit Fokus auf Ladezeit und Wartbarkeit statt auf Plugin-Stapel.

Die drei Werte, auf die es ankommt

LCP – Largest Contentful Paint

Das ist die Zeit, bis das größte sichtbare Element (meist das Hero-Bild oder die Überschrift) fertig geladen ist. Zielwert: unter 2,5 Sekunden.

Hauptbremsen:

• Zu große Bilder (4-MB-PNG statt 200-kB-WebP).
• Hero-Bilder, die erst durch Skripte nachgeladen werden.
• Langsame Server, die schon den HTML-Grundgerüst-Aufruf träge beantworten.

INP – Interaction to Next Paint

Seit 2024 ersetzt INP den älteren FID-Wert. Gemessen wird, wie schnell die Seite auf eine Eingabe (Tap, Klick) sichtbar reagiert. Zielwert: unter 200 Millisekunden.

Hauptbremsen:

• JavaScript-Frameworks, die zu viel im Hauptthread machen.
• Drittanbieter-Skripte (Tracking, Chat-Widgets, Marketing-Tools), die Klicks blockieren.
• Builder-Plattformen, die jeden Klick durch fünf Abstraktionsschichten schicken.

CLS – Cumulative Layout Shift

Misst, wie stark sich der Inhalt nach dem Laden noch verschiebt. Zielwert: unter 0,1.

Hauptbremsen:

• Bilder ohne Höhen-Angabe (width/height).
• Werbung oder Banner, die nachträglich eingefügt werden.
• Webfonts, die das Layout neu rendern lassen (FOIT/FOUT).

Warum gerade Berliner KMU besonders betroffen sind

• Mobile-Anteil ist hoch. In Berlin werden 70–80 % der lokalen Suchen mobil ausgeführt. Wer „Friseur Kreuzberg" googelt, tut das selten am Desktop.
• Netzqualität schwankt. Berlin hat noch immer Funklöcher in der U-Bahn, langsame Strecken in der S-Bahn, dichte Innenstädte mit Netzbelastung. Eine 5-MB-Website lädt dort spürbar lange.
• Geduld ist gering. In Berlin tippt der nächste Suchtreffer schneller als anderswo.

Die häufigsten Bremsen in der Praxis

1. Bilder, Bilder, Bilder

Über 70 % aller Performance-Probleme sind Bilder. Die Standard-Pannen:

• Foto direkt aus der Spiegelreflex in voller Auflösung (5.000 × 3.500 Pixel) hochgeladen.
• Format PNG statt WebP oder AVIF.
• Keine srcset-Versionen für unterschiedliche Bildschirmgrößen.
• Galerien, die alle 30 Bilder sofort laden.

Fix: Bilder vor dem Upload auf maximale Anzeigegröße skalieren, in WebP umwandeln, Lazy-Loading aktivieren.

2. Builder-Bloat

Beliebte Baukasten-Systeme schleppen oft 1–2 MB JavaScript mit, bevor überhaupt eine Zeile Text sichtbar ist. Jedes Plugin addiert seine eigene CSS/JS-Datei. Das Resultat: 50+ Anfragen für eine simple „Über uns"-Seite.

Fix: Beim Webdesign auf eine schlanke technische Basis achten – statt 30 Plugins lieber zwei gut gepflegte Lösungen.

3. Drittanbieter-Skripte

Tracking, Chat-Widgets, Schriftarten von Google, Karten-Embeds: Jedes einzelne Skript lädt von einem anderen Server. Wenn einer langsam ist, hängt deine Seite.

Fix: Drittanbieter konsequent prüfen. Brauchst du wirklich Hotjar und Google Analytics und Facebook Pixel und ein Chat-Widget? Oft reicht ein einziges, schlankes Tool wie Plausible.

4. Schriftarten

Schöne Webfonts sind ein häufiges CLS-Problem. Wenn der Browser zuerst die Systemschrift anzeigt und dann auf die Webfont wechselt, springt das Layout.

Fix: Schriftarten lokal hosten, font-display: optional oder swap mit reserviertem Platz, maximal zwei Schriftgewichte einbinden.

So testest du selbst – kostenlos

• PageSpeed Insights (pagespeed.web.dev): Google-eigenes Tool, zeigt Lab- und Felddaten. Setze deine URL ein, lies die konkreten Empfehlungen.
• WebPageTest (webpagetest.org): tiefer Blick auf die einzelnen Ladephasen, inklusive Wasserfall-Diagramm.
• Chrome DevTools, Tab „Lighthouse": lokal im Browser, kostenlos, sehr ehrlich.

Tipp: Teste immer mobil und mit gedrosselter Verbindung („Slow 4G"). Berliner U-Bahn-Realität ist näher dran als das Büro-Glasfasernetz.

Was bringt Performance konkret?

• Bessere Google-Rankings, besonders bei lokalen Suchen.
• Niedrigere Absprungrate. Studien zeigen: jede zusätzliche Sekunde Ladezeit kostet 7–20 % Conversions.
• Höhere Glaubwürdigkeit. Schnelle Seiten wirken professionell – auch unbewusst beim Nutzer.

Was ich konkret mache

Im Webdesign baue ich Websites mit Fokus auf Core Web Vitals: schlanke technische Basis, optimierte Bilder, minimale Drittanbieter-Skripte, lokale Schriftarten, sauberes HTML. Bestehende Seiten lassen sich in einer Performance-Analyse durchleuchten und schrittweise verbessern.

Fazit

Core Web Vitals sind kein Marketing-Buzzword, sondern messen sehr konkret, ob deine Seite für Berliner Mobilnutzer benutzbar ist. Wer die drei Werte LCP, INP und CLS sauber im grünen Bereich hat, gewinnt Sichtbarkeit, Anfragen und Vertrauen.

Kostenfreies Erstgespräch anfragen und herausfinden, wo deine Website konkret bremst.