So vermeiden Sie enorme Netzwerknutzlasten (auf die intelligente Art)

Veröffentlicht: 2023-07-19

Sie haben gerade einen Google PageSpeed ​​Insights-Bericht erstellt und diese Warnung wurde im Abschnitt „Diagnose“ angezeigt:

Vermeiden Sie die Warnung „Enormous Network Payloads“ im Google PageSpeed ​​Insights-Bericht

Obwohl „enorm“ zunächst beängstigend klingt, lässt sich die Meldung „Enorme Netzwerknutzlasten vermeiden“ leicht beheben.

In diesem Leitfaden finden Sie die effektivsten Techniken, um das Problem zu beheben und sicherzustellen, dass Sie die Warnung nie wieder sehen.

Lasst uns direkt eintauchen!

Was sind Netzwerknutzlasten?

Ähnlich wie bei einem Dialog zwischen zwei Personen kommunizieren Browser und Server über Netzwerkanfragen und -antworten. Netzwerknutzlasten sind also die Informationen, die ein Webbrowser und ein Server austauschen, wenn ein Benutzer Ihre Website lädt.

Browser und Server kommunizieren über Netzwerknutzlasten

Im technischeren Sinnestellen Netzwerknutzlasten die Gesamtgröße der über das Netzwerk übertragenen Ressourcen dar , z. B. HTML-, CSS-, JavaScript-Dateien, Bilder, Videos und andere Inhalte, aus denen Ihre Website besteht.

Was bedeutet die Warnung „Enorme Netzwerknutzlasten vermeiden“?

Vereinfacht ausgedrückt bedeutet „Vermeiden Sie enorme Netzwerknutzlasten“, dass Ihre Seite zu groß ist. Der Google PSI-Bericht macht Sie darauf aufmerksam, weil Sie die empfohlene Gesamtseitengröße von 1,6 MB (oder 1.600 KB) überschritten haben.

Erinnern!

Im Falle dieser Warnung sollten Sie Ihre Optimierungsbemühungen nicht nur auf Ihre Homepage beschränken. Alle Seiten müssen überwacht und ihre Größe reduziert werden, wann immer dies möglich ist.

Und um einige allgemeine Fragen zu klären:Nutzlastgröße,SeitengrößeundSeitengewichtbeziehen sich alle auf die Gesamtgröße einer bestimmten Webseite und können austauschbar verwendet werden.

Was sollte eine optimale Seitengröße sein?

Obwohl es keine optimale Seitengröße gibt, hat Google herausgefunden, dass das Obergrenzenziel von 1,6 MB die maximale Datenmenge ist, die theoretisch über eine 3G-Verbindung heruntergeladen werden kann, während die Zeit bis zur Interaktion unter 10 Sekunden liegt.

Beim Google PSI-Test wird eine 1,6-Megabit-Verbindung verwendet (das ist ziemlich langsam). Um unter Zielgruppen mit Zugang zu schnellen Netzwerken konkurrenzfähig zu sein, sollten Sie also realistischerweise einen Wert zwischen 1 und 1,5 MB anstreben.

Dies bietet genügend Platz für beliebte Drittanbieterdienste wie Google Analytics, Facebook Pixel und die Übertragung einer großen Anzahl von Bildern, ohne die Geschwindigkeit Ihrer Website negativ zu beeinflussen.

Das bringt uns zum nächsten wichtigen Punkt.

Warum sind enorme Netzwerknutzlasten schädlich?

Große Datenmengen, die über das Netzwerk übertragen werden, wirken sich negativ auf die Leistung Ihrer Website und die Anzahl der Besucher aus.

Große Netzwerknutzlasten benötigen mehr Zeit zum Herunterladen, was folgende Nachteile mit sich bringt:

  • Ladezeiten
  • Größter Contentful Paint-Score
  • Gesamtleistungsbewertung und Core Web Vitals

Unterdessen werden Benutzer und mobile Benutzer in langsameren Netzwerken und begrenzten Datentarifen mit einer trägen, frustrierenden Benutzererfahrung, nicht reagierenden Seiten und sogar verweigertem Zugriff auf Ihre Website begrüßt.Ganz zu schweigen davon, dass ihnen von den Netzwerkanbietern möglicherweise zusätzliche Gebühren für den Versuch berechnet werden, Ihre Website zu laden.

Es überrascht nicht, dass dies bedeuten würde, dass Ihr Unternehmen höhere Absprung- und Exit-Raten, eine geringere Benutzerinteraktion und schlechte Konversionsraten verzeichnen würde.

Letztendlich kostet es Ihr Online-Geschäft und Ihre Benutzerechtes Geld, wenn Sie die Warnung „Enorme Netzwerknutzlasten vermeiden“ nicht beheben.

