Page Speed mit kleinem Budget: Kostengünstige Wege zur Verbesserung der Website-Performance

Page Speed mit kleinem Budget

Als Core Web Vitals Berater erhalte ich viele unterschiedliche Anfragen für PageSpeed-Unterstützung. Und ja, manchmal ist das Budget begrenzt. Wenn das der Fall ist, muss ich noch effizienter mit meiner Zeit umgehen und nur Optimierungen mit hohem Gewinn bei geringem Aufwand durchführen. In diesem Artikel erkunden wir praktische, kostengünstige Strategien zur Verbesserung der Website-Performance und zur Bereitstellung einer nahtlosen user experience.

Core Web Vitals TIPP: Der budgetfreundlichste Service, den ich anbiete, ist die 2-Stunden Core Web Vitals Unterstützung! In 2 Stunden helfe ich, eine effektive Strategie aufzusetzen, die die dringendsten Probleme behebt und Ihnen das Beste für Ihr Geld bietet!

Jetzt buchen!

Finden Sie zuerst die Probleme heraus

Wenn wir die Web-Performance mit kleinem 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 hervorragende kostenlose PageSpeed Insights nutzen, um die CrUX-Daten abzufragen. Die CrUX-Daten sind die einzige Datenquelle, die zählt, da sie die Datenquelle ist, die Google verwendet.

CrUX-Daten bestanden!

CrUX-Daten nicht bestanden!

Unterhalb des CrUX-Scores sehen Sie ein Lighthouse-Audit.

Lassen Sie mich eines zum Lighthouse-Audit klarstellen! Zu diesem Zeitpunkt kümmern wir uns nicht um Lighthouse. Warum? Weil es nicht die Core Web Vitals misst. Sicher, Lighthouse ist ein großartiges Testtool und Sie können gerne alle Vorschläge erkunden, aber da wir ein begrenztes Budget haben, geht es uns darum, die Core Web Vitals zu bestehen. Es geht uns jetzt nicht darum, synthetische Tests zu bestehen!

Zurück zu den CrUX-Daten. Hier sind einige Richtlinien, die Sie bei begrenztem Budget befolgen sollten! 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 render-blockierende Ressourcen (Scripts aufschieben und Styles optimieren)
• Wenn Sie beim Largest Contentful Paint durchfallen, priorisieren Sie Ressourcen, die Sie für diesen LCP benötigen (wie Schriften oder Bilder)
• Wenn Sie beim CLS durchfallen, fügen Sie allen Bildern width und height hinzu, finden und entfernen Sie CSS-Transitionen und reservieren Sie Platz für spät rendernde Elemente (wie Anzeigen, Produktfilter usw.)
• Wenn Sie beim Interaction to Next Paint durchfallen, verwenden Sie höchstwahrscheinlich zu viel JavaScript zum falschen Zeitpunkt. Entfernen Sie nicht benötigte Scripts/Plugins, verwenden Sie ein RUM-Tool wie CoreDash, um die langsamsten Scripts zu finden

Bilder verantwortungsvoll optimieren

Bilder tragen auf verschiedene Weisen zu den Core Web Vitals bei. Sie sind oft die größten Verursacher der Webseitengröße. Durch den Einsatz effizienter Bildkomprimierungstechniken und die Nutzung moderner Bildformate wie WebP können Website-Betreiber die visuelle Qualität beibehalten und gleichzeitig die Ladezeiten erheblich reduzieren. Oft werden Bilder zum Largest Contentful Paint Element. Das bedeutet, wir müssen diese wichtigen LCP-Bilder priorisieren und weniger wichtige und unter dem sichtbaren Bereich liegende Bilder herabstufen.

1. Bilder kostenlos in WebP konvertieren

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 zum Beispiel empfehle ich das ausgezeichnete und kostenlose WebP Express

2. Lazy Loading implementieren

Lazy Loading signalisiert dem Browser, dass ein Bild erst geladen werden soll, wenn es (nahezu) im sichtbaren Viewport (dem sichtbaren Teil der Seite) ist. Wenn Sie 15 Bilder auf einer Seite haben und nur 3 im sichtbaren Bereich der Seite sind, können Sie den Bildern, die nicht im sichtbaren Viewport sind, bedenkenlos loading="lazy" hinzufügen.

Es gibt 2 Möglichkeiten, dies anzugehen. Die erste ist, Lazy Loading in Ihrem CMS zu aktivieren. Dies fügt allen Bildern Lazy Loading hinzu. Konsultieren Sie dann die Dokumentation, wie Sie Lazy Loading für die sichtbaren und wichtigen Bilder entfernen. Die andere Möglichkeit ist, loading="lazy" manuell zu den Bildern unterhalb des sichtbaren Bereichs hinzuzufügen.

