Kleine Websites, große Probleme: So verbessern Sie Performance und Nutzerfreundlichkeit

Die meisten kleinen Unternehmenswebsites werden nicht wegen fehlender Funktionen, sondern wegen technischer Mängel von potenziellen Kunden abgewiesen. Eine aktuelle Analyse von über 200 Websites kleiner und mittlerer Unternehmen (KMU) zeigt, dass selbst moderne Designs oft mit versteckten Performance-Killern belastet sind. Während visuelle Attraktivität leicht gemessen werden kann, bleibt die technische Optimierung häufig auf der Strecke – mit spürbaren Folgen für Nutzererlebnis und Suchmaschinenranking.

Sechs kritische Schwachstellen, die jede Website treffen

Die Untersuchung offenbart ein alarmierendes Bild: Mehr als die Hälfte aller analysierten Websites leidet unter übermäßigem, ungenutztem CSS-Code, der die Ladezeit um bis zu 1,4 Sekunden verlängert. Noch gravierender ist die Situation bei Bilddateien: 72 % der Websites laden unkomprimierte Bilder mit über einem Megabyte pro Datei, was die Ladezeit der Hauptinhalte (LCP) um ein bis drei Sekunden pro 100 Kilobyte verschlechtert.

Weitere schwerwiegende Probleme:

• 82 % der Websites blockieren das Rendering durch nicht kritische Skripte, was die Zeit bis zum ersten sichtbaren Inhalt (FCP) durchschnittlich um 1,8 Sekunden verlängert.
• 83 % der Domains verfügen über keine oder fehlerhafte E-Mail-Authentifizierung (SPF, DKIM, DMARC), sodass wichtige Nachrichten wie Angebote oder Rechnungen direkt im Spam landen.
• 44 % der Websites verstoßen gegen die Barrierefreiheitsstandards für Farbkontraste, was etwa 15 % der Nutzer vor unleserliche Texte stellt.
• 60 % der neu gestalteten Websites zeigen nach einem Relaunch eine deutliche Verschlechterung der Performance – ein Zeichen dafür, dass Design und technische Umsetzung oft getrennt voneinander betrachtet werden.

Drei schnelle Lösungen, die jeder Entwickler in 30 Minuten umsetzen kann

Viele der identifizierten Probleme lassen sich mit minimalem Aufwand beheben – ohne teure Tools oder komplexe Anpassungen. Die folgenden Maßnahmen decken die größten Performance-Killer ab und verbessern gleichzeitig Nutzerfreundlichkeit und Sicherheit.

1. Nicht kritische JavaScript-Skripte verzögert laden

Viele Websites laden Analysetools, Werbecode oder Schriftarten synchron – doch genau diese Skripte blockieren den ersten sichtbaren Inhalt. Da sie oft erst nach dem Laden der Seite benötigt werden, sollten sie mit dem defer-Attribut geladen werden.

<!-- Vorher: Blockiert das Rendering -->
<script src="gtag.js"></script>

<!-- Nachher: Wird erst nach dem Parsen geladen -->
<script src="gtag.js" defer></script>

Überprüfung: Öffnen Sie die Entwicklertools (F12), wechseln Sie zum Tab Netzwerk und laden Sie die Seite neu. Achten Sie auf Skripte ohne async oder defer, die nicht für Inhalte oberhalb der Faltlinie benötigt werden. Fügen Sie bei Bedarf das defer-Attribut hinzu.

Ergebnis: Bei Websites mit drei oder mehr blockierenden Skripten kann die Zeit bis zum ersten sichtbaren Inhalt um 30 bis 50 % reduziert werden.

2. Bilder optimieren: WebP-Format und responsive Größen

Die durchschnittliche Bilddatei auf kleinen Unternehmenswebsites wiegt 1,8 Megabyte – ein Wert, der durch moderne Komprimierung und responsive Abmessungen auf etwa 600 Kilobyte reduziert werden kann. Der Wechsel zu WebP, einem effizienten Bildformat, und die Implementierung von responsiven Bildern mit unterschiedlichen Auflösungen bringen sofortige Verbesserungen.

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  width="800"
  height="600"
  alt="Beschreibung des Bildinhalts"
/>

Ergebnis: Websites, deren Hauptinhalt aus Bildern besteht, können die Ladezeit der Hauptinhalte um ein bis drei Sekunden verkürzen.

3. E-Mail-Zustellbarkeit sicherstellen

