Pagespeed mit kleinem Budget: Die wichtigsten Optimierungen

Die wichtigsten Optimierungen

Als Core-Web-Vitals-Berater bekomme ich viele unterschiedliche Anfragen für Pagespeed-Support. Und ja, manchmal ist das Budget knapp. Dann muss ich noch effizienter mit meiner Zeit umgehen: Ich konzentriere mich auf Maßnahmen mit wenig Aufwand und großer Wirkung, die die Core Web Vitals wirklich voranbringen.

Zuletzt überprüft von Arjen Karel im März 2026

Die Zahlen sprechen für sich. Laut dem Web Almanac 2025 bestehen nur 48 % der mobilen Origins alle drei Core Web Vitals. Die typische mobile Seite wiegt 2,6 MB und lädt 632 KB JavaScript – davon 251 KB ungenutzt. Diese Probleme kannst du ohne großes Budget beheben.

Core-Web-Vitals-Tipp: Meine On-Call-Beratung ist der günstigste Weg zu echter Expertenhilfe. Buche eine 2-stündige Session (300 €): Ich analysiere deine Core-Web-Vitals-Probleme, behebe die dringendsten Baustellen und gebe dir eine klare Strategie für den Rest. Ich bereite mich vor unserem Gespräch vor – so verlieren wir keine Zeit.

Session buchen!

1. Finde zuerst die Probleme

Wer Web-Performance mit kleinem Budget optimiert, muss maximal effektiv vorgehen. Das bedeutet: Du musst zuerst wissen, was das eigentliche Problem ist.

Mit dem hervorragenden, kostenlosen Tool PageSpeed Insights fragst du die CrUX-Daten ab. Diese CrUX-Daten sind die einzige Datenquelle, die zählt – denn genau diese Daten nutzt Google.

Unter dem CrUX-Score siehst du ein Lighthouse-Audit.

Lass mich eines zum Lighthouse-Audit klarstellen: Aktuell interessiert uns Lighthouse nicht. Warum? Weil es die Core Web Vitals nicht misst. Natürlich ist Lighthouse ein großartiges Testwerkzeug. Schau dir die Vorschläge ruhig an. Aber bei kleinem Budget zählt nur eins: die Core Web Vitals zu bestehen. Synthetische Tests sind im Moment völlig egal!

Zurück zu den CrUX-Daten. Hier sind ein paar Leitlinien für kleine Budgets. Analysiere die Core Web Vitals genau in dieser Reihenfolge und konzentriere dich zuerst auf diese Baustellen:

• Fällst du bei der Time to First Byte durch: Behebe das zuerst!
• Fällst du beim First Contentful Paint durch: Behebe render-blocking Ressourcen (Scripte mit defer laden und Styles optimieren).
• Fällst du beim Largest Contentful Paint durch: Priorisiere Ressourcen, die du für den LCP brauchst (wie Schriften oder Bilder).
• Fällst du beim CLS durch: Hinterlege width und height für alle Bilder, entferne CSS-Transitions und reserviere Platz für spät rendernde Elemente (wie Anzeigen, Produktfilter etc.).
• Fällst du bei der Interaction to Next Paint durch: Du nutzt höchstwahrscheinlich zu viel JavaScript zur falschen Zeit. Entferne unnötige Scripte und Plugins und nutze ein RUM-Tool wie CoreDash, um die langsamsten Scripte zu finden.

2. Optimiere deine Bilder

Bilder machen laut dem Web Almanac 2025 bei der mobilen Seite im Median 911 KB aus. Das ist mehr als ein Drittel des gesamten Seitengewichts. Und 57 % aller LCP-Bilder werden immer noch als JPG ausgeliefert, obwohl WebP bei gleicher Qualität kleiner wäre. Mit kleinem Budget bringt dir Bildoptimierung den größten Effekt bei minimalem Aufwand.

Bilder kostenlos nach WebP konvertieren

Es gibt viele kostenlose Tools, Lösungen und Plugins, mit denen du Bilder in neuere, schnellere und modernere Formate wie WebP konvertierst. Für WordPress empfehle ich zum Beispiel das hervorragende und kostenlose Plugin WebP Express.