<img loading="lazy" src="image.jpg">

3. Bild-Fetchpriority konfigurieren

Durch das Hinzufügen von fetchpriority = "high" zu einem img-Tag können wir dem Browser signalisieren, dass dieses Bild wichtiger ist als andere Bilder und mit hoher Fetchpriority heruntergeladen werden sollte. Und obwohl mir bewusst ist, dass es bessere Methoden gibt, die Image-Preloading und 103 Early Hints einschließen, ist das Setzen der Fetchpriority einfach, schnell und effektiv! Der Prozess ist simpel: Identifizieren Sie einfach das wichtigste Bild auf Ihrer Seite, bearbeiten Sie das Template der Seite selbst und fügen Sie fetchpriority = "high" zum Bild hinzu. Das sieht dann ungefähr so aus

<img fetchpriority="high" src="image.jpg">

2. Browser-Caching für Konsistenz nutzen

Wenn Sie budgetfreundliches Hosting verwenden, besteht die Chance, dass der Webserver nicht optimal konfiguriert ist. Einer der Fehler, auf die ich regelmäßig stoße, ist falsch konfiguriertes Browser-Caching. Browser-Caching ermöglicht es, häufig abgerufene Ressourcen wie Bilder, Scripts und Stylesheets lokal zu speichern, wodurch die Ladezeiten für wiederkehrende Besucher reduziert werden. Konfigurieren Sie Caching-Header, um ein Gleichgewicht zwischen optimaler Performance und der Sicherstellung zu finden, dass Benutzer die neuesten Inhaltsaktualisierungen erhalten.

Wenn Sie Apache als Webserver verwenden, erstellen Sie einfach eine Datei namens .htaccess im Root-Verzeichnis (Basisverzeichnis) Ihrer Website und fügen Sie diese Zeilen hinzu

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

Wenn Sie einen anderen Webserver wie NGINX verwenden, kontaktieren Sie bitte Ihren Hosting-Anbieter und verweisen Sie ihn auf diesen Artikel!

3. Erwägen Sie ein kostenloses oder budgetfreundliches CDN wie CloudFlare

Erkunden Sie die Vorteile von Content Delivery Networks, um statische Inhalte weltweit über Server zu verteilen. Während Premium-CDNs erweiterte Funktionen bieten, können selbst die kostenlosen oder budgetfreundlichen Optionen einen erheblichen Boost für Page Speed und Zuverlässigkeit bieten.

Im kostenlosen Plan:

Im kostenlosen Plan erhalten Sie viele der 'guten Sachen' wie

1. Superschnelles DNS. Die CloudFlare DNS-Server sind kostenlos und werden wahrscheinlich die DNS-Server Ihres günstigen Hosting-Anbieters übertreffen. Allein aus diesem Grund ist es eine großartige Idee, zu CloudFlare zu wechseln
2. HTTP/3. CloudFlare verwendet die neuesten Protokolle und die schnellsten Kompressionsmethoden. Ohne ins Detail zu gehen, seien Sie versichert, dass dies Ihr Netzwerk um mindestens 10% beschleunigt.
3. Konsistentes Browser-Caching. CloudFlare hat eine ziemlich starke Bilanz beim Caching statischer Ressourcen. Die Standardkonfiguration ist wahrscheinlich besser als das, was Sie jetzt haben!
4. Edge-Caching für statische Ressourcen. CloudFlare wird Versionen Ihrer statischen Ressourcen wie Bilder, Scripts und CSS-Dateien cachen und sie direkt vom Edge-Netzwerk an den Endbenutzer ausliefern. Dies eliminiert die Notwendigkeit von Rundreisen zu Ihrem Origin-Server.
5. Rocket Loader. Rocket Loader schiebt das Laden von Scripts auf und handhabt alle Komplikationen, die daraus entstehen. Rocket Loader ist eine grobe Methode, aber wenn Sie Scripts nicht manuell aufschieben können, wird dies wahrscheinlich die Paint-Metriken wie Largest Contentful Paint verbessern.

Im Pro-Plan

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

1. Alle kostenlosen Funktionen. Offensichtlich kommt der Pro-Plan mit allen kostenlosen Funktionen.
2. CloudFlare APO für WordPress. APO für WordPress ist eine komplette Lösung, die Ihre Seiten im Edge-Netzwerk cached, wenn Besucher nicht eingeloggt sind. Dies kann den Time to First Byte enorm beschleunigen.
3. Verlustfreie und verlustbehaftete Bildoptimierung. Einer der Hauptvorteile der Pro-Version von CloudFlare ist die Bildoptimierung. CloudFlare konvertiert und cached Bilder im WebP-Format und liefert sie nur an Besucher aus, die diese Formate akzeptieren.

4. Hosten Sie so viel wie möglich selbst!

