Page Speed mit kleinem Budget: Die Optimierungen, die am wichtigsten sind

Die Optimierungen, die am wichtigsten sind

Als Core Web Vitals-Berater erhalte ich viele verschiedene Anfragen für PageSpeed-Support. Und ja, manchmal gibt es kein großes Budget. Wenn das der Fall ist, muss ich mit meiner Zeit noch effizienter umgehen und nur Optimierungen mit hohem Nutzen und geringem Aufwand durchführen, die die Core Web Vitals tatsächlich verbessern.

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

Die Zahlen sprechen für sich. Laut dem 2025 Web Almanac bestehen nur 48 % der mobilen Ursprünge alle drei Core Web Vitals. Die mediane mobile Seite wiegt 2,6 MB, mit 632 KB JavaScript (wovon 251 KB ungenutzt sind). Das sind Probleme, die Sie ohne großes Budget beheben können.

Core Web Vitals TIPP: Meine On-Call Consultancy ist der budgetfreundlichste Weg, um Expertenhilfe zu erhalten. Buchen Sie eine 2-stündige Sitzung (300 €) und ich werde Ihre Core Web Vitals-Probleme diagnostizieren, die dringendsten Probleme beheben und Ihnen eine klare Strategie für den Rest geben. Ich bereite mich vor, bevor wir sprechen, sodass keine Zeit verschwendet wird.

Buchen Sie eine Sitzung!

1. Finden Sie zuerst die Probleme heraus

Wenn wir die Web Performance mit einem kleinen Budget optimieren, müssen wir absolut sicher sein, dass wir so effektiv wie möglich optimieren. Das bedeutet, dass wir zuerst wissen müssen, was das eigentliche Problem ist.

Wir können das exzellente kostenlose Tool PageSpeed Insights verwenden, um die CrUX-Daten abzufragen. Die CrUX-Daten sind die einzige Datenquelle, die von Bedeutung ist, da dies die Datenquelle ist, die Google verwendet.

Unter dem CrUX-Score sehen Sie ein Lighthouse-Audit.

Lassen Sie mich in Bezug auf das Lighthouse-Audit deutlich sein! Zu diesem Zeitpunkt ist uns Lighthouse egal. Warum? Weil es die Core Web Vitals nicht misst. Sicher, Lighthouse ist ein großartiges Testwerkzeug und Sie können gerne alle seine Vorschläge untersuchen, aber da wir ein kleines Budget haben, kümmern wir uns darum, die Core Web Vitals zu bestehen. Uns ist es im Moment egal, synthetische Tests zu bestehen!

Zurück zu den CrUX-Daten. Hier sind einige Richtlinien, die Sie befolgen sollten, wenn Sie ein kleines Budget haben. Beginnen Sie mit der Untersuchung der Core Web Vitals in genau dieser Reihenfolge und konzentrieren Sie sich zuerst auf diese Probleme!

• Wenn Sie beim Time to First Byte durchfallen, beheben Sie das zuerst!
• Wenn Sie beim First Contentful Paint durchfallen, beheben Sie renderblockierende Ressourcen (Skripte zurückstellen und Stile optimieren)
• Wenn Sie beim Largest Contentful Paint durchfallen, priorisieren Sie Ressourcen, die Sie für diesen LCP benötigen (wie Schriftarten oder Bilder)
• Wenn Sie beim CLS durchfallen, fügen Sie allen Bildern Breite und Höhe hinzu, suchen und entfernen Sie CSS-Übergänge und reservieren Sie Platz für spät gerenderte Elemente (wie Anzeigen, Produktfilter usw.)
• Wenn Sie bei der Interaction to Next Paint durchfallen, verwenden Sie höchstwahrscheinlich zu viel JavaScript zur falschen Zeit. Entfernen Sie nicht benötigte Skripte und Plugins, verwenden Sie ein RUM-Tool wie CoreDash, um die langsamsten Skripte zu finden

2. Optimieren Sie Ihre Bilder

Bilder machen laut dem 2025 Web Almanac 911 KB der medianen mobilen Seite aus. Das ist mehr als ein Drittel des gesamten Seitengewichts. Und 57 % der LCP-Bilder werden immer noch als JPG ausgeliefert, obwohl WebP bei gleicher Qualität kleiner wäre. Bei einem kleinen Budget bietet Ihnen die Bildoptimierung die größte Wirkung bei geringstem Aufwand.

Konvertieren Sie Bilder kostenlos in WebP

Es gibt viele kostenlose Tools, Lösungen und Plugins, mit denen Sie Bilder in neuere, schnellere und modernere Formate wie WebP konvertieren können. Für WordPress würde ich zum Beispiel das hervorragende und kostenlose Plugin WebP Express empfehlen.