Glücklicherweise ermöglicht der PageSpeed ​​Insights-Bericht eine detailliertere Betrachtung, sodass Sie die Schuldigen viel schneller eingrenzen können, bevor Sie mit der Fehlerbehebung beginnen.

Identifizieren der Ursachen enormer Netzwerknutzlasten

Wenn Sie die Warnung „Enorme Netzwerknutzlasten vermeiden“ erweitern, erhalten Sie eine detaillierte Aufschlüsselung der Seitengröße nach Dateityp und Bereitstellungsort.

Aufschlüsselung der Warnung „Vermeiden Sie enorme Netzwerknutzlasten“ im Google PSI-Bericht

Die häufigsten Übeltäter für große Netzwerknutzlasten sind:

  1. Nicht optimierte CSS- und JavaScript-Dateien (einschließlich JS von Drittanbietern)
  2. Große Bilder und Videos
  3. Übermäßiger Einsatz von Plugins oder Bibliotheken von Drittanbietern
  4. Nicht optimierte Web-Schriftarten

Der nächste Schritt besteht natürlich darin, herauszufinden, welche Techniken und Optimierungen Ihnen dabei helfen, die Größe Ihrer Webseite am effektivsten zu reduzieren.

Sie haben keine Zeit zum Selbermachen? NitroPack ist das All-in-One-Plugin, das PSI-Warnungen beim Autopiloten eliminiert. Probieren Sie es jetzt aus →

So vermeiden Sie enorme Netzwerknutzlasten in WordPress

1. Wählen Sie leichte WordPress-Themes und Seitenersteller

Die anfängliche Verwendung eines schlanken Setups garantiert eine reduzierte Seitengröße. Einige WordPress-Themes und Seitenersteller (wie Divi und Elementor) verfügen über umfangreiche Funktionen, Anpassungsoptionen und vorinstallierte Assets, die Ihre Website schnell aufblähen und verlangsamen können.

WordPress-Seitenersteller im Vergleich nach Ressourcenaufblähung

Erwägen Sie, CSS, JavaScript und Schriftarten zu testen, bevor Sie Ihre Website entwickeln. Sehen Sie sich außerdem an, welche WordPress-Themes hervorragende Ergebnisse in Bezug auf Geschwindigkeit und Core Web Vitals-Leistung gezeigt haben.

Wenn Sie bereits ein aufgeblähtes Theme oder einen Seitenersteller verwenden, gibt es mehrere Möglichkeiten, diese zu optimieren, um die Netzwerknutzlast zu reduzieren:

  • Codieren Sie Ihre Kopfzeile, Fußzeile und Seitenleiste in CSS (vermeiden Sie dies im Seitenersteller)
  • Beschränken Sie die Verwendung zusätzlicher Page Builder-Plugins und testen Sie deren CSS und JavaScript, bevor Sie dies tun
  • Lazy Load-Hintergrundbilder (springen Sie direkt zu den von uns empfohlenen Techniken)
  • Erwägen Sie, auf einige der Funktionen zu verzichten, um Ihr Seitendesign und Ihre Ressourcen zu vereinfachen

2. Hüten Sie sich vor WordPress-Plugins, die Ihre Website aufblähen

WordPress bietet durch Plugins eine große Menge an Funktionalitäten.

Allerdings kann die Verwendung zu vieler Plugins, insbesondere solcher, die dynamische Inhalte generieren oder externe Ressourcen laden, die Netzwerknutzlast erhöhen. Jedes Plugin kann zusätzliches CSS, JavaScript oder andere Assets hinzufügen, die vom Browser geladen werden müssen, was zu einer größeren Nutzlast führt.

So können Sie verhindern, dass WordPress-Plugins Ihre Seitengröße aufblähen:

  • Überprüfen Sie, ob Ihre aktiven Plugins für Ihre Website und Ihre Geschäftsanforderungen noch relevant sind: Bei großen Plugin-Sammlungen verlieren Websitebesitzer oft den Überblick darüber, was zu einem bestimmten Zeitpunkt als nützlich erachtet wurde, und vergessen dann, die Plugins im Laufe der Entwicklung der Website erneut zu prüfen.
  • Plugin-CSS und JavaScript entladen: Einige Plugins neigen dazu, die gesamte Website zu laden, obwohl sie in Wirklichkeit nur auf einer bestimmten Seite oder einem bestimmten Element ausgelöst werden müssen. Mit einem Tool wie Asset CleanUp können Sie diese einschränken. Durch das Entladen von Skripten und Stilen dort, wo sie nicht verwendet werden, können Sie die Größe von CSS- und JavaScript-Dateien reduzieren und die Netzwerknutzlast reduzieren.
  • Entdecken Sie jQuery-Abhängigkeiten: Einige Plugins sind stark auf jQuery angewiesen oder nutzen es ineffizient. Wenn Ihnen in Ihrer PSI-Warnungsaufschlüsselung Plugins unter den größten CSS/JS-Dateien auffallen, wenden Sie sich an einen Entwickler, um die Skriptabhängigkeiten zu optimieren.

