Website schneller machen: 12 praktische Methoden

01Warum ist die Website-Geschwindigkeit wichtig?

Eine Seite, die langsam lädt, bedeutet: Der Besucher ist weg, bevor er den Inhalt gesehen hat. Besonders bei mobiler Verbindung reichen wenige Sekunden Wartezeit, damit Nutzer auf die Zurück-Taste drücken. Bei einer Seite, für die Sie Werbung schalten, heißt das: bezahlte Klicks verpuffen.

Geschwindigkeit beeinflusst auch die Sichtbarkeit in der Suche. Google misst die Seitenerfahrung mit den Core Web Vitals: Als “gut“ gelten 2,5 Sekunden für LCP (Laden des größten Inhalts), 200 Millisekunden für INP (Reaktion auf Interaktion) und 0,1 für CLS (visuelle Verschiebung). Diese Metriken haben wir im Beitrag Was sind Core Web Vitals ausführlich erklärt.

Die folgenden 12 Methoden bewirken bei den meisten Websites den größten Unterschied. Sie müssen nicht alle auf einmal umsetzen; messen Sie zuerst und beginnen Sie mit dem größten Problem.

02Erst messen: Welche Tools?

Optimierung ohne Messung ist wie ein Schuss im Dunkeln. Die folgenden kostenlosen Tools zeigen Ihnen, wo das Problem liegt.

• PageSpeed Insights: Zeigt sowohl echte Nutzerdaten (sofern vorhanden) als auch einen Labortest.
• Der Tab Lighthouse in den Chrome-Entwicklertools: Lokale Tests und detaillierte Empfehlungen.
• Der Core-Web-Vitals-Bericht in der Search Console: Die tatsächliche Nutzererfahrung auf allen Seiten Ihrer Website.
• Der Tab “Netzwerk“ (Network): Zeigt, welche Datei wie lange lädt und wie groß sie ist.

03Bildoptimierung

Bei den meisten Websites machen Bilder den größten Teil des Seitengewichts aus. Deshalb lässt sich hier meist der schnellste Gewinn erzielen.

1. Auf moderne Formate umstellen

Fotos im Format WebP oder AVIF auszuliefern, ergibt bei vergleichbarer Bildqualität deutlich kleinere Dateien als JPEG und PNG. Für ältere Browser können Sie mit dem picture-Element ein Ersatzformat angeben.

<picture>
  <source srcset="urun.avif" type="image/avif">
  <source srcset="urun.webp" type="image/webp">
  <img src="urun.jpg" alt="Produktname" width="800" height="600">
</picture>

2. In der richtigen Größe ausliefern

Für ein Bild, das auf dem Handy 400 Pixel breit angezeigt wird, eine Datei mit 3000 Pixeln herunterzuladen, ist unnötig. Lassen Sie den Browser über die Attribute srcset und sizes die passende Datei für die Bildschirmgröße auswählen.

3. Lazy Loading und Größenangaben

Fügen Sie Bildern unterhalb des sichtbaren Bereichs loading=lazy hinzu; so werden sie erst geladen, wenn der Nutzer in ihre Nähe kommt. Laden Sie das Hauptbild ganz oben auf der Seite nicht verzögert, denn meist ist es das LCP-Element. Breite und Höhe für alle Bilder anzugeben, verhindert das Springen des Inhalts (CLS).

04Code und Ressourcen verschlanken

Bevor der Browser die Seite anzeigen kann, muss er CSS- und JavaScript-Dateien herunterladen und verarbeiten. Je größer und zahlreicher diese Dateien sind, desto später erscheint die Seite und desto später reagiert sie auf Interaktionen.

4. Ungenutzten Code entfernen

Das Coverage-Panel (Abdeckung) in den Chrome-Entwicklertools zeigt, wie viel jeder Datei tatsächlich genutzt wird. Entfernen Sie ungenutzte Komponenten und Bibliotheken und minimieren (Minify) Sie die übrigen Dateien.

5. Blockierende Skripte verzögern

Laden Sie JavaScript-Dateien, die für die erste Darstellung der Seite nicht nötig sind, mit defer. So verarbeitet der Browser das HTML weiter, während die Skripte im Hintergrund geladen werden.

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

6. Skripte von Drittanbietern reduzieren

