Optimierte Performance

Die Geschwindigkeit einer Webseite ist ein maßgeblicher Faktor für ihre Reichweite. Suchmaschinen beachten Ladezeiten für die Einordnung der Seite in die Suchergebnisse. Außerdem sind Seitenbesucher:innen mit langsamen Webseiten nicht besonders nachsichtig, sondern verlassen diese häufig bereits nach wenigen Sekunden wieder.

Aus diesen Gründen wird bei der Entwicklung und Verbesserung der Website-Base ein großes Augenmerk auf die Geschwindigkeitsoptimierung gelegt. 

Wir verwenden standardmäßig HTTP/2 mit Server Side Push in unserer Website-Base. HTTP/2 ist als Nachfolger von HTTP/1.1 eine verbesserte Version des HTTP-Protokolls.

Ein Protokoll regelt die Kommunikation zwischen einem Browser (Client), der Informationen anfordert, und dem Server, der geforderte Daten enthält. Der Client schickt Anfragen an den Server. Der Server antwortet und stellt die gewünschten Informationen bereit. Während HTTP/1.1 pro TCP-Verbindung nur eine Anfrage verarbeiten kann und jede weitere Anfrage jeweils eine TCP-Verbindung benötigt, ist HTTP/2 in der Lage mehrere Anfragen über eine Verbindung zu bündeln und mehrere Antworten gleichzeitig weiterzugeben. HTTP/2 wirkt also TCP-Überlastungen entgegen.

Die serverseitige Push-Funktion ist ein weiteres entscheidendes Merkmal von HTTP/2. Der Server schickt dabei Informationen an den Client, die dieser noch nicht angefragt hat. Durch die vorhergehenden Anfragen weiß der Server aber, dass weitere Informationen benötigt werden und 'pusht' diese. CSS-Stylesheets sind beispielsweise solche Informationen – sie sind für die Darstellung der Seite notwendig. Die gepushten Daten werden im Cache des Browsers gespeichert und können jederzeit verwendet werden, wodurch die Netzwerklatenz (Verzögerung bei der Übertragung der Daten) verringert wird.

Insgesamt ergeben sich durch HTTP/2 kürzere Wartezeiten für Endnutzer:innen. Netzwerkressourcen werden besser gehandhabt. Zudem optimiert es die Kommunikation zwischen Client und Server.

Üblicherweise werden beim Laden einer Webseite alle Bilder vollständig mitgeladen. Daraus resultiert eine merklich höhere Ladezeit. Für Websites mit zahlreichen hochauflösenden Bildern und/oder mit vielen Videos wirkt sich dieser Mechanismus besonders nachteilig aus. Beim Lazy Loading werden Bilder erst dann geladen, wenn sie tatsächlich gebraucht werden und in den für den User sichtbaren Bereich gelangen. Beim Aufruf der Seite sichtbare Elemente werden also gleich geladen. Diese Optimierungstechnik verzögert also das Laden (noch) nicht benötigter Images. Dadurch reduziert sich die initiale Ladezeit einer Seite. Aber auch das gesamte benötigte Datenvolumen verringert sich, da manche Bilder nie geladen werden müssen.

Die Website-Base ist so konfiguriert, dass Seiten bei ihrem ersten Aufruf entsprechend ihrer Backend-Konfiguration gerendert und als statische HTML-Datei auf dem Server abgelegt werden. Solange diese Seite im Backend unverändert bleibt, wird ab diesem Zeitpunkt jedem weiteren Besuchenden nur die bereits vorbereitete HTML-Datei gesendet. Diese Form das Cachings kann die Geschwindigkeit einer Webseite um ein Vielfaches beschleunigen. Das gilt insbesondere für Seiten, die viele Medienelemente wie Bilder und Videos enthalten, weil diese nicht bei jedem Aufruf neu formatiert werden müssen.

Um diese Funktion noch besser nutzen zu können, werden Bilder durch die Website-Base responsiv eingebunden.

Nach dem Hinzufügen eines Bildes kann dieses im Backend für verschiedene Bildschirme formatiert werden. Beim Seitenaufruf reagiert dann die Webseite auf das verwendete Endgerät und gibt die entsprechende Formatierung aus. Dabei werden Bilder, welche beispielsweise mit 4000 x 3000 Pixeln Größe im Backend gespeichert wurden und auf einem Handybildschirm mit 300px Breite aufgerufen werden, serverseitig vorbereitet, sodass Nutzer:innen beim Aufruf der Seite nicht die volle Dateigröße laden muss, sondern eine automatisch erstellte, deutlich kleinere Datei zugesendet bekommt.

Auch die so vorbereiteten Seiten werden im statischen Cache gesichert, sodass der Komprimierungsprozess nicht bei jedem Seitenaufruf durchgeführt werden muss. Damit wird die Ladezeit der Webseite insgesamt deutlich reduziert.

Es ist auch möglich, große Bilder in verkleinertem Format einzubinden und mit einem Klick auf das Bild vergrößern zu lassen. Beim Seitenaufruf wird dann nur das kleine Bild vom Server geladen, die vollständige Datei erst, wenn diese in der Großansicht benötigt wird.

Bestimmte Seitenbereiche werden besonders häufig über Mobilgeräte aufgerufen. Diese Bereiche können durch die Website-Base als sogenannte Accelerated Mobile Pages (AMP), einer minimalistischen, für mobile Darstellungen optimierte Version der Seiten, bereitgestellt werden.