Wie Sie die Website-Geschwindigkeit erhöhen – PageSpeed-Leitfaden

Website-Geschwindigkeit ist nicht nur eine Frage der Nutzererfahrung – es ist ein direkter Ranking-Faktor bei Google. Seit 2021 sind die Google-Website-Geschwindigkeitsmetriken Teil des Ranking-Algorithmus, und Google PageSpeed Insights ist das Tool, das Ihnen zeigt, wie gut Ihre Website performt. In diesem Leitfaden gehen wir konkrete Schritte zur Verbesserung der Ergebnisse durch.

Verständnis der PageSpeed-Metriken

Google PageSpeed Insights misst sechs Schlüsselmetriken, die zusammen das Gesamtergebnis ausmachen. Largest Contentful Paint (LCP) misst, wie schnell das größte sichtbare Element auf der Seite geladen wird – idealerweise unter 2,5 Sekunden. Interaction to Next Paint (INP) misst, wie schnell die Seite auf Nutzerinteraktionen reagiert – idealerweise unter 200 Millisekunden.

Cumulative Layout Shift (CLS) misst die visuelle Stabilität der Seite – wie viel sich Elemente während des Ladens bewegen. Der ideale Wert liegt unter 0,1. First Contentful Paint (FCP) misst, wann der erste Inhalt auf dem Bildschirm erscheint. Time to First Byte (TTFB) misst, wie schnell der Server auf eine Anfrage reagiert. Total Blocking Time (TBT) misst, wie lange der Main Thread blockiert ist.

Bildoptimierung – der größte Einfluss

Bilder sind der häufigste Grund für eine langsame Website. Ein nicht optimiertes 5-MB-Foto kann das Laden der Seite um mehrere Sekunden verlangsamen. Hier ist, was Sie tun sollten.

Verwenden Sie zunächst moderne Bildformate. Das WebP-Format bietet 25-35 % kleinere Größe als JPEG bei gleicher Qualität. AVIF geht noch weiter mit 50 % kleinerer Größe, hat aber keine vollständige Unterstützung in allen Browsern. Für WordPress konvertieren die Plugins ShortPixel oder Imagify automatisch Bilder in WebP.

Bildabmessungen müssen der Anzeigegröße entsprechen. Wenn ein Bild in 800x600 Pixeln angezeigt wird, macht es keinen Sinn, das Original mit 4000x3000 Pixeln zu laden. Verwenden Sie das srcset-Attribut für responsive Bilder, die sich an die Bildschirmgröße anpassen.

Komprimierung ist entscheidend – für die meisten Webbilder ist eine Qualität von 80-85 % völlig ausreichend. Der Unterschied zwischen 85 % und 100 % Qualität ist mit bloßem Auge nicht erkennbar, aber der Unterschied in der Dateigröße kann enorm sein.

Lazy Loading – nur laden, was sichtbar ist

Lazy Loading verzögert das Laden von Bildern und anderen Ressourcen, bis der Nutzer zu ihnen scrollt. Dies reduziert die anfängliche Ladezeit der Seite dramatisch, da der Browser nicht alle Bilder auf einmal herunterladen muss.

In modernem HTML ist Lazy Loading trivial einfach – fügen Sie das Attribut loading="lazy" zu img-Tags hinzu. Die WordPress-CMS-Plattform fügt seit Version 5.5 automatisch Lazy Loading zu allen Bildern hinzu. Achten Sie nur darauf, Lazy Loading nicht auf Bilder im "above the fold"-Bereich anzuwenden (Hero-Bilder, Logo), da dies die LCP-Metrik negativ beeinflussen kann.

Für iframes (YouTube-Videos, Google Maps) ist Lazy Loading besonders wichtig, da diese Ressourcen extrem groß sein können. Anstelle einer direkten Einbettung erwägen Sie die Anzeige eines Thumbnail-Bildes mit einer Play-Schaltfläche, die das iframe erst beim Klick lädt.

Caching – laden Sie nicht dasselbe zweimal

Browser-Caching ermöglicht es, statische Ressourcen (Bilder, CSS, JavaScript) im Browser des Besuchers zu speichern. Wenn der Nutzer Ihre Website erneut besucht, werden diese Ressourcen vom Computer geladen anstatt vom Server – sofort.

Bei BeoHosting mit dem fortschrittlichen LiteSpeed-Server ist Caching äußerst effizient. LiteSpeed Cache für WordPress erstellt automatisch statische HTML-Versionen Ihrer Seiten und eliminiert die Notwendigkeit für PHP-Verarbeitung und Datenbankzugriffe bei jeder Anfrage.

Konfigurieren Sie Cache-Control-Header für verschiedene Dateitypen. Für Bilder, CSS- und JS-Dateien setzen Sie eine lange Cache-Periode (z. B. 1 Jahr). Für HTML-Seiten verwenden Sie eine kürzere Periode oder Revalidierung, damit Inhaltsänderungen schnell sichtbar werden.

CSS- und JavaScript-Minifizierung

Minifizierung entfernt unnötige Leerzeichen, Kommentare und Formatierungen aus CSS- und JavaScript-Dateien und reduziert deren Größe. Für eine typische Website kann Minifizierung die CSS-Größe um 10-30 % und JavaScript um 20-40 % reduzieren.