Lazy loading implementieren

Lazy loading signalisiert dem Browser, dass er ein Bild erst laden soll, wenn es kurz vor dem sichtbaren Viewport steht. Hast du 15 Bilder auf einer Seite und nur 3 liegen im sichtbaren Bereich, kannst du loading="lazy" bedenkenlos bei allen Bildern außerhalb des Viewports ergänzen.

Das kannst du auf zwei Arten angehen: Erstens kannst du lazy loading in deinem CMS aktivieren. Das schaltet lazy loading für alle Bilder ein. Sieh danach in der Dokumentation nach, wie du lazy loading für die sichtbaren, wichtigen Bilder wieder entfernst. Der andere Weg: Du fügst loading="lazy" manuell bei allen Bildern unterhalb des sichtbaren Bereichs (below the fold) ein. Eine vollständige Anleitung findest du hier: wie du Offscreen-Bilder verzögert lädst.

<img loading="lazy" src="image.jpg" width="800" height="600">

fetchpriority für Bilder setzen

Mit fetchpriority="high" am Image-Tag signalisierst du dem Browser, dass dieses Bild wichtiger als andere ist und zuerst heruntergeladen werden soll. Es gibt zwar noch bessere Wege wie Preloading von Bildern und 103 Early Hints – aber die fetchpriority zu setzen ist einfach, schnell und wirksam! Finde einfach das wichtigste Bild auf deiner Seite, öffne das Template und ergänze fetchpriority="high" am Image-Tag:

<img fetchpriority="high" src="image.jpg" width="800" height="600">

3. Korrigiere dein Browser-Caching

Nutzt du günstiges Hosting, ist der Webserver oft nicht optimal konfiguriert. Ein Fehler, der mir regelmäßig begegnet, ist falsch konfiguriertes Browser-Caching. Ohne saubere Caching-Header laden wiederkehrende Besucher dieselben Bilder, Scripte und Stylesheets jedes Mal komplett neu herunter. Das verschwendet Bandbreite und Zeit.

Nutzt du Apache als Webserver, erstelle einfach eine Datei namens .htaccess im Root-Verzeichnis deiner Website und füge diese Zeilen ein:

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|js|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Wenn du die .htaccess-Datei schon bearbeitest, aktiviere auch gleich die GZIP-Kompression. Sie komprimiert textbasierte Ressourcen (HTML, CSS, JavaScript) vor dem Senden an den Browser. Auf den meisten Websites sinkt die Transfergröße dadurch um 60 bis 80 %.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
</IfModule>

Nutzt du einen anderen Webserver wie NGINX, wende dich bitte an deinen Hosting-Provider und verweise ihn auf diesen Artikel!

4. Ziehe Cloudflare in Betracht (schon der kostenlose Tarif hilft)

Schon im kostenlosen Tarif bietet Cloudflare viele der wichtigsten Performance-Features. Bei günstigem Hosting gehört der Wechsel deines DNS zu Cloudflare zu den wirksamsten Änderungen bei minimalem Aufwand. Eine detaillierte Anleitung findest du im vollständigen Cloudflare-Konfigurations-Guide.

Im kostenlosen Tarif

1. Schnelles DNS. Die DNS-Server von Cloudflare sind kostenlos und wahrscheinlich deutlich schneller als die DNS-Server deines günstigen Hosters. CrUX-Daten aus dem Web Almanac 2025 zeigen, dass nur 44 % der mobilen Origins eine gute TTFB haben. Ein langsames DNS ist oft der Auslöser – und Cloudflare behebt das auf der Stelle.
2. HTTP/3 und Brotli. Cloudflare setzt auf die neuesten Protokolle und die schnellsten Kompressionsmethoden. Ohne lange Erklärungen: Das beschleunigt deine Netzwerkübertragung um mindestens 10 %.
3. Zuverlässiges Browser-Caching. Cloudflare liefert beim Cachen statischer Ressourcen hervorragende Ergebnisse. Die Standardkonfiguration ist wahrscheinlich besser als deine aktuelle Lösung.
4. Edge-Caching für statische Ressourcen. Cloudflare cacht Versionen deiner statischen Ressourcen wie Bilder, Scripte und CSS-Dateien und liefert sie direkt aus seinem Edge-Netzwerk an Endnutzer aus. Das spart überflüssige Roundtrips zu deinem Origin-Server.
5. Rocket Loader. Rocket Loader lädt Scripte verzögert und fängt damit verbundene Probleme ab. Das ist eine grobe Methode – aber wenn du Scripte nicht manuell verzögern kannst, verbessert das wahrscheinlich Paint-Metriken wie den Largest Contentful Paint. Hinweis: Rocket Loader nutzt veraltete Browser-APIs, die PageSpeed Insights eventuell anmahnt. Siehst du diese Warnungen, solltest du deine Scripte besser manuell mit defer laden.