Implementieren Sie Lazy Loading

Lazy Loading signalisiert dem Browser, dass ein Bild erst geladen werden soll, wenn es sich fast im sichtbaren Viewport befindet. Wenn Sie 15 Bilder auf einer Seite haben und sich nur 3 im sichtbaren Teil der Seite befinden, können Sie den Bildern, die sich nicht im sichtbaren Viewport befinden, sicher loading="lazy" hinzufügen.

Es gibt 2 Möglichkeiten, dies anzugehen. Die erste besteht darin, Lazy Loading in Ihrem CMS zu aktivieren. Dadurch wird Lazy Loading zu allen Bildern hinzugefügt. Konsultieren Sie als Nächstes die Dokumentation darüber, wie Sie Lazy Loading für die sichtbaren und wichtigen Bilder entfernen. Die andere Möglichkeit besteht darin, Bildern unterhalb der Falz manuell loading="lazy" hinzuzufügen. Für eine vollständige Anleitung siehe wie man Offscreen-Bilder zurückstellt.

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

Legen Sie die Bild-fetchpriority fest

Indem wir einem Bild-Tag fetchpriority="high" hinzufügen, signalisieren wir dem Browser, dass dieses Bild wichtiger ist als andere Bilder und zuerst heruntergeladen werden sollte. Und obwohl es bessere Möglichkeiten gibt, die das Vorladen von Bildern und 103 Early Hints umfassen, ist das Festlegen der fetchpriority einfach, schnell und effektiv! Identifizieren Sie einfach das wichtigste Bild auf Ihrer Seite, bearbeiten Sie das Template und fügen Sie dem Bild fetchpriority="high" hinzu:

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

3. Beheben Sie Ihr Browser-Caching

Wenn Sie budgetfreundliches Hosting verwenden, ist die Wahrscheinlichkeit groß, dass der Webserver nicht optimal konfiguriert ist. Einer der Fehler, auf die ich regelmäßig stoße, ist ein falsch konfiguriertes Browser-Caching. Ohne ordnungsgemäße Caching-Header laden wiederkehrende Besucher dieselben Bilder, Skripte und Stylesheets immer wieder herunter. Das ist verschwendete Bandbreite und verschwendete Zeit.

Wenn Sie Apache als Webserver verwenden, erstellen Sie einfach eine Datei namens .htaccess im Stammverzeichnis Ihrer Website und fügen Sie diese Zeilen hinzu:

<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>

Während Sie die .htaccess-Datei bearbeiten, aktivieren Sie auch die GZIP-Komprimierung. Dies komprimiert textbasierte Ressourcen (HTML, CSS, JavaScript), bevor sie an den Browser gesendet werden. Auf den meisten Websites reduziert dies die Übertragungsgröße um 60 bis 80 %.

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

Wenn Sie einen anderen Webserver wie NGINX verwenden, wenden Sie sich bitte an Ihren Hosting-Anbieter und weisen Sie ihn auf diesen Artikel hin!

4. Ziehen Sie Cloudflare in Betracht (sogar der kostenlose Plan hilft)

Sogar im kostenlosen Plan bietet Ihnen Cloudflare viele der wichtigen Performance-Funktionen. Wenn Sie budgetfreundliches Hosting nutzen, ist die Umstellung Ihres DNS auf Cloudflare eine der Änderungen mit der größten Wirkung und dem geringsten Aufwand, die Sie vornehmen können. Eine detaillierte Anleitung finden Sie im vollständigen Cloudflare-Konfigurationsleitfaden.

Im kostenlosen Plan

1. Schnelles DNS. Die Cloudflare-DNS-Server sind kostenlos und werden die DNS-Server Ihres Budget-Hosting-Anbieters wahrscheinlich übertreffen. CrUX-Daten aus dem 2025 Web Almanac zeigen, dass nur 44 % der mobilen Ursprünge einen guten TTFB haben. Langsames DNS ist ein häufiger Faktor, und ein Wechsel zu Cloudflare behebt dies sofort.
2. HTTP/3 und Brotli. Cloudflare verwendet die neuesten Protokolle und die schnellsten Komprimierungsmethoden. Ohne zu sehr ins Detail zu gehen, seien Sie versichert, dass dies Ihr Netzwerk um mindestens 10 % beschleunigen wird.
3. Konsistentes Browser-Caching. Cloudflare hat eine starke Erfolgsbilanz, wenn es um das Caching statischer Ressourcen geht. Die Standardkonfiguration ist wahrscheinlich besser als das, was Sie derzeit haben.
4. Edge-Caching für statische Ressourcen. Cloudflare speichert Versionen Ihrer statischen Ressourcen wie Bilder, Skripte und CSS-Dateien im Cache und stellt sie dem Endbenutzer direkt aus dem Edge-Netzwerk bereit. Dadurch entfallen die Roundtrips zu Ihrem Ursprungsserver.
5. Rocket Loader. Rocket Loader stellt das Laden von Skripten zurück und kümmert sich um die damit verbundenen Komplikationen. Es ist eine grobe Methode, aber wenn Sie Skripte nicht manuell zurückstellen können, wird dies wahrscheinlich die Paint-Metriken wie den Largest Contentful Paint verbessern. Hinweis: Rocket Loader verwendet veraltete Browser-APIs und PageSpeed Insights kann dies kennzeichnen. Wenn Sie diese Warnungen sehen, sollten Sie stattdessen in Betracht ziehen, Ihre Skripte manuell zurückzustellen.