Chat-Tools, Tracking-Codes, Social-Media-Plugins und eingebettete Videos von Drittanbietern können die Seite erheblich belasten. Hinterfragen Sie, ob jedes davon wirklich nötig ist, und zeigen Sie Videos mit einem kleinen Vorschaubild an, bis der Nutzer klickt.

05Schriften schlanker machen

Webfonts prägen den Charakter einer Website, führen bei falschem Laden aber dazu, dass Text verspätet erscheint oder die Seite verrutscht.

7. WOFF2 und Teilmengen nutzen

Liefern Sie Schriften im Format WOFF2 und nur mit dem Zeichensatz aus, den Sie brauchen (zum Beispiel lateinische Zeichen). Laden Sie keine Schriftschnitte, die Sie nicht verwenden; die meisten Websites kommen mit zwei oder drei Schnitten aus.

8. Sichtbarkeit und Priorität festlegen

Mit font-display: swap erscheint der Text bis zum Laden der Schrift in einer Systemschrift. Die Hauptschrift im oberen Seitenbereich können Sie mit preload vorab laden lassen.

<link rel="preload" href="/fonts/ana-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "AnaFont";
  src: url("/fonts/ana-font.woff2") format("woff2");
  font-display: swap;
}

06Server- und Cache-Einstellungen

Egal wie schlank Code und Bilder sind: Antwortet der Server langsam, öffnet sich die Seite trotzdem spät. Verbesserungen auf dieser Ebene wirken sich auf alle Seiten gleichzeitig aus.

9. Browser-Cache aktivieren

Legen Sie für selten geänderte Dateien wie Logo, CSS, JavaScript und Schriften Cache-Header mit langer Laufzeit fest. So laden wiederkehrende Besucher diese Dateien nicht erneut herunter. Wird eine Datei aktualisiert, können Sie den Cache umgehen, indem Sie dem Dateinamen eine Versionskennung geben.

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

10. Komprimierung und modernes Protokoll

Senden Sie textbasierte Dateien (HTML, CSS, JavaScript, SVG) mit Brotli oder gzip komprimiert. Achten Sie darauf, dass Ihr Server HTTP/2 oder HTTP/3 unterstützt; diese Protokolle erleichtern das parallele Laden vieler kleiner Dateien.

11. Server-Antwortzeit verkürzen

Ist die Zeit bis zum ersten Byte (TTFB) lang, liegt es meist an langsamen Datenbankabfragen, dynamischen Seiten ohne Cache oder zu knappen Serverressourcen. Seiten-Caching, optimierte Abfragen oder ein passenderer Hosting-Tarif senken diese Zeit.

12. Ein CDN nutzen

Ein Content Delivery Network (CDN) liefert Ihre statischen Dateien von Servern aus, die dem Besucher geografisch nah sind. Bei Websites mit Besuchern aus verschiedenen Städten und Ländern senkt es die Latenz spürbar und entlastet den Hauptserver.

07Welche Methode verbessert was?

Jede Methode beeinflusst eine andere Metrik. Konzentrieren Sie sich zuerst auf die Methoden in der Zeile, deren Metrik in Ihrem Messbericht am schlechtesten abschneidet.

08Geschwindigkeit ist keine einmalige Aufgabe

Ein neu eingefügtes Kampagnenbanner, ein hochgeladenes großes Foto oder ein hinzugefügter Tracking-Code kann monatelange Optimierung in wenigen Tagen zunichtemachen. Machen Sie die Geschwindigkeitsmessung deshalb zum Teil der regelmäßigen Wartung und wiederholen Sie den PageSpeed-Insights-Test nach jedem größeren Update. Die weiteren Schritte der Wartungsroutine finden Sie im Beitrag Website-Wartung.

Geschwindigkeit ist am günstigsten, wenn sie schon in der Designphase eingeplant wird. Schlanke Komponenten, ein passendes Bildlayout und eine saubere Code-Struktur machen die meisten Korrekturen nach dem Livegang überflüssig. Diesen Ansatz setzen wir bei SEO-optimiertem Webdesign und mobilfreundlichem Design gemeinsam um; die Checkliste für die technische SEO haben wir in unserem Ratgeber zu SEO-optimiertem Webdesign zusammengestellt.

Für Unternehmen, die Messung und Reporting regelmäßig im Blick behalten möchten, bewertet unser Service SEO & Analyse die Geschwindigkeitsdaten gemeinsam mit der Suchperformance.