Das Leben ist zu kurz für lahme Webseiten

#entwicklung #sicherheit
Veröffentlicht am 20. März 2023

Lädt deine Webseite länger als 3 Sekunden, verpasst du potenzielle Kunden. In diesem Beitrag erfährst du, was das Geschäftsmodell eines bekannten schwedischen Möbelhauses und deine Webseite gemein haben und wie sich dein Webauftritt auf Höchstgeschwindigkeit optimieren lässt.

OHO Design, Das Leben ist zu kurz für lahme Webseiten

Die Reise der Bytes

Zuerst schauen wir uns mal an, was beim Aufruf einer Webseite im Hintergrund alles passiert. Du kannst dir eine Webseite im Grunde wie ein IKEA-Möbelstück vorstellen, das in einem Karton voller Einzelteile in einem Lager auf seinen Käufer wartet.

Bereit? Dann lass uns shoppen gehen!

  1. Wir machen uns mit dem Auto auf den Weg zum nächstgelegenen Möbelhaus — in Gedanken an saftige Fleischbällchen und Preiselbeeren…
    Auf ähnliche Weise verhält sich dein Browser, wenn du eine Domain (z.B. ohodesign.ch) aufrufst. Er sucht die schnellste Route durch das Internet zum nächstgelegenen Rechenzentrum, wo die Daten der Webseite aufbewahrt werden.
  2. Ist die Adresse gefunden, bestellt der Browser dort alle dazugehörenden Einzelteile. Diese werden im Rechenzentrum auf mehrere Datenpakete unterteilt und schnellstmöglich geliefert. Anders als bei einem Möbelstück, enthält der Bausatz einer Webseite alle Bilder, Texte, Schriftarten und natürlich einen Bauplan, der das Design und die Struktur der Webseite beschreibt.
  3. Die Seite wird schliesslich innert kürzester Zeit zusammengezimmert und kann von dir bestaunt werden. Wie bei einem Möbelbausatz mit 40 Bauschritten, dauert es etwas länger bis eine Webseite beim ersten Mal vollständig vor dir steht. Wenn du nun aber soweit bist und auf der Webseite eine Unterseite aufrufst, ist dein Browser bereits mit den Einzelteilen vertraut und kann die gewünschte Seite wesentlich schneller zusammensetzen. Von Seite zu Seite ändert sich zwar der Bauplan, allerdings können viele Einzelteile wiederverwendet werden.
OHO Design, Das Leben ist zu kurz für lahme Webseiten

«Geduld ist eine Tugend»…

… das gilt offenbar nicht beim Surfen im Internet. Messungen zeigen, dass ungefähr 50% der Besucher eine Webseite gleich wieder verlassen, sofern diese beim ersten Aufruf länger als 6 Sekunden zum Laden benötigt. 3 Sekunden wird heutzutage als kritische Obergrenze angesehen. Dauert es länger, sinkt die durchschnittliche Verweildauer auf der Website und potenzielle Kunden gehen verloren.

Google und Bing, die in Europa meistgenutzten Suchmaschinen, lassen die Ladezeit bei der Bewertung für das Suchranking einfliessen. Dabei werden verschiedene Kriterien beurteilt, z.B. die Zeit, die verstreicht, bis der Browser alle benötigten Einzelteile empfangen hat oder die Zeit, welche er braucht, um die Webseite zusammenzubauen. Das bedeutet, dass die Pakete möglichst klein sein müssen und der Bauplan so simpel wie möglich sein sollte.

Eine aufwändige Studie im Auftrag von Google hat gezeigt, dass sich die Verkaufszahlen von Online-Shops um bis zu 10% steigern lassen, wenn die durchschnittliche Ladezeit der Seiten um 100 Millisekunden verkürzt wird. Das entspricht in etwa der Zeit, die du brauchst, um 1x zu blinzeln!

Es liegt also auf der Hand, dass ein schneller Webauftritt unerlässlich ist. Die Geduld wird beim Surfen durch lästige Werbung vor YouTube-Videos schliesslich schon genug strapaziert… 😉

OHO Design, Das Leben ist zu kurz für lahme Webseiten

So bringen wir deinen Webauftritt auf die Überholspur

Wir setzen verschiedene Methoden ein, um die Ladezeit unserer Webprojekte zu optimieren. Diese reichen von einem schnellen Rechenzentrum bis hin zum Feinschliff der Webseiten-Bausätze.