Im Pro-Plan

Eines der ersten Dinge, die ich immer sage, wenn ich einen kostenlosen Cloudflare-Plan sehe, ist "Go Pro!". Wenn die 25 US-Dollar etwas sind, das Sie sich leisten können und bereit sind, für eine schnellere Website auszugeben, sollten Sie es wahrscheinlich in Betracht ziehen.

1. Alle kostenlosen Funktionen. Natürlich enthält der Pro-Plan alle kostenlosen Funktionen.
2. Cloudflare APO für WordPress. APO für WordPress ist eine Komplettlösung, die Ihre Seiten im Edge-Netzwerk zwischenspeichert, wenn Besucher nicht angemeldet sind. Dies kann den Time to First Byte enorm beschleunigen.
3. Verlustfreie und verlustbehaftete Bildoptimierung. Einer der Hauptvorteile der Verwendung der Pro-Version von Cloudflare ist deren Bildoptimierung. Cloudflare konvertiert Bilder in das WebP-Format, speichert sie zwischen und stellt sie nur den Besuchern bereit, die diese Formate akzeptieren.

5. Hosten Sie so viel wie möglich selbst

Eine weitere einfache und effektive Optimierung ist das Selbsthosten statischer Ressourcen. Auf vielen Websites werden statische Ressourcen auf externen CDNs gehostet. Zum Beispiel wird jQuery auf https://code.jquery.com/ gehostet, Bootstrap wird auf https://cdn.jsdelivr.net gehostet und Ihre Schriftarten werden auf https://fonts.googleapis.com gehostet. Ich verstehe den Reiz. Diese CDNs präsentieren sich als einfach und schnell, aber ihre Verwendung ist eigentlich eine schlechte Idee und wird Ihre Website verlangsamen.

Die Idee, ein gemeinsam genutztes CDN für diese Art von Dateien zu verwenden, war damals sinnvoll, als Browser diese Dateien noch websiteübergreifend teilen konnten. Diese Zeiten sind vorbei. Das Ergebnis ist, dass ein neuer Besucher immer die statische Datei herunterladen muss und für jede Datei eine neue Verbindung zu einem neuen Server benötigt. Und diese neuen Verbindungen zu diesen neuen Servern können viel zusätzliche Zeit in Anspruch nehmen.

Die Lösung besteht darin, diese Drittanbieter-Dateien selbst zu hosten. Das ist einfach: Laden Sie einfach die Datei herunter, legen Sie sie auf Ihrem Server ab und ändern Sie den Verweis auf diese Datei. Speziell für Schriftarten siehe Wie man Google Fonts selbst hostet.

6. Stellen Sie Ihre Skripte zurück

Ein riesiger Engpass können blockierende Skripte im Head der Seite sein. Diese Skripte können das Laden der Seite manchmal um bis zu 20 Sekunden verzögern! Das 2025 Web Almanac hat herausgefunden, dass nur 15 % der mobilen Seiten das Audit für renderblockierende Ressourcen bestehen. Das zeigt Ihnen, wie weit verbreitet dieses Problem ist.

Das Zurückstellen dieser Skripte ist gar nicht so schwer. Fügen Sie dem Skript-Tag einfach defer hinzu und schon sind Sie fertig. Wenn Sie können, tun Sie dies! Bearbeiten Sie das Template und ändern Sie Ihr Skript wie folgt:

<!-- altes blockierendes Skript-Tag -->
<script src="script.js"></script>

<!-- neues zurückgestelltes Skript-Tag -->
<script defer src="script.js"></script>

