5 Tipps für die Erstellung schnellerer und nachhaltigerer Websites mit Fastly

Als Mitglied des Solutions-Engineering-Teams bei Fastly entwickle ich Lösungen für Kunden, die die flexible Edge Cloud von Fastly nutzen. Mein Schwerpunkt liegt dabei häufig auf der Verbesserung der Web-Performance. Erst kürzlich habe ich einige Zeit damit verbracht, mich mit den Zielen der nachhaltigen Entwicklung zu befassen, und war angenehm von dem engen Zusammenhang zwischen digitaler Nachhaltigkeit und Web-Performance überrascht.

Quellen zur digitalen Nachhaltigkeit sind schwer zu finden. Deshalb bin ich besonders dankbar für den vor kurzem veröffentlichten Bericht der W3C Sustainable Web Design Community Group, der einen Entwurf der Web Sustainability Guidelines enthält.

Der Bericht besteht aus mehreren Empfehlungen, die (wie aus der nachstehenden Aufzählung ersichtlich) jeweils mit einer Nummer versehen sind. Jede Empfehlung umfasst dabei detaillierte Informationen, Erfolgskriterien, Vorteile, Beispiele und Ressourcen. Fünf dieser Empfehlungen versprechen allerdings einen besonderen Mehrwert bei der Verbesserung der Web-Performance. 

Der Leitfaden enthält auch einige zusätzliche Anregungen für eine verbesserte Wirksamkeit: 

• 2.6 Entwicklung reibungsloser und nutzerfreundlicher Erlebnisse als Standard

• 2.7 Vermeidung unnötiger oder übermäßiger Assets

• 2.16 Mehr Nachhaltigkeit bei Medien-Assets

• 2.18 Mehr Nachhaltigkeit bei Schriftarten

• 2.26 Integration von Performance-Tests in jeden größeren Release-Zyklus

• 3.1 Ermittlung relevanter technischer Indikatoren

• 3.2 Minimierung von HTML, CSS und JavaScript

• 3.7 Rigorose Überprüfung von Drittanbieterservices

• 3.9 Vermeidung von Inhalten, die das Rendern von Websites blockieren

• 5.27 Festlegung von Performance- und Umweltbudgets

Sehen wir uns die fünf wichtigsten Empfehlungen aber einmal genauer an:

2.15 Mehr Nachhaltigkeit bei Medien-Assets

Bei den meisten Websites und Anwendungen sind Bilder die Hauptursache für hohe Datenübertragungsraten, da sie oft in großer Zahl verwendet werden und sehr nützlich sind. Im Sinne der Nachhaltigkeit sollten Sie also nichts unversucht lassen, um die Größe von Bilddateien zu minimieren und unnötiges Laden zu vermeiden.

Erfolgskriterium Bildoptimierung: Ändern Sie die Größe, optimieren und komprimieren Sie jedes Bild (außerhalb des Browsers) und bieten Sie jeweils verschiedene Bildgrößen für unterschiedliche Bildschirmauflösungen an.

Performance-Vorteil: Durch Bildoptimierung können Sie Ihre Website in puncto HTTP-Anfragen, Datenübertragung und in einigen Fällen sogar beim physischen Rendering erheblich beschleunigen. All dies beeinflusst das Nutzererlebnis und die Zugriffsgeschwindigkeit.

Fastly Fokus: Fastlys Image Optimizer verbessert Ihre Performance ohne Abstriche beim Nutzererlebnis zu machen, indem Sie durch Bildoptimierung auf der Edge für schnellere Seitenladezeiten sorgen. Begeistern Sie die Besucher Ihrer Website durch kurze Seitenladezeiten – und bieten Sie Ihrem Entwicklerteam die Möglichkeit, sich auf wichtigere Dinge als auf die Bildoptimierung zu konzentrieren. 

4.2 Optimiertes Browser Caching

Browser Caching sorgt dafür, dass Dateien nicht ständig neu vom Server geladen werden müssen. In bestimmten Situationen können sie sogar offline angezeigt werden (oder im Falle eines Reverse Proxys sofort wiederkehrende Anfragen ohne zusätzlichen serverseitigen Rechenaufwand senden). Dies hat Vorteile für Nachhaltigkeit und Performance (zum Beispiel durch die deutlich kürzere Time to First Byte).

Erfolgskriterium serverseitiges Caching: Wenn Sie ein CMS verwenden, installieren Sie ein entsprechendes Plugin, um das serverseitige Caching zu aktivieren. Verwenden Sie andernfalls die mitgelieferten Serverkonfigurationsdateien, um den Ablauf des Dateityp-Cache mit den HTTP-Headern „expires“, „bfcache“ oder „cache-control“ einzubinden und zu optimieren. Wenn Sie eine Sprache oder ein Framework verwenden, das Seiten auf Anfrage generiert, sollten Sie die Antworten für statische Seiten im Cache speichern, damit sie für zukünftige Besucher wiederverwendet werden können.