Für WordPress hat das LiteSpeed-Cache-Plugin integrierte Minifizierung und Kombination von CSS/JS-Dateien. Autoptimize ist eine ausgezeichnete Alternative. Seien Sie vorsichtig beim Kombinieren von JavaScript-Dateien, da dies Konflikte zwischen Plugins verursachen kann – testen Sie nach der Aktivierung gründlich.

Die Critical-CSS-Technik extrahiert CSS, das für die Anzeige des "above the fold"-Inhalts benötigt wird, und fügt es direkt in das HTML ein, während der Rest des CSS asynchron geladen wird. Dies verbessert die FCP- und LCP-Metriken dramatisch.

Server-Optimierungen

Die Wahl des Hosting-Anbieters und die Server-Konfiguration haben einen enormen Einfluss auf die Website-Geschwindigkeit. BeoHosting verwendet den LiteSpeed Enterprise Server, NVMe-SSD-Festplatten und CloudLinux für optimale Performance. Sehen Sie sich unsere Hosting-Pakete an.

GZIP- oder Brotli-Komprimierung reduziert die Größe der übertragenen Daten um 60-80 %. Bei BeoHosting ist die Brotli-Komprimierung automatisch für alle Websites aktiviert. HTTP/2- und HTTP/3-Protokolle ermöglichen das parallele Laden mehrerer Ressourcen über eine Verbindung, was das Laden von Seiten mit vielen Bildern, Stilen und Skripten erheblich beschleunigt.

PHP OPcache cacht kompilierten PHP-Code im Speicher und eliminiert die Notwendigkeit für erneutes Parsen und Kompilieren bei jeder Anfrage. Bei BeoHosting ist OPcache automatisch aktiviert und optimal konfiguriert.

Schriftartenoptimierung

Webschriften können das Laden der Seite erheblich verlangsamen. Google Fonts, so beliebt sie auch sind, erfordern zusätzliche DNS-Lookups und Downloads von externen Servern. Erwägen Sie das Self-Hosting von Schriftarten – laden Sie die Schriftartendateien herunter und stellen Sie sie von Ihrem eigenen Server bereit.

Verwenden Sie font-display: swap in CSS, damit der Text sofort mit der Systemschriftart sichtbar ist, während die Webschriftart geladen wird. Begrenzen Sie die Anzahl der Schriftartenvarianten – anstatt 6 verschiedene Stärken zu laden, verwenden Sie 2-3, die Sie tatsächlich benötigen. Preloaden Sie wichtige Schriftarten mit link rel="preload" für schnelleres Laden.

Datenbankoptimierung

Für WordPress-Websites kann die Datenbank zu einem Performance-Engpass werden, wenn sie nicht regelmäßig gewartet wird. Löschen Sie Beitragsrevisionen, die älter als 30 Tage sind, Spam-Kommentare, Transients und ungenutzte Metadaten. Das WP-Optimize-Plugin kann die Datenbank automatisch warten.

Verwenden Sie Object Caching (Redis oder Memcached) zum Cachen der Ergebnisse häufiger Datenbankabfragen. Bei BeoHosting ist Redis in den Business- und Premium-Paketen verfügbar und kann die Zeit zur Seitengenerierung für dynamische Websites dramatisch reduzieren.

CDN – Content Delivery Network

Ein CDN verteilt die statischen Ressourcen Ihrer Website auf Server weltweit, sodass Besucher Inhalte vom nächstgelegenen Server laden. Für Websites mit überwiegend deutschsprachigem Publikum ist ein CDN nicht kritisch wichtig, da der BeoHosting-Server bereits in der Region ist. Aber für Websites mit globalem Publikum kann ein CDN die Geschwindigkeit erheblich verbessern.

Cloudflare bietet einen kostenlosen CDN-Plan, der auch DDoS-Schutz und grundlegende Optimierung umfasst. Die Integration mit WordPress ist einfach und erfordert kein technisches Wissen.

Praktische Checkliste zur PageSpeed-Optimierung

Komprimieren und konvertieren Sie Bilder in das WebP-Format. Implementieren Sie Lazy Loading für Bilder unterhalb der Falz. Aktivieren Sie Browser-Caching mit langen Perioden für statische Ressourcen. Minifizieren Sie CSS- und JavaScript-Dateien. Verwenden Sie PHP 8.4 für maximale Performance. Aktivieren Sie GZIP- oder Brotli-Komprimierung. Optimieren Sie Schriftarten und begrenzen Sie die Anzahl der Varianten. Reinigen Sie regelmäßig die Datenbank. Verwenden Sie Page Caching (LiteSpeed Cache für WordPress). Minimieren Sie die Anzahl externer Skripte und Ressourcen.

Fazit

Die Verbesserung der PageSpeed-Ergebnisse ist ein iterativer Prozess – erwarten Sie nicht, dass Sie auf Anhieb 100/100 erreichen. Konzentrieren Sie sich zuerst auf die größten Probleme, die PageSpeed Insights identifiziert – in der Regel sind dies Bilder und JavaScript. Mit BeoHosting haben Sie bereits eine optimierte Serverseite, sodass Sie sich auf Frontend-Optimierungen konzentrieren können. Streben Sie ein grünes Ergebnis (90+) für mobile und Desktop-Versionen Ihrer Website an.