Im Pro-Tarif

Sobald ich einen kostenlosen Cloudflare-Account sehe, sage ich fast immer: „Hol dir Pro!“. Wenn du dir die 25 $ leisten kannst und bereit bist, für eine schnellere Website zu zahlen, solltest du darüber nachdenken.

1. Alle kostenlosen Features. Natürlich enthält der Pro-Tarif alle kostenlosen Funktionen.
2. Cloudflare APO für WordPress. APO für WordPress ist eine Komplettlösung, die deine Seiten im Edge-Netzwerk cacht, solange Besucher nicht eingeloggt sind. Das kann die Time to First Byte enorm verbessern.
3. Verlustfreie und verlustbehaftete Bildoptimierung. Einer der größten Vorteile der Pro-Version von Cloudflare ist die Bildoptimierung: Cloudflare konvertiert und cacht Bilder im WebP-Format und liefert sie nur an Browser aus, die diese Formate unterstützen.

5. Hoste so viel wie möglich selbst

Eine weitere einfache und wirksame Optimierung: Hoste statische Ressourcen selbst. Auf vielen Seiten liegen statische Ressourcen auf externen CDNs. jQuery liegt zum Beispiel auf https://code.jquery.com/, Bootstrap auf https://cdn.jsdelivr.net und Schriften auf https://fonts.googleapis.com. Ich verstehe den Reiz. Solche CDNs wirken bequem und schnell – aber sie zu nutzen ist in Wahrheit eine schlechte Idee und bremst deine Website aus.

Ein geteiltes CDN für solche Dateien war sinnvoll, als Browser diese Dateien noch über verschiedene Websites hinweg teilen konnten. Diese Zeiten sind vorbei. Heute muss jeder neue Besucher die statische Datei komplett herunterladen – und jede Datei erfordert eine neue Verbindung zu einem neuen Server. Genau diese zusätzlichen Server-Verbindungen kosten richtig Zeit.

Die Lösung: Hoste diese Drittanbieter-Dateien selbst. Das ist simpel: Datei herunterladen, auf deinen Server legen und den Pfad zur Datei anpassen. Speziell für Schriften erfährst du hier, wie du Google Fonts selbst hostest.

6. Lade deine Scripte mit defer

Blockierende Scripte im Head der Seite sind oft ein gewaltiger Flaschenhals. Sie können das Laden der Seite mitunter um bis zu 20 Sekunden verzögern! Laut dem Web Almanac 2025 bestehen nur 15 % der mobilen Seiten das Audit für render-blocking Ressourcen. Das zeigt, wie verbreitet dieses Problem ist.

Diese Scripte mit defer zu laden ist überhaupt nicht schwer. Ergänze einfach defer im Script-Tag – fertig. Wenn du kannst, mach genau das! Öffne das Template und passe dein Script so an:

<!-- alter blockierender Script-Tag -->
<script src="script.js"></script>

<!-- neuer Script-Tag mit defer -->
<script defer src="script.js"></script>