Performance-Vorteil: Nicht modifizierte Dateien müssen nicht ständig neu heruntergeladen werden (was Bandbreite spart), und das serverseitige Caching sorgt für einen geringeren Bedarf an Computing-Ressourcen (da wahrscheinlich weniger HTTP-Anfragen gestellt werden). Außerdem wird durch die Auswahl der zwischengespeicherten Inhalte ein Gleichgewicht zwischen einem schnelleren Neuladen und der Notwendigkeit, neue Seiten anzufordern, hergestellt. Dadurch entstehen für die Besucher unter Umständen kürzere Wartezeiten, da die Daten für wiederholte Anfragen zwischengespeichert werden.

Fastly Fokus: Caching ist unser Steckenpferd, und wenn Sie sowohl um Browser und bei Fastly cachen, sind Sie ganz vorne mit dabei. Weitere Infos und Best Practices finden Sie in unserer Dokumentation unter Cache freshness and TTLs. 

4.3 Komprimierung von Dateien

Jede Datei nimmt eine bestimmte Menge an Speicherplatz auf dem Server ein, und diese Daten müssen über das Internet an jeden Besucher gesendet werden. Dadurch werden zwar Ressourcen verbraucht, aber durch die Verwendung von Komprimierungsalgorithmen können Sie jede Datei verkleinern, sodass ihre Reise weniger Auswirkungen auf die Umwelt hat.

Erfolgskriterium serverseitige Komprimierung: Wenn Sie ein CMS verwenden, installieren Sie ein entsprechendes Plugin wie Brotli oder GZIP, um die serverseitige Komprimierung zu aktivieren. Andernfalls verwenden Sie die mitgelieferten Serverkonfigurationsdateien, um die performancebezogenen Funktionen einzubinden und an Ihre Anforderungen anzupassen.

Fastly Fokus: Die verlustfreie Komprimierung von Assets sorgt für einen klaren Performance-Gewinn. Fastly kann sowohl cachefähige als auch nicht cachefähige Inhalte komprimieren. Einzelheiten finden Sie in unserer Dokumentation unter Delivering compressed content through Fastly. 

4.7 Die Aktualisierungsrate ist relevant für die Bedürfnisse der Nutzer

Rufen Sie nur Daten vom Server ab, die Ihre Besucher auch wirklich brauchen. Verlassen Sie sich so weit wie möglich auf einen clientseitigen oder serverseitigen Cache und einen clientseitigen/lokalen Speicher. Anstatt die Daten mit einer bestimmten Häufigkeit zu aktualisieren, können Sie es dem Besucher überlassen, die Aktualisierung manuell vorzunehmen.

Erfolgskriterium Aktualisierungsrate: Die Aktualisierungsrate (sowohl für den Cache als auch für die lokal gespeicherten Daten und die Website) wird je nach Anforderungen der Besucher festgelegt.

Wirtschaftlicher Vorteil: Caching kann zur Kostensenkung beitragen, indem es für geringere Datenmengen sorgt, die über das Netzwerk übertragen werden.

Fastly Fokus: Wenn es um das Cachen von Inhalten bei Fastly geht, können Sie die Cache-Dauer ändern (siehe Cache freshness and TTLs) und Inhalte invalidieren, wenn sie sich ändern (siehe Purging).  

4.10 Erwägung von CDNs und Edge Caching

Edge Caching und CDN-Auslieferung können dazu beitragen, die nachhaltige Bereitstellung digitaler Services zu optimieren, indem Sie die Übertragsungsweise Ihres Web-Traffics über das Internet optimieren.

Erfolgskriterium Content Delivery Networks (CDNs): Wenn Sie Angebote für ein weltweit verteiltes Publikum erstellen, sollten Sie ein CDN verwenden, um einfache, schreibgeschützte, vorab generierte Ressourcen schnell und effizient zu speichern und auszuliefern. CDNs können zwar definitiv zu einer besseren Performance beitragen, stellen aber auch eine weitere Infrastrukturebene dar, die unter dem Blickwinkel der Nachhaltigkeit berücksichtigt werden sollte.

Performance-Vorteil: Besucher erleben kürzere Latenzzeiten, da sich die Entfernung zwischen ihnen und dem Server verringert.

Fastly Fokus: Von dieser Lösung abzuraten, fällt uns schwer, denn wir sind davon überzeugt, dass Edge Caching rund um den Globus für schnelle, personalisierte Erlebnisse sorgen kann.

Entwickeln Sie (sich) mit uns

Erstellen Sie schnellere und nachhaltigere Websites mit Fastly an Ihrer Seite.