3. CSS- und JavaScript-Dateien minimieren

Bei der Minimierung werden unnötige Zeichen aus CSS- und JavaScript-Dateien entfernt, beispielsweise Leerzeichen, Kommentare und Zeilenumbrüche. Das Eliminieren dieser überflüssigen Elemente wirkt sich unmittelbar auf die Seitengröße aus.

Reduzieren Sie CSS und JavaScript, ohne eine einzige Codezeile zu schreiben. Beginnen Sie mit NitroPack →

4. Verzögern Sie JavaScript von Drittanbietern

Sobald Sie die Schuldigen von Drittanbietern identifiziert haben, ist es an der Zeit, diese zu priorisieren, indem Sie sie unterhalb des Ansichtsfensters laden, um Platz im Hauptthread für wichtigere Ressourcen freizugeben.

Das manuelle Reduzieren der Auswirkungen von Code von Drittanbietern mag manchen als zu technisch erscheinen, und wenn dies der Fall ist, empfehle ich Ihnen, sich für eine vorgefertigte Lösung zu entscheiden. Wenden Sie sich an Flying Scripts, wenn Sie eine spezielle Lösung oder ein komplettes Leistungsoptimierungs-Plugin wie NitroPack benötigen.

5. Optimieren Sie Ihre Bilder

Das Hochladen hochauflösender Bilder und Videos direkt in WordPress ohne Optimierung führt zu großen Dateigrößen.

Und was passiert, wenn Sie große Dateien auf Webseiten laden? Du hast es erraten. Erhöhte Netzwerknutzlast.

Es gibt verschiedene Möglichkeiten, Bilder zu optimieren:

  • Bildgröße ändern: Die manuelle Größenänderung Ihrer Bilder mit Bildbearbeitungssoftware oder Online-Tools kann sehr zeitaufwändig sein. Um sicherzustellen, dass Bilder auf allen Geräten immer die richtigen Abmessungen haben, erkunden Sie die adaptive Bildgröße von NitroPack.
  • Bilder komprimieren: Durch die Komprimierung von Bildern um 85 % wird ihre Dateigröße reduziert, ohne dass die visuelle Qualität wesentlich beeinträchtigt wird. Sie können Bildkomprimierungs-Plugins verwenden, um vorhandene Bilder in Ihrer Medienbibliothek massenhaft zu optimieren.
  • Konvertieren Sie Bilder in WebP: Durch die Verwendung von Bildformaten der nächsten Generation wie WebP können Sie die Größe der Bilddateien reduzieren, um das Laden und Bereitstellen von Inhalten zu beschleunigen.
  • Lazy Loading-Bilder: Implementieren Sie Lazy Loading, um das Laden von Bildern zu verzögern, bis sie gerade angezeigt werden. Diese Technik reduziert die anfängliche Netzwerknutzlast, indem nur die auf dem Bildschirm sichtbaren Bilder geladen werden, während der Rest geladen wird, wenn der Benutzer nach unten scrollt.

Optimieren Sie alle Ihre Bilder im Autopiloten mit NitroPack! Lazy Load, WebP, Adaptive Image Sizing und vieles mehr →

6. Optimieren Sie Ihre Web-Schriftarten

Webfonts werden bei der Ressourcenoptimierung oft übersehen, gehören aber zu den Hauptressourcen, die große Netzwerknutzlasten verursachen.

Stellen Sie sicher, dass Sie Schriftarten verwenden, die für den Webspace konzipiert sind. Sie erkennen sie an ihrem .woff2-Format. Durch das lokale Hosten wird außerdem die Anzahl externer Anfragen reduziert.

Weitere effektive Techniken zur Schriftartenoptimierung sind:

  • Das Laden der Schriftart wird aufgeschoben, bis es für die Benutzerinteraktion erforderlich wird
  • Unterteilung von Schriftarten und Verwendung nur der Zeichen, die tatsächlich auf einer Seite angezeigt werden, anstelle aller verfügbaren Glyphen in der Schriftart

Andere Techniken zur Reduzierung der Netzwerknutzlast

Verwenden Sie CDN

Ein Content Delivery Network (CDN) ist ein Netzwerk von weltweit verteilten Servern. Mit einem CDN können Sie Kopien der statischen Assets Ihrer Website, wie Bilder, CSS, JavaScript-Dateien und andere Medien, auf Servern in verschiedenen geografischen Regionen speichern.

Content Deliver Network (CDN) erklärt

Wenn Besucher auf Ihre Website zugreifen, stellt das CDN diese Assets von dem Server bereit, der ihrem Standort am nächsten liegt, wodurch die Entfernung der Daten verkürzt und die Netzwerklatenz minimiert wird.

Dies führt zu einer schnelleren Bereitstellung von Inhalten und einer geringeren Netzwerknutzlast. Darüber hinaus kann ein CDN dabei helfen, Verkehrsspitzen zu bewältigen und die Last auf mehrere Server zu verteilen, wodurch die Gesamtleistung und Zuverlässigkeit Ihrer Website verbessert wird.

Holen Sie sich alle Vorteile des hochwertigen Cloudflare CDN und eine vollständige Leistungsoptimierung mit NitroPack →

Komprimieren Sie Assets mit GZIP und Brotli

Als logische Erweiterung der Verwendung eines CDN sollten Sie Komprimierungstechniken wie GZIP und Brotli nutzen. Sie können die Größe der Assets Ihrer Website, einschließlich HTML, CSS, JavaScript und anderer Dateien, erheblich reduzieren.

  • GZIP ist eine weithin unterstützte Komprimierungsmethode, die auf Ihrem Webserver aktiviert werden kann. Es komprimiert die Assets, bevor sie über das Netzwerk gesendet werden, wodurch die Netzwerknutzlast reduziert und die Ladezeiten verkürzt werden.
  • Brotli ist ein neuerer Komprimierungsalgorithmus, der noch bessere Komprimierungsraten bietet.

Tatsächlich ist Brotli flexibler als GZIP und weist im Allgemeinen eine höhere Komprimierungsrate auf. Tatsächlich kommen Squash-Benchmarks-Tests zu dem Schluss, dass Brotli über alle Komprimierungsstufen hinweg ein besseres Komprimierungsverhältnis bietet (was bedeutet, dass es kleinere komprimierte Dateien erzeugt).

Caching anwenden

Caching ist eine Technik, die häufig aufgerufene Daten oder Assets im temporären Speicher speichert, um spätere Zugriffszeiten zu verbessern.

Durch die Implementierung von Caching-Mechanismen können Sie die Anzahl der an den Server gerichteten Anfragen reduzieren und so die Netzwerknutzlast minimieren.

Es gibt verschiedene Arten von Caching, die Sie nutzen können:

  • Browser-Caching: Durch die Konfiguration von Caching-Headern auf Ihrem Webserver werden die Browser der Besucher angewiesen, statische Assets lokal zu speichern.
  • Serverseitiges Caching: Durch die Implementierung serverseitiger Caching-Techniken wie Objekt-Caching, Seiten-Caching oder Datenbankabfrage-Caching kann die Leistung dynamischer Websites erheblich verbessert werden.

Vermeiden Sie mit NitroPack automatisch enorme Netzwerknutzlasten

Die wichtigste Erkenntnis zur Reduzierung großer Netzwerklasten besteht darin, Ihre Website so schlank wie möglich zu halten.

Mit NitroPack erhalten Sie über 35 automatisierte Optimierungen, darunter:

  • Erweiterter Caching-Mechanismus
  • Integriertes CDN von Cloudflare
  • HTML-, CSS- und JavaScript-Minimierung
  • Vollständiger Bildoptimierungs-Stack (Lazy Load, adaptive Bildgröße, WebP usw.)
  • Schriftart-Untermenge

Im Gegensatz zu anderen Plugins zur Leistungsoptimierung arbeitet NitroPack in der Cloud, um ein Aufblähen der Website zu vermeiden und den Bedarf an separaten Optimierungs-Plugins zu reduzieren.

Führen Sie einen Demotest auf Ihrer Website durch, um NitroPack in Aktion zu sehen.

Schließen Sie sich 180.000 Websitebesitzern mit einem Lighthouse-Leistungswert von über 90 an! NitroPack in 3 Minuten einrichten →

Best Practices zur Vermeidung enormer Netzwerknutzlasten in der Zukunft

Um sicherzustellen, dass diese Warnung nie wieder Ihre Leistungsberichte beeinträchtigt, sollten Sie Folgendes tun:

  • Überprüfen und optimieren Sie die Website-Assets regelmäßig (mindestens alle 28 Tage).
  • Priorisieren Sie die Leistung in Webentwicklungsprozessen (ja, das bedeutet auch Design)
  • Testen Sie die Website-Leistung auf verschiedenen Geräten und Netzwerken (simulieren Sie mit GTmetrix)
  • Bleiben Sie über Web-Performance-Trends und -Techniken auf dem Laufenden