Sponsored Post Was ist das?

Bildlastige Websites? Ein Image Optimizer erhöht deinen Pagespeed

Eine Edge-Cloud kann deine Website-Performance verbessern (Foto: Shutterstock / Rawpixel.com)

Lesezeit: 3 Min. Gerade keine Zeit? Jetzt speichern und später lesen

Anzeige

Verschiedene Endgeräte und bildlastige Websites beeinträchtigen die Performance und stellen Website-Betreiber vor eine große Herausforderung. Lies hier, welches Tool hilft, diese Probleme zu beheben und deine Seite für alle Geräte flott zu kriegen.

Website-Performance, Design und SEO – ein Dilemma? 

Fastly
Fastly

Bei Fastly ist der Name Programm. Das Content-Delivery-Network mit moderner Cloud-Architektur verbessert die Performance deiner Website.

Dass Ladezeiten einer Website bares Geld bedeuten, ist mittlerweile allgemein bekannt. Zahlreiche Studien haben das in den letzten Jahren belegt. So springen zum Beispiel  53 Prozent der Mobilnutzer bereits ab, wenn die Ladezeit einer Website bei über drei Sekunden liegt.

Auch Google will seinen Nutzern Ergebnisse bereitstellen, die zufriedenstellen und angemessen performen. Bereits seit einigen Jahren ist die Website-Performance deshalb Rankingfaktor für Suchergebnisse. Jetzt legt Google aber nochmal eine Schippe drauf: Mit dem nächsten Update, das 2021 kommen soll, wird einer positiven User-Experience noch einmal ein deutlich größerer Stellenwert eingeräumt, sprich die Ladezeit deiner Seite wird noch wichtiger als ohnehin schon.

Hohe Ansprüche von Nutzern und Google bestehen aber nicht nur bei der Schnelligkeit einer Website. Auch Content und Design werden im Wettbewerb um die Aufmerksamkeit der Nutzer und im SEO immer wichtiger – und das auf jeder Art von Device; ob Desktop, Laptop, Tablet oder Smartphone.

Damit dein Content auf egal welchem Endgerät optimal ausgespielt wird, gibt es mittlerweile Responsive Webdesign, das für ein flexibles Layout deiner Website sorgt. Was auf der einen Seite eine optimale User-Experience auf allen Geräten gewährleistet, stellt Entwickler von Webinhalten allerdings vor ein Dilemma:

Eigentlich müsste man für eine große Auswahl unterschiedlicher Layouts optimierte Bilder bereitstellen, um die Übertragung unnötiger Datenmengen zu vermeiden. Das bedeutet nicht nur eine ganze Menge Arbeit, sondern auch hohe zusätzliche Kosten. Denn diese Bilder müssten alle vorberechnet und auf deinem Server gespeichert werden.

Website-Performance verbessern durch Bildoptimierung

Bildlastige Websites können deine Perfomance beeinträchtigen. Der Image Optimizer schafft Abhilfe. (Foto: Shutterstock / vectorfusionart)

Fastly: Eine moderne Edge-Cloud-Platform

Die gute Nachricht ist: Du musst dich nicht entscheiden zwischen Performance, (Responsive) Design und überarbeiteten Entwicklern. Denn es gibt technische Möglichkeiten, diese Herausforderungen zu lösen.

Umfangreiche Möglichkeiten, die Website-Performance zu optimieren, bietet eine Edge-Cloud-Platform, wie Fastly sie anbietet. Die Edge-Cloud besteht aus weltweit verteilten Servern, die an strategischen Punkten im Internet platziert sind und daher mit minimaler Latenz mit den Endgeräten der Nutzer kommunizieren können. Bekannt ist das Prinzip von Content-Delivery-Netzwerken (CDN), in denen statische Inhalte einer Website gecacht und dadurch schneller ausgeliefert werden können. Auch Fastly bietet diese Content-Delivery an, geht aber darüber hinaus. Indem Programmlogik auf der Edge-Cloud ausgeführt werden kann, verlagern immer mehr Entwickler Teile ihrer Architektur dorthin, wo sie am effizientesten arbeiten kann: nah am Nutzer. Es kann sich hierbei um Sicherheitsfunktionen handeln, um Load-Balancing, die Orchestrierung anderer CDN, aber auch um das Optimieren von Bildinhalten.

Bilder machen in den meisten Fällen einen großen Teil der Datenmenge aus. Der Image Optimizer (IO) ist daher eine Funktion der Edge-Cloud, von der viele Website-Betreiber profitieren können. Wird der IO genutzt, muss nur noch das ursprüngliche Bild in voller Auflösung auf dem eigenen Server gespeichert werden. Denn der IO cacht, also speichert Bilder zwischen und liefert sie dann, perfekt zugeschnitten, bearbeitet und pixelgenau an jeden einzelnen User aus – jeweils optimiert für das  Endgerät, auf dem die Website geöffnet wird.

Die Implementierung ist dabei super einfach, zeit- und arbeitssparend. Anstelle einer aufwendigen Vorberechnung reicht das Anhängen von Parametern an die URL des jeweiligen Bildes und der Image Optimizer passt Qualität, Größe und Format vollautomatisiert an – und sorgt so für entlastete Server und entspannte Entwickler. Wie das funktioniert, kannst du in dieser Online-Demo ganz einfach nachvollziehen, bei der dir die URL und die Dateigröße des ausgelieferten Bildes angezeigt werden.

Website-Performance verbessern durch Bildoptimierung

So einfach ist die Anwendung des IO. (Screenshot: t3n)

Onlineshops können die Datenmengen ihrer Bilder so zum Beispiel auf ein Minimum reduzieren, ohne dass die vom Nutzer wahrgenommene Qualität leidet. Der IO ist aber nicht nur für Shopbetreiber interessant und kann neben Größe, Qualität und Format auch andere Veränderungen am Bild vornehmen: The Guardian beispielsweise hat den IO dazu genutzt, über jedes Artikelbild, das älter als ein Jahr ist, einen Hinweis auf das Alter des Artikels zu legen – um Fake News und erneute Aufreger-Themen zu vermeiden.

Du willst wissen, wie eine Edge-Cloud-Platform und der Image Optimizer deine Website-Performance verbessern können? Dann wende dich an Fastly und lass dir von ihren Experten einen kostenlosen Report erstellen, in dem du erfährst, wie viel Bandbreite du durch den Einsatz des IO sparen könntest.

Beantrage deinen kostenlosen Report
Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 70 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Luca Caracciolo (Chefredakteur t3n) & das gesamte t3n-Team

Anleitung zur Deaktivierung