Aber es gibt Haken! Das Hinzufügen von defer zu Skript-Tags kann alle möglichen Probleme und Abhängigkeitsfehler verursachen. Und da Sie ein kleines Budget haben, muss ich davon ausgehen, dass Sie nicht über die Mittel verfügen, einen JavaScript-Experten zu beauftragen, um alle auftretenden Probleme zu beheben. Versuchen Sie also bitte, Ihre Skripte zurückzustellen und auf Fehler zu überprüfen (drücken Sie in Chrome Strg+Umschalt+I und überprüfen Sie die Registerkarte "Console"). Wenn nach dem Testen keine Probleme auftreten, gehören Sie zu den wenigen Glücklichen! Wenn Probleme auftreten, sollten Sie auf eine der folgenden Lösungen zurückgreifen. Für das vollständige Bild siehe 16 Methoden, um JavaScript zurückzustellen.

Verwenden Sie Rocket Loader

Wie bereits erwähnt, erhalten Sie mit der kostenlosen Version von Cloudflare Zugriff auf Rocket Loader. Dies wird alle Skripte auf einer Seite zurückstellen. Es ist keineswegs perfekt, aber in den meisten Fällen leistet es ziemlich gute Arbeit.

Verwenden Sie ein Plugin

Die meisten CMS-basierten Websites verfügen über ein riesiges Plugin-Repository. Es gibt viele Plugins, mit denen Sie JavaScript zurückstellen und alle Komplikationen bewältigen können, die mit der Zurückstellung von Skripten einhergehen können.

7. Optimieren Sie Ihre Schriftarten

Webfonts sind versteckte Performance-Kosten auf Budget-Websites. Die mediane Seite lädt laut dem 2025 Web Almanac 122 KB an Schriftdateien. Wenn Ihre Schriftarten von Google Fonts geladen werden, führen Sie bei jedem ersten Besuch zusätzliche DNS-Lookups und TCP-Verbindungen durch.

Zwei kostenlose Lösungen:

1. Hosten Sie Ihre Schriftarten selbst. Laden Sie die Schriftdateien herunter, legen Sie sie auf Ihrem eigenen Server ab und laden Sie sie von dort. Dadurch entfällt der Verbindungsaufwand zu fonts.googleapis.com und fonts.gstatic.com.
2. Fügen Sie font-display: swap hinzu. Dies teilt dem Browser mit, dass Text sofort in einer Fallback-Schriftart angezeigt werden soll, während die Webfont heruntergeladen wird. Ihre Besucher sehen Inhalte schneller und Sie vermeiden das Problem des unsichtbaren Textes. Die vollständige Strategie finden Sie unter Wie man unsichtbaren Text beim Laden von Webfonts behebt.

8. Caching, Caching, Caching

Wenn Sie ein kleines Budget haben und nicht viel für Hosting ausgeben möchten, ist Caching eine der effektivsten Möglichkeiten, eine Website zu beschleunigen. Caching ist besonders wirksam gegen einen hohen Time to First Byte. Caching kann auf verschiedenen Ebenen erfolgen.

Client-seitiger Cache: Konfigurieren Sie Ihren Webserver so, dass er Browser anweist, so viele statische Ressourcen wie möglich im Cache zu speichern. Dies verringert die Last auf Ihrem Server. (Siehe das .htaccess-Beispiel in Abschnitt 3.)

Objekt-Cache: Der Objekt-Cache kann verwendet werden, um Daten zu speichern, deren Neuerstellung möglicherweise rechenintensiv ist, z. B. das Ergebnis komplexer Datenbankabfragen. Bitten Sie Ihren Hoster, Redis oder Memcached zu installieren.

Full-Page-Cache: Wenn Sie ein CMS verwenden, möchten Sie Ihrer Website wahrscheinlich einen vollständigen Seiten-Cache hinzufügen. Für WordPress sind WP Fastest Cache oder WP Core Web Vitals gute Optionen.

9. Treffen Sie strategische Hosting-Entscheidungen

Wenn es um das Hosting geht, zahlt es sich aus, sich umzusehen, und der teuerste Host ist nicht immer der schnellste. Generell suchen Sie nach einem Hosting-Plan, der für Ihr CMS optimiert ist, denn ein Alleskönner ist ein Meister von nichts. Suchen Sie nach Hosting, das mindestens PHP 8+, HTTP/2 und SSD-Speicher beinhaltet. Ein guter WordPress-Host mit diesen Grundlagen wird einen generischen Shared Host jedes Mal übertreffen.

10. Überwachen Sie Ihre Performance

All diese Optimierungen sind nichts wert, wenn Sie nicht wissen, ob sie tatsächlich funktioniert haben. Richten Sie Real User Monitoring ein, damit Sie sehen können, wie echte Besucher Ihre Website erleben, und nicht nur, wie Lighthouse sie in einer Laborumgebung bewertet. Laborwerte sind nützlich für das Debugging, aber Felddaten von echten Besuchern sind das, was Google für das Ranking verwendet. CoreDash verfolgt die Core Web Vitals von echten Benutzern und sagt Ihnen genau, wo Sie stehen.