Eine weitere einfache und effektive Optimierung ist das Self-Hosting von 'statischen Ressourcen'. Auf vielen Websites werden statische Ressourcen auf externen CDNs gehostet (verwechseln Sie dies nicht mit Ihrem eigenen CDN). Zum Beispiel wird jQuery auf https://code.jquery.com/ gehostet, Bootstrap auf https://cdn.jsdelivr.net und Ihre Schriften auf https://fonts.googleapis.com. Ich verstehe den Reiz, diese CDNs präsentieren sich als einfach und schnell, aber ihre Nutzung ist tatsächlich eine ziemlich schlechte Idee und wird Ihre Website verlangsamen!

Die Idee, ein gemeinsames CDN für diese Art von Dateien zu nutzen, war sinnvoll, als Browser diese Dateien noch zwischen Websites teilen konnten. Diese Zeiten sind vorbei. Das Ergebnis ist, dass ein neuer Besucher die statische Datei immer 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 ist, diese Third-Party-Dateien selbst zu hosten. Das ist einfach: Laden Sie die Datei herunter, platzieren Sie sie auf Ihrem Server und ändern Sie die Referenz zu dieser Datei.

5. Asynchrones Script-Loading

Ein großer Engpass können 'blockierende Scripts' im Head der Seite sein. Diese Scripts können das Laden der Seite manchmal um bis zu 20 Sekunden verzögern! Das Aufschieben dieser Scripts ist überhaupt nicht schwer. Fügen Sie einfach defer zum Script-Tag hinzu und fertig. Wenn Sie können, tun Sie es! Bearbeiten Sie das Template und ändern Sie Ihr Script wie folgt

<!-- old blocking script tag -->
<script src="script.js"></script>

<!-- new deferred script tag -->
<script defer src="script.js"></script>

Aber es gibt Fallstricke! Das Hinzufügen von defer zu Script-Tags kann alle möglichen Probleme und Abhängigkeitsfehler verursachen. Und da Sie ein begrenztes Budget haben, muss ich davon ausgehen, dass Sie nicht die Mittel haben, einen JavaScript-Experten zu engagieren, um alle eventuell auftretenden Probleme zu beheben. Versuchen Sie also bitte, Ihre Scripts aufzuschieben, und prüfen Sie auf Fehler (drücken Sie Strg-Shift-I in Chrome und überprüfen Sie den Konsolen-Tab). Wenn es nach dem Testen keine Probleme gibt ... gehören Sie zu den Glücklichen! Wenn es Probleme gibt, sollten Sie wahrscheinlich auf eine der folgenden Lösungen zurückgreifen:

Rocket Loader verwenden

Wie besprochen gibt Ihnen die kostenlose Version von CloudFlare Zugang zu Rocket Loader. Dieser wird alle Scripts auf einer Seite aufschieben. Er ist keineswegs perfekt, aber meistens macht er einen ziemlich guten Job.

Ein Plugin verwenden

Die meisten CMS-basierten Websites haben ein großes Plugin-Repository. Es gibt viele Plugins, die Ihnen erlauben, JavaScript aufzuschieben und alle Komplikationen zu handhaben, die mit dem Aufschieben von Scripts einhergehen können.

6. Caching, Caching, Caching!

Wenn Sie ein begrenztes Budget haben und nicht viel für Hosting ausgeben möchten, ist Caching eine der effektivsten Methoden, um 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 den Browser anweist, so viele statische Ressourcen wie möglich zu cachen. Dies verringert die Last auf Ihrem Server.

Object Cache: Object Cache kann verwendet werden, um Daten zu speichern, deren Neugenerierung rechenintensiv sein kann, wie z.B. das Ergebnis komplexer Datenbankabfragen. Bitten Sie Ihren Hoster, Redis oder Memcached zu installieren.

Full Page Cache: Wenn Sie ein CMS verwenden, sollten Sie wahrscheinlich einen Full-Page-Cache zu Ihrer Website hinzufügen. Für WordPress sind WP Fastest Cache oder WP Core Web Vitals gute Optionen

7. Strategische Hosting-Entscheidungen treffen

Beim Hosting lohnt es sich, verschiedene Anbieter zu vergleichen, und der teuerste Hoster 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 Anbieter, die optimierte Server anbieten. Eine strategische Hosting-Wahl kann einen erheblichen Unterschied in der Website-Geschwindigkeit ausmachen.

8. Kontinuierliches Monitoring und Analyse

Implementieren Sie eine robuste Monitoring-Strategie mit erschwinglichen Tools wie [url =https://coredash.app]CoreDash[/url]. Überprüfen Sie regelmäßig die Performance Ihrer Website, um neue Optimierungsmöglichkeiten zu identifizieren und konsistente Geschwindigkeitsverbesserungen sicherzustellen.