83 % der analysierten Websites können eingehende E-Mails nicht zuverlässig empfangen, weil wichtige Authentifizierungsmechanismen fehlen. SPF-, DKIM- und DMARC-Einträge sind essenziell, um sicherzustellen, dass wichtige Nachrichten wie Angebote oder Rechnungen nicht im Spam landen.

# SPF-Eintrag für Google Mail als erlaubten Absender
v=spf1 include:_spf.google.com ~all

# DMARC-Eintrag (zunächst im Überwachungsmodus)
v=DMARC1; p=none;

Überprüfung: Nutzen Sie Tools wie MXToolbox, um die Domain zu prüfen und die korrekte Einrichtung von SPF, DKIM und DMARC zu verifizieren.

Eine 10-Punkte-Checkliste für nachhaltige Performance

Die folgenden Schritte sollten bei jedem Website-Relaunch, jeder Neuimplementierung oder bei der Übergabe eines Projekts durchgeführt werden. Die Liste ist so gestaltet, dass sie auch von weniger erfahrenen Entwicklern in wenigen Minuten abgearbeitet werden kann.

Geschwindigkeit (2 Minuten)

• Führen Sie eine PageSpeed-Analyse durch und ignorieren Sie den Gesamtwert. Achten Sie stattdessen auf konkrete Hinweise unter Diagnostics.
• Prüfen Sie, ob das Hero-Bild größer als 2400 Pixel ist, und passen Sie die Abmessungen entsprechend an.
• Identifizieren Sie Skripte, die das Rendering blockieren, aber nicht für Inhalte oberhalb der Faltlinie benötigt werden. Fügen Sie defer hinzu.
• Überprüfen Sie in den Entwicklertools unter Coverage, wie viel CSS-Code ungenutzt bleibt. Bei Werten über 40 % sollten Sie Tree-Shaking aktivieren.

Mobile Nutzbarkeit (1 Minute)

• Laden Sie die Website auf einem Smartphone und prüfen Sie, ob die Navigation ohne Zoomen bedienbar ist.
• Nutzen Sie den WebAIM-Contrast-Checker, um sicherzustellen, dass der Farbkontrast den WCAG-Standards (AA = mindestens 4,5:1) entspricht.

Technische Integrität (2 Minuten)

• Überprüfen Sie mit MXToolbox, ob SPF-, DKIM- und DMARC-Einträge korrekt eingerichtet sind.
• Kontrollieren Sie die Core Web Vitals: LCP unter 2,5 Sekunden, FID unter 100 Millisekunden und CLS unter 0,1.
• Stellen Sie sicher, dass alle Bilder mit aussagekräftigen alt-Attributen versehen sind.
• Prüfen Sie die Anzahl der DOM-Knoten mit document.querySelectorAll('*').length. Bei mehr als 1500 Knoten sollte die Struktur optimiert werden.

Bewertung:

• 9–10 Punkte: 🟢 Exzellent
• 6–8 Punkte: 🟡 Gut
• 3–5 Punkte: 🟠 Verbesserungsbedarf
• 0–2 Punkte: 🔴 Dringender Handlungsbedarf

Die unbequeme Wahrheit: Design vs. Performance

Die Daten zeigen einen klaren Zusammenhang: Visuell ansprechende Neugestaltungen führen bei kleinen Unternehmenswebsites häufig zu einer Verschlechterung der technischen Performance. Neue Designs integrieren oft Bootstrap-Frameworks, hochauflösende Hero-Bilder, benutzerdefinierte Schriftarten und JavaScript-Bibliotheken – eine Kombination, die die Ladezeit in die Höhe treibt. Ältere Websites, die auf reinem HTML basieren, laden dagegen oft in unter einer Sekunde.

Wenn Sie in den letzten zwei Jahren ein Website-Relaunch durchgeführt haben, sollten Sie die PageSpeed-Werte vor und nach dem Projekt vergleichen. Sollte die Performance gesunken sein, war die technische Optimierung wahrscheinlich kein fester Bestandteil des Design-Briefs. Die drei genannten Lösungen decken bereits die schwerwiegendsten Probleme ab – und das in unter einer Stunde.

Perfektion ist selten notwendig. Wichtiger ist es, mit kleinen, aber gezielten Schritten eine spürbare Verbesserung zu erreichen. Denn im digitalen Wettbewerb zählt nicht nur das Aussehen, sondern vor allem die Geschwindigkeit – und die entscheidet darüber, ob Besucher zu Kunden werden oder die Website wieder verlassen.