Infrastruktur

  • Unsere Webseiten sind bei unserem Hosting-Provider «cyon» in Basel zuhause. #SupportYourLocals ❤️
    Die geografisch zentrale Lage des Datenstandorts Schweiz ermöglicht den Datenpaketen kürzere Wege und somit schnellere Ladezeiten für Besucher:innen aus Europa. Ausserdem basiert das Rechenzentrum zu 100% auf der blitzschnellen SSD-Speichertechnologie, damit die Daten ohne Verzögerung übertragen werden können.
  • Die meisten Einzelteile lagern wir im selben Rechenzentrum, damit dein Browser die Ressourcen nicht über verschiedene Routen im Internet zusammensuchen muss.

Optimierung der Einzelteile

  • Bilder und Videos sind die grösste Belastung für die Datenleitung. Wir kümmern uns um ein optimales Gleichgewicht zwischen Komprimierung und Qualität.
  • Unser Programmiercode wird in minifizierter Form ausgeliefert. Das heisst, wir packen die Einzelteile so eng wie nur möglich in die Kartonschachteln, um diese kleiner und leichter zu machen. Die Datenpakete können letztlich schneller transportiert werden, weil mehr Pakete gleichzeitig in den Laderaum passen.

Caching

Stell dir vor, unser schwedischer Einrichtungskonzern würde jedes Möbelstück erst auf Bestellung einzeln anfertigen. Genauso aufwendig und ineffizient ist der Ladevorgang bei einer Vielzahl von Webseiten. Verbreitete Content-Management-Systeme (CMS) wie WordPress, Joomla, Drupal oder Typo3 basieren allesamt auf diesem Ansatz. Sie setzen die Paket-Inhalte immer wieder aufs Neue zusammen — im Fachjargon als serverseitiges Rendering bezeichnet.

  • Abhilfe schafft serverseitiges Caching. Diese Technologie stellt sicher, dass die Einzelteile vorab in Kartonschachteln verpackt in einem Lagerhaus bereitgestellt werden. Das zeitintensive Zusammenstellen der Ressourcen (Rendering) geschieht somit nicht erst beim Aufruf der Webseite. Das spart nicht nur Zeit, sondern auch Energie.
  • Wenn die Besucherzahlen durch die Decke schiessen und nicht mehr von dem einen Rechenzentrum in Basel bewältigt werden können, verteilen wir die vorbereiteten Kartonschachteln auf mehrere Lagerhäuser. Bei internationaler Kundschaft nutzen wir Rechenzentren rund um den Globus. Dadurch profitieren die Besucher wiederum von niedriger Latenz dank der geografischen Nähe.

Lazy-Loading

Bis vor Kurzem wurde bei vielen schwedischen Möbelstücken Werkzeug für den Aufbau mitgeliefert, das danach entweder irgendwo im Keller oder im Alteisen landete. Dieser verschwenderische Umgang mit Ressourcen beobachten wir leider häufig auch im Web: Oft wird die komplette Webseite mitsamt zusätzlichen Ersatzteilen und Werkzeugen übertragen, auch wenn gar nicht alle nötig wären.

Abhilfe schafft sogenanntes Lazy-Loading. Es handelt sich dabei um eine Technik, bei der nur jene Inhalte einer Webseite geladen werden, die gerade auf dem Bildschirm sichtbar sind. Alles andere wird nachgeladen, wenn es tatsächlich benötigt wird. Bspw. müssen Inhalte, die sich weiter unten auf einer Seite befinden, erst geladen werden, wenn der Nutzer zu ihnen hin scrollt. So können unnötige Ressourcen gespart und die initiale Ladegeschwindigkeit einer Webseite erheblich verbessert werden.

OHO Design, Das Leben ist zu kurz für lahme Webseiten

Lass uns reden

Jeder Webauftritt und jede Anwendung hat ihre eigenen Anforderungen und benötigt massgeschneiderte Ansätze zum Verbessern der Geschwindigkeit. Wir beraten dich gerne beim Optimieren deiner bestehenden Webseite und unterstützen dich oder dein Unternehmen beim Aufbau von einem modernen und performanten Webauftritt.


Übrigens: das Titelbild dieses Beitrags wurde mittels künstlicher Intelligenz erzeugt. Wenn dich dieses Thema auch so fasziniert, dann schau dir unseren Blog-Artikel «Digitales Doping durch Künstliche Intelligenz» an.

Aj! Du verwendest Internet Explorer, ein Relikt aus vergangener Zeit. Dadurch kann es zu Darstellungsfehlern kommen. Bitte installiere doch einen anderen Browser.

Wie geht das?Ausblenden