Aber Vorsicht: Die Sache hat Haken! defer an Script-Tags kann alle möglichen Fehler und Abhängigkeitsprobleme verursachen. Und bei knappem Budget hast du vermutlich nicht das Geld, einen JavaScript-Experten für auftretende Probleme zu engagieren. Probiere also aus, deine Scripte mit defer zu laden, und prüfe alles auf Fehler (drücke Strg+Umschalt+I in Chrome und prüfe den Console-Tab). Gibt es nach dem Testen keine Probleme, gehörst du zu den glücklichen Ausnahmen! Treten Fehler auf, greife auf eine der folgenden Lösungen zurück. Den vollständigen Überblick findest du hier: 16 Methoden, um JavaScript verzögert zu laden.

Rocket Loader nutzen

Wie bereits erwähnt, hast du schon in der kostenlosen Version von Cloudflare Zugriff auf Rocket Loader. Er lädt alle Scripte auf einer Seite verzögert. Das ist keineswegs perfekt, leistet meistens aber solide Arbeit.

Ein Plugin nutzen

Die meisten CMS-basierten Websites haben ein riesiges Plugin-Verzeichnis. Es gibt viele Plugins, die JavaScript verzögert laden und die typischen Komplikationen beim Deferren von Scripten automatisch abfangen.

7. Optimiere deine Schriften

Webfonts sind bei Websites mit kleinem Budget ein versteckter Performance-Fresser. Laut dem Web Almanac 2025 lädt eine Seite im Median 122 KB an Schriftdateien. Werden deine Schriften über Google Fonts geladen, entstehen bei jedem Erstbesuch zusätzliche DNS-Lookups und TCP-Verbindungen.

Zwei kostenlose Maßnahmen:

1. Hoste deine Schriften selbst. Lade die Schriftdateien herunter, lege sie auf deinen eigenen Server und lade sie von dort. Das spart den Verbindungs-Overhead zu fonts.googleapis.com und fonts.gstatic.com.
2. Ergänze font-display: swap. Das weist den Browser an, Text sofort in einer Fallback-Schrift anzuzeigen, während der Webfont noch lädt. Deine Besucher sehen Inhalte schneller und du vermeidest das Problem unsichtbarer Texte. Die komplette Strategie findest du hier: wie du unsichtbaren Text beim Laden von Webfonts verhinderst.

8. Caching, Caching, Caching

Wenn das Budget klein ist und du nicht viel für Hosting ausgeben willst, ist Caching eine der wirksamsten Methoden, um eine Website schneller zu machen. Caching hilft besonders gegen eine hohe Time to First Byte. Caching funktioniert auf verschiedenen Ebenen:

Client-seitiger Cache: Konfiguriere deinen Webserver so, dass er Browser anweist, so viele statische Ressourcen wie möglich zu cachen. Das senkt die Last auf deinem Server. (Siehe das .htaccess-Beispiel in Abschnitt 3.)

Object-Cache: Ein Object-Cache speichert Daten, deren Neuberechnung teuer ist – etwa die Ergebnisse komplexer Datenbankabfragen. Bitte deinen Hoster, Redis oder Memcached zu installieren.

Full-Page-Cache: Wenn du ein CMS nutzt, solltest du deiner Website unbedingt einen Full-Page-Cache spendieren. Für WordPress sind WP Fastest Cache oder WP Core Web Vitals gute Optionen.

9. Wähle dein Hosting strategisch

Beim Hosting lohnt sich der Vergleich: Der teuerste Hoster ist keineswegs immer der schnellste. Generell suchst du nach einem Hosting-Tarif, der genau für dein CMS optimiert ist – denn wer alles können will, kann meistens nichts richtig. Achte beim Hosting mindestens auf PHP 8+, HTTP/2 und SSD-Speicher. Ein guter WordPress-Hoster mit diesen Grundlagen schlägt ein generisches Shared-Hosting jedes Mal um Längen.

10. Überwache deine Performance

All diese Optimierungen sind nichts wert, wenn du nicht weißt, ob sie wirklich etwas gebracht haben. Richte Real User Monitoring ein: So siehst du, wie echte Besucher deine Website erleben – und nicht nur, wie Lighthouse sie im Labor bewertet. Lab-Scores sind nützlich fürs Debugging, aber Google nutzt field data echter Besucher für das Ranking. CoreDash erfasst die Core Web Vitals echter Nutzer und zeigt dir genau, wo du stehst.