pagespeed.de
Leitfaden

Pagespeed verbessern

Die wichtigsten Hebel für schnelle Webseiten — von "fast" zu "instant". Praxis statt Theorie.

TL;DR — die 5 wichtigsten Maßnahmen

  1. Bilder: WebP/AVIF + loading="lazy" + responsive srcset
  2. Server: HTTP/3, Brotli, TLS 1.3, gutes TTFB (<200 ms)
  3. Render-Blocking: CSS inlinen (Critical), JS via defer
  4. Fonts: System-Fonts oder selbst hosten mit font-display:swap
  5. Cache: Long-term immutable für Assets, kurz für HTML

1. Messen, dann optimieren

Bevor du irgendwas änderst: mach den Pagespeed-Test und notiere die Werte. Sonst weißt du am Ende nicht, was geholfen hat. Wichtig: Cache leeren und in einem Inkognito-Tab testen, sonst sind die Werte verfälscht.

2. Bilder — der größte Hebel

Bilder machen oft 60–80 % des Seitengewichts aus. Die drei Schritte:

  • Format: AVIF spart ~50 % gegenüber JPEG, WebP ~30 %. Browser-Support für WebP ist seit 2020 universal, AVIF seit 2022. Tipp: <picture> mit AVIF + WebP Fallback + JPEG.
  • Größe: Nie ein 4000×3000-Bild über CSS auf 600px verkleinern. Liefere die Größe aus, die du brauchst — mit srcset und sizes auch responsive für verschiedene Viewports.
  • Lazy-Loading: Alles unter dem Fold mit loading="lazy". Hero-Image über dem Fold im Gegenteil mit fetchpriority="high".

3. TTFB & Server-Performance

Time to First Byte unter 200 ms ist Pflicht für gute Werte. Häufige Ursachen für hohes TTFB:

  • Slow PHP / kein OPcache: WordPress mit 30+ Plugins ohne OPcache → easy 1 s TTFB. PHP 8.3+, OPcache an, Object-Cache (Redis/Memcached) bei dynamischen Seiten.
  • Datenbank: Long-running Queries finden mit SHOW PROCESSLIST, EXPLAIN ausführen, Indexes setzen.
  • Falsches Hosting: 5-€-Shared-Hosting mit 200 anderen Kunden auf der Maschine kann nicht schnell sein. Für seriöse Sites: VPS oder Managed Hosting mit Plesk/cPanel.
  • Geografisch: Server in den USA, Besucher in Deutschland → 100 ms reine Latenz. CDN davor (Bunny, Cloudflare) hilft.

4. Render-Blocking eliminieren

CSS und synchrones JS im <head> blockieren den ersten Paint. Strategien:

  • Critical CSS inlinen: Die ~15 KB an CSS, die fürs Above-the-Fold reichen, direkt im <style>-Tag. Den Rest async nachladen.
  • JavaScript defer/async: Alle <script>-Tags mit defer. Das Script wird parallel zum HTML geladen, aber erst nach dem Parsing ausgeführt.
  • Drittanbieter: Google Tag Manager, Facebook Pixel und Co. immer am Ende laden, am besten async. Noch besser: serverseitig tracken.

5. Brotli + Caching

Brotli komprimiert 15–20 % besser als gzip — ohne Performance-Penalty bei der Decompression. Aktivieren in nginx: 

brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

Cache-Strategie: Assets mit Hash im Dateinamen (app.a4f3.css) bekommen Cache-Control: public, max-age=31536000, immutable. HTML dagegen no-cache, must-revalidate — sonst sehen Nutzer alte Versionen.

6. Häufige Fehler

  • Google Fonts per Link einbinden: 2 zusätzliche Hops. Selbst hosten oder System-Fonts nutzen.
  • jQuery für 5 Zeilen DOM-Manipulation: 30 KB Overhead. Vanilla JS reicht meistens.
  • "Ich-installier-mal-Plugin-X": Jedes Plugin trägt JS, CSS und Requests bei. Weniger ist mehr.
  • Slider mit 8 hochauflösenden Bildern oben: tötet jeden LCP. Schon ein einzelner Hero ist oft schneller und konvertiert besser.

Was bringt es konkret?

Pagespeed ist kein Selbstzweck — schnelle Seiten konvertieren besser, ranken besser und kosten weniger. Konkrete Studien:

  • Amazon: 1 % Umsatz pro 100 ms Latenz (interne Studie).
  • Walmart: jede Sekunde schneller = +2 % Conversion-Rate.
  • Google: Bounce-Rate steigt um 32 % bei 1→3 s Ladezeit.
  • Core Web Vitals sind seit 2021 offizieller Google-Ranking-Faktor.

Brauchst du Hilfe?

SEO NW macht Pagespeed-Audits und WordPress/Joomla-Performance-Optimierungen.

→ SEO NW kontaktieren