Unnötige Downloads eliminieren

Ilya Grigorik
Ilya Grigorik

Die schnellste und am besten optimierte Ressource ist eine Ressource, die nicht gesendet wird. Sie sollten unnötige Ressourcen aus Ihrer Anwendung entfernen. Es empfiehlt sich, die impliziten und expliziten Annahmen mit Ihrem Team zu hinterfragen und regelmäßig zu überprüfen. Hier einige Beispiele:

  • Sie haben die Ressource X schon immer auf Ihren Seiten eingefügt, aber stellen die Kosten für das Herunterladen und Anzeigen der Ressource den Wert, den sie für die Nutzenden hat, wieder her? Können Sie den Nutzen messen und nachweisen?
  • Erbringt die Ressource (insbesondere, wenn es sich um eine Drittanbieterressource handelt) eine konstante Leistung? Befindet sich diese Ressource im kritischen Pfad oder muss sie dort sein? Wenn sich die Ressource im kritischen Pfad befindet, könnte sie ein Single Point of Failure für die Website sein? Hat die Ressource also Auswirkungen auf die Leistung und Nutzerfreundlichkeit Ihrer Seiten, wenn sie nicht verfügbar ist?
  • Benötigt diese Ressource ein SLA oder hat sie ein SLA? Entspricht diese Ressource den Best Practices für die Leistung, z. B. Komprimierung und Caching?

Häufig enthalten Seiten Ressourcen, die unnötig sind oder sogar die Leistung beeinträchtigen, ohne dass sie für den Besucher oder die Website, auf der sie gehostet werden, einen großen Mehrwert bieten. Dies gilt gleichermaßen für Ressourcen und Widgets von Erst- und Drittanbietern:

  • Website A hat sich entschieden, auf ihrer Startseite ein Fotokarussell anzuzeigen, damit der Besucher mit nur einem Klick eine Vorschau mehrerer Fotos anzeigen kann. Beim Laden der Seite werden alle Fotos geladen und der Nutzer navigiert durch die Fotos.
    • Frage:Haben Sie gemessen, wie viele Nutzer sich mehrere Fotos im Karussell ansehen? Möglicherweise entsteht ein hoher Mehraufwand durch das Herunterladen von Ressourcen, die sich die meisten Besucher nie ansehen.
  • Auf Website B wurde beschlossen, ein Drittanbieter-Widget zu installieren, um ähnliche Inhalte anzuzeigen, die Interaktion mit sozialen Netzwerken zu verbessern oder einen anderen Dienst anzubieten.
    • Frage:Haben Sie erfasst, wie viele Besucher das Widget verwenden oder auf die damit bereitgestellten Inhalte klicken? Ist die Interaktion, die dieses Widget generiert, ausreichend, um den Mehraufwand zu rechtfertigen? Können Sie außerdem eine Ladestrategie verwenden, damit das Script erst geladen wird, wenn es benötigt wird?

Um zu entscheiden, ob unnötige Downloads vermieden werden sollen, müssen häufig sorgfältige Überlegungen und Messungen erforderlich sein. Um optimale Ergebnisse zu erzielen, sollten Sie regelmäßig eine Bestandsaufnahme durchführen und diese Fragen für jedes Asset auf Ihren Seiten prüfen.

Auswirkungen auf Core Web Vitals

Die Initiative „Core Web Vitals“ wurde von Google eingeführt, um eine Reihe von Messwerten bereitzustellen, die Aufschluss darüber geben, was Nutzer bei der Nutzung des Internets machen. Für Core Web Vitals gibt es viele Optimierungsstrategien. Wenn Sie sich jedoch überlegen, ob eine bestimmte Ressource auf einer Seite geladen werden soll, können Sie diese Messwerte auf Ihrer Website möglicherweise verbessern. Unten finden Sie einige Beispiele – gruppiert nach Core Web Vitals –, die es wert sind, sie durchzugehen. Obwohl dies keine vollständige Liste von Beispielen ist (und es gibt viele!), können Sie sich diese Beispiele noch einmal durchlesen.

Largest Contentful Paint (LCP)

Beim Largest Contentful Paint (LCP) wird gemessen, wann der größte Inhalt (z. B. ein Hero-Image oder eine Überschrift) geladen wurde. Er gilt als wichtiger Wahrnehmungsmesswert, der dem Nutzer den Eindruck vermittelt, dass eine Website schnell geladen wird.

Im Allgemeinen bedeutet das, dass dem Nutzer die Bandbreite weniger Ressourcen zugewiesen wird, wenn weniger Ressourcen heruntergeladen werden. Dies kann zu einer Verbesserung des LCP führen. Ein klassisches Beispiel ist das Lazy Loading. Dabei werden Bilder, die während des Seitenaufbaus außerhalb des Darstellungsbereichs liegen, erst heruntergeladen, wenn der Browser festgestellt hat, dass der Nutzer sie mit höherer Wahrscheinlichkeit sehen wird. Wenn Sie eine große Miniaturansicht-Galerie mit etwa 50 Bildern haben, bedeutet das Lazy Loading aller Bilder bis auf die Top-10-Bilder, dass der Browser die verfügbare Bandbreite effizienter nutzen kann und die ersten Bilder, die der Nutzer sieht, schneller geladen werden.

Es geht jedoch nicht nur darum, unbedingt weniger Images zu laden. Der Browser verfügt über ein internes Priorisierungsschema, das bestimmt, wie viel Bandbreite jede Ressource erhalten soll. Aber selbst bei diesem Vorgehen können alle Ressourcen – insbesondere solche, die mit hoher Priorität heruntergeladen werden – die abhängige Ressource eines potenziellen LCP-Elements beeinträchtigen. Dies gilt insbesondere für langsame Netzwerkverbindungen. Bei dieser abhängigen Ressource kann es sich um eine Bilddatei handeln, die das LCP-Element der Seite darstellt. Sie könnte aber auch eine Webschriftart-Ressource sein, die der Browser zum Rendern eines Textknotens benötigt, der als LCP-Element der Seite bestimmt werden kann.

Falls Ihre Website viel Text enthält, kann das der Fall sein, dass das LCP-Element einer Seite ein Textknoten ist. Es gibt zwar viele gute Strategien zur Optimierung und zum Laden von Schriftarten, es lohnt sich jedoch, zu überlegen, ob eine Systemschriftart für die Anforderungen Ihrer Website ausreicht, damit LCP-Elemente, bei denen es sich um Textknoten handelt, ohne Abhängigkeit von einer Webschriftart-Ressource geladen und nahezu sofort dargestellt werden können, wenn CSS und HTML vom Server eintreffen.

Cumulative Layout Shift (CLS)

Jede von Ihnen geladene Ressource kann zum Cumulative Layout Shift (CLS) einer Seite beitragen, insbesondere wenn der Download zum Zeitpunkt des anfänglichen Paints noch nicht abgeschlossen ist. Zur Vermeidung von CLS müssen bei Bildern beispielsweise explizite Abmessungen festgelegt werden. Bei Schriftarten können durch die Verwaltung des Ladens von Schriftarten und ggf. der Fallback-Schriftartabgleich die Verschiebungen während des Auslagerungszeitraums einer Webschriftart minimiert werden. Bei JavaScript könnten Sie beispielsweise festlegen, wie dieses Skript das DOM so manipuliert, dass Layout Shifts auf ein akzeptables Ausmaß reduziert werden.

Für jede Ressource, die zum CLS einer Seite beiträgt, ist ein gewisser Aufwand erforderlich, um sicherzustellen, dass das Seitenlayout ausreichend stabil ist. Wenn Sie sich fragen, ob Sie eine bestimmte Ressource benötigen oder nicht, beschleunigen Sie nicht nur das Laden von Seiten, sondern reduzieren auch den kognitiven Aufwand, der erforderlich ist, um die Stabilität des Layouts zu wahren. Dies führt nicht nur zu einer deutlich weniger frustrierenden Nutzererfahrung, sondern auch zu einer weniger frustrierenden Erfahrung für die Entwickler, da Sie mehr Zeit haben, um andere Ziele in Ihren Projekten zu verfolgen.

Interaktion mit nächstem Paint (INP)

Interaction to Next Paint (INP) misst die Reaktion auf Nutzereingaben während der gesamten Lebensdauer einer Seite. Der INP-Wert einer Seite kann stark durch den JavaScript-Code beeinflusst werden, der geladen wird, da JavaScript der Hauptgrund für die Interaktivität im Web ist. Vor allem die Menge an Skriptressourcen, die beim Seitenaufbau heruntergeladen werden, kann potenziell teure Arbeit zur Auswertung und Kompilierung von Skripts verursachen. Je weniger JavaScript Sie beim Start laden, desto weniger Arbeit muss der Browser an diesem kritischen Punkt der Nutzerfreundlichkeit der Seite ausführen, an dem die Nutzer möglicherweise versuchen, mit ihm zu interagieren.

Es gibt zwar Strategien zur Reduzierung der Größe der beim Start heruntergeladenen JavaScript-Ressourcen, z. B. Codeaufteilung und Tree Shaking. Es lohnt sich jedoch, die in Ihren Projekten verwendeten Pakete daraufhin zu prüfen, ob sie überhaupt erforderlich sind. lodash bietet beispielsweise viele Methoden, die auch heute noch nützlich sind, wird aber mit Methoden geliefert, die der Browser standardmäßig bietet, darunter Array-spezifische Funktionen zum Mapping, Reduzieren und Filtern und viele weitere.

Progressive Enhancement ist ebenfalls ein nützlicher Ansatz für JavaScript, da Sie damit Nutzern mit leistungsstärkeren Geräten und schnelleren Netzwerkverbindungen eine grundlegende (aber dennoch funktionale) User Experience bieten können. Unabhängig davon, ob Sie sich an das Prinzip der progressiven Verbesserung halten oder nicht, bleibt der Punkt dabei: Jede JavaScript-Ressource, die Sie nicht herunterladen können, kann zu einer Nutzererfahrung führen, die schneller auf Nutzerinteraktionen reagiert, was ein wichtiger Aspekt der Webleistung ist.

Fazit

Die Überprüfung Ihrer Website auf unnötige Downloads ist zwar nur einer der entscheidenden Aspekte bei der Gewährleistung einer schnellen Nutzerfreundlichkeit, aber sie kann eine enorme Wirkung haben. Zur Wiederholung:

  • Inventarisieren Sie Ihre eigenen Assets und Drittanbieter-Assets auf Ihren Seiten.
  • Messen Sie die Leistung jedes Assets: seinen Wert und seine technische Leistung.
  • Stellen Sie fest, ob die Ressourcen einen ausreichenden Mehrwert bieten.
  • Hier erfahren Sie, wie sich unnötige Downloads auf die Core Web Vitals und unterstützende Messwerte auswirken.

Wenn Sie die Inhaltseffizienz auf diese Weise optimieren, verbessern Sie nicht nur die Leistung insgesamt, sondern verschwenden auch nicht die Bandbreite der Nutzer. Außerdem können Sie dadurch möglicherweise nutzerorientierte Messwerte verbessern und die Nutzererfahrung verbessern.