Pagespeed mit kleinem Budget: Kosteneffiziente Wege zur Steigerung der Website-Leistung

Pagespeed mit kleinem Budget

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 noch effizienter mit meiner Zeit umgehen und nur Optimierungen mit hohem Gewinn und geringem Aufwand durchführen. In diesem Artikel werden wir praktische, kosteneffiziente Strategien untersuchen, um die Leistung der Website zu steigern und eine nahtlose Benutzererfahrung zu bieten.

Core Web Vitals TIPP: Der budgetfreundlichste Service, den ich anbiete, ist der 2-Stunden Core Web Vitals Support! In 2 Stunden helfe ich Ihnen, eine effektive Strategie zu entwickeln, die die dringendsten Probleme behebt und Ihnen das meiste für Ihr Geld bietet!

Jetzt buchen!

Finden Sie zuerst die Probleme heraus

Bei der Optimierung der Web-Performance mit kleinem Budget müssen wir absolut sicher sein, dass wir so effektiv wie möglich optimieren. Das bedeutet, dass wir zuerst wissen müssen, was das wirkliche Problem ist.

Wir können das hervorragende kostenlose [url=https://pagespeed.web.dev/]PageSpeed Insights[/url] verwenden, um die CrUX-Daten abzufragen. Die CrUX-Daten sind die einzige Datenquelle, die zählt, da dies die Datenquelle ist, die Google verwendet.

CrUX-Daten bestanden!

CrUX-Daten fehlgeschlagen!

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

Lassen Sie mich in Bezug auf das Lighthouse-Audit klar sein! Zu diesem Zeitpunkt kümmern wir uns nicht um Lighthouse. Warum? Weil es die Core Web Vitals nicht misst. Sicher, Lighthouse ist ein tolles Testtool und fühlen Sie sich frei, alle seine Vorschläge zu erkunden, aber da wir ein begrenztes Budget haben, kümmern wir uns um das Bestehen der Core Web Vitals. Wir kümmern uns im Moment nicht um das Bestehen synthetischer Tests!

Zurück zu den CrUX-Daten. Hier sind einige Richtlinien, die Sie befolgen sollten, wenn Sie ein begrenztes 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 render-blocking Ressourcen (deferren Sie Skripte und optimieren Sie Stile)
• 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, finden und entfernen Sie CSS-Übergänge und reservieren Sie Platz für spät rendernde Elemente (wie Anzeigen, Produktfilter usw.)
• Wenn Sie beim Interaction to Next Paint durchfallen, verwenden Sie wahrscheinlich zu viel JavaScript zur falschen Zeit. Entfernen Sie unnötige Skripte/Plugins, verwenden Sie ein RUM-Tool wie Core/Dash, um die langsamsten Skripte zu finden

Bilder verantwortungsvoll optimieren

Bilder tragen auf verschiedene Arten zu den Core Web Vitals bei. Sie sind oft die größten Beitragszahler zur Webseitengröße. Durch die Nutzung effizienter Bildkompressionstechniken und die Verwendung moderner Bildformate wie WebP, können Website-Inhaber die visuelle Qualität beibehalten und gleichzeitig die Ladezeiten erheblich verkürzen. Oft werden Bilder zum Largest Contentful Paint Element. Das bedeutet, dass wir diese wichtigen LCP-Bilder priorisieren und weniger wichtige und Below-the-Fold-Bilder depriorisieren müssen.

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 würde ich zum Beispiel das hervorragende und kostenlose [url=https://wordpress.org/plugins/webp-express/]WebP Express[/url] empfehlen

2. Lazy Loading implementieren

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

Es gibt 2 Möglichkeiten, dies anzugehen. Die erste besteht darin, Lazy Loading in Ihrem CMS zu aktivieren. Dies fügt Lazy Loading zu allen Bildern hinzu. Konsultieren Sie als nächstes die Dokumentation, wie Sie Lazy Loading für die Bilder entfernen, die sichtbar und wichtig sind. Die andere Möglichkeit besteht darin, manuell loading="lazy" zu Below-the-Fold-Bildern hinzuzufügen.

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

3. Bild fetchpriority konfigurieren

Durch Hinzufügen von fetchpriority = "high" zu einem Bild-Tag können wir dem Browser signalisieren, dass dieses Bild wichtiger ist als andere Bilder und mit einer hohen fetchpriority heruntergeladen werden sollte. Und obwohl ich mir bewusst bin, dass es bessere Wege gibt, einschließlich Bild-Preloading und 103 Early Hints, ist das Setzen der fetchpriority einfach, schnell und effektiv! Der Prozess ist einfach: 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 ungefähr so aus

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

2. Nutzung von Browser-Caching für Konsistenz

Wenn Sie budgetfreundliches Hosting verwenden, stehen die Chancen gut, 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 aufgerufene Ressourcen wie Bilder, Skripte und Stylesheets lokal zu speichern, was die Ladezeiten für wiederkehrende Besucher verkürzt. Konfigurieren Sie Caching-Header, um ein Gleichgewicht zwischen optimaler Leistung 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 Stammverzeichnis (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, wenden Sie sich bitte an Ihren Hosting-Anbieter und weisen Sie ihn auf diesen Artikel hin!

3. Ziehen Sie ein kostenloses oder budgetfreundliches CDN wie CloudFlare in Betracht

Erkunden Sie die Vorteile von Content Delivery Networks, um statische Inhalte über Server weltweit zu verteilen. Während Premium-CDNs fortschrittliche Funktionen bieten, können selbst die kostenlosen oder budgetfreundlichen Optionen immer noch einen erheblichen Schub in Bezug auf Pagespeed und Zuverlässigkeit geben.

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 Budget-Hosting-Anbieters übertreffen. Allein aus diesem Grund ist es eine gute Idee, zu CloudFlare zu wechseln 
2. HTTP/3. CloudFlare verwendet die neuesten Protokolle und die schnellsten Kompressionsmethoden. 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 ziemlich starke Erfolgsbilanz, wenn es um das Caching statischer Ressourcen geht. Die Out-of-the-Box-Konfiguration ist wahrscheinlich besser als das, was Sie jetzt haben!
4. Edge-Caching für statische Ressourcen. CloudFlare cached Versionen Ihrer statischen Ressourcen wie Bilder, Skripte und CSS-Dateien und serviert sie direkt dem Endbenutzer von ihrem Edge-Netzwerk. Dies eliminiert die Notwendigkeit von Roundtrips zu Ihrem Ursprungsserver.
5. Rocket Loader. Rocket Loader wird das Laden von Skripten deferren und alle Komplikationen, die daraus entstehen, behandeln. Rocket Loader ist eine grobe Methode, aber wenn Sie nicht in der Lage sind, Skripte manuell zu deferren, 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 'go pro!'. Wenn die 25 $ etwas sind, das Sie sich leisten können und bereit sind, für eine schnellere Seite auszugeben, sollten Sie es wahrscheinlich in Betracht ziehen.

1. Alle kostenlosen Funktionen. Natürlich kommt der Pro-Plan mit allen kostenlosen Funktionen.
2. CloudFlare APO für WordPress. APO für WordPress ist eine Komplettlösung, die Ihre Seiten im Edge-Netzwerk cached, wenn Besucher nicht eingeloggt sind. Dies kann die 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 und cached Bilder im WebP-Format und serviert sie nur Besuchern, die diese Formate akzeptieren.

4. Self hosten Sie so viel wie Sie können!

Eine weitere einfache und effektive Optimierung ist das Self-Hosting von 'statischen Ressourcen'. Auf vielen Seiten 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 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 die Verwendung dieser ist eigentlich eine ziemlich schlechte Idee und wird Ihre Seite verlangsamen!

Die Idee, ein gemeinsames CDN für diese Arten von Dateien zu verwenden, war gut, als Browser diese Dateien noch über Websites hinweg teilen konnten. Diese Tage liegen in der Vergangenheit. 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 Drittanbieterdateien selbst zu hosten. Das ist einfach, laden Sie einfach die Datei herunter, platzieren Sie sie auf Ihrem Server und ändern Sie den Verweis auf diese Datei.

5. Asynchrones Skriptladen

Ein riesiger Engpass können 'blockierende Skripte' im Head der Seite sein. Diese Skripte können manchmal das Laden der Seite um bis zu 20 Sekunden verzögern! Das Deferren dieser Skripte ist überhaupt nicht schwer. Fügen Sie einfach defer zum Skript-Tag hinzu und Sie sind 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 deferred Skript-Tag -->
<script defer src="script.js"></script>

Aber es gibt Haken! Das Hinzufügen von defer zu Skript-Tags kann alle Arten von Problemen und Abhängigkeitsfehlern verursachen. Und da Sie ein begrenztes Budget haben, muss ich annehmen, dass Sie nicht die Mittel haben, einen JavaScript-Experten einzustellen, um alle Probleme zu beheben, die auftreten könnten. Also versuchen Sie bitte, Ihre Skripte zu deferren und auf Fehler zu prüfen (drücken Sie Ctrl-Shift-I in Chrome und überprüfen Sie den Konsolen-Tab). Wenn es nach dem Testen keine Probleme gibt ... gehören Sie zu den wenigen Glücklichen! Wenn es Probleme gibt, sollten Sie wahrscheinlich auf eine der folgenden Lösungen zurückgreifen:

Verwenden Sie Rocket Loader 

Wie besprochen gibt Ihnen die kostenlose Version von CloudFlare Zugriff auf Rocket Loader. Dies wird alle Skripte auf einer Seite deferren. Es ist keineswegs perfekt, aber meistens leistet es gute Arbeit.

Verwenden Sie ein Plugin

Die meisten CMS-basierten Seiten haben ein riesiges Plugin-Repository. Es gibt viele Plugins, mit denen Sie JavaScript deferren und alle Komplikationen behandeln können, die mit dem Deferren von Skripten 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 Möglichkeiten, eine Website zu beschleunigen. Caching ist besonders effektiv gegen eine hohe Time to First Byte. Caching kann auf verschiedenen Ebenen erfolgen. 

Client Side 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 Neuerstellung rechenintensiv sein könnte, wie 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 wahrscheinlich einen Full Page Cache zu Ihrer Seite hinzufügen. Für WordPress sind gute Optionen WP Fastest Cache oder WP Core Web Vitals

7. Treffen Sie strategische Hosting-Entscheidungen

Wenn es um Hosting geht, lohnt es sich, sich umzusehen, und der teuerste Host ist nicht immer der schnellste. Im Allgemeinen suchen Sie nach einem Hosting-Plan, der für Ihr CMS optimiert ist, denn ein Hansdampf in allen Gassen ist ein Meister in nichts!  Suchen Sie Anbieter, die optimierte Server anbieten. Eine strategische Hosting-Entscheidung kann einen erheblichen Unterschied in der Website-Geschwindigkeit machen.

8. Kontinuierliche Überwachung und Analyse

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