Unsere Updates halten Sie auf dem Laufenden!

Zur Übersicht
August 2015

Frontend-Optimierung
So verbessern Sie die Performance Ihrer Webseite

Webseiten sind das Aushängeschild eines jeden Unternehmens. Sie sollen ihren Besuchern einen guten und bleibenden Eindruck hinterlassen und am besten den neuesten Ansprüchen entsprechen, sowohl optisch als auch technisch gesehen. Jedoch werden einige der Webseiten-Besucher durch lange Ladezeiten, ruckelnde Videos oder andere nicht optimal laufende Medien abgeschreckt. Dabei können Webseiten schon mit geringem Aufwand optimiert werden. Wir sagen Ihnen nun wie das Ganze funktioniert und worauf geachtet werden sollte.

Sogenannte Requests (Anfragen) sind nahezu fast immer für die Ladezeit einer Webseite ausschlaggebend. Deshalb ist es ratsam Anfragen, welche an einen Server geschickt werden, auf ein Minimum zu reduzieren. Eine Anfrage besteht aus Informationen, welche der Browser (des Users) der aufgerufenen Webseite aus dem Internet herunterladen muss. Dazu gehören unter anderem Bilder, Stylesheets, Skripte und natürlich auch HTML-Codes.

Damit eine Anfrage zustande kommen kann, kommunizieren Web-Browser und Server miteinander. Der Browser bezieht seine Informationen (Bilder, Stylesheets etc.) von einem Server, auf welchem die Webseite gehostet wird. Da ein Webserver nur eine begrenzte Zahl von Anfragen gleichzeitig verarbeiten kann, erzeugt dieser bei einem hohen Aufkommen eine Warteschlange, welche nach und nach abgearbeitet wird. Der Web-Browser erhält so seine angefragten Informationen verzögert. Nach einer zu langen Wartezeit werden bestimmte Anfragen sogar abgebrochen. Damit es nicht soweit kommt, sollten Informationen/Daten minimiert werden.

Kurze Erklärung anhand eines Beispiels aus dem realen Leben:

Anstatt nach dem Frühstück jeden Teller, jede Tasse, die Marmelade und Butter einzeln in die Küche zu bringen, nehmen Sie sich ein Tablett um Zeit zu sparen.

Genau das sollte auch mit Anfragen einer Webseite gemacht werden. Anstatt viele einzelne Text-Dateien (Stylesheets, Skripte etc.) anzufragen, packt man diese jeweils in eine große Datei. Im Idealfall fragt eine Webseite nur eine Stylesheet- und eine Skript-Datei an.

Eine andere Möglichkeit um unnötige Requests zu verringern ist die sogenannte „Sprite-Technik“. Ein Sprite ist ein einzelnes großes Bild welches die am häufigsten verwendeten Bilder einer Webseite beinhaltet. Dieses wird im Hintergrund per CSS aufgerufen und zeigt nur einen bestimmten Ausschnitt eines Bildes an. Dadurch wird die Ladezeit um ein Vielfaches verringert und ist somit eine wirkungsvolle Maßnahme um die Performance einer Webseite zu verbessern.

Beispiel einer Sprite-Datei:
Quelle: http://getspritexy.com/images/sample-sprite-getspritexy.png

Bei der Erstellung einer solchen Sprite-Datei sollte darauf geachtet werden, dass nicht zu viele Bilder in eine Bild-Datei gepackt werden. Denn dies könnte beim Herunterladen aus dem Internet zu Wartezeiten führen. Bilder sollten generell auch nur so groß sein, wie sie auf der Webseite dargestellt werden sollen. Demnach macht es keinen Sinn ein kleines Logo als 2000x2000 Pixel großes Bild einzubinden.

Um die Netzwerkauslastung so gering wie nur möglich zu halten, empfiehlt es sich sämtliche HTML-, CSS-, JavaScript-Dateien, sowie Bilder und Grafiken so klein wie nur möglich zu komprimieren. Zusätzlich sollte dem sogenannten Above the Fold besondere Aufmerksamkeit gewidmet werden. Die Bezeichnung „Above the Fold“ bedeutet übersetzt so viel wie „oberhalb der Falz“ und kommt ursprünglich aus dem Grafikdesign. Dieser Bereich bezieht sich auf die Platzierung von wichtigen Neuigkeiten, welche sich auf der oberen Hälfte einer Zeitung befinden. Genauso verhält es sich auch auf Webseiten, Apps und Webapplikationen. Webseitenbesucher sehen den Above the Fold direkt nach dem Laden, ohne vorher auf der Webseite gescrollt zu haben.

Beispiel für Above the Fold:
Quelle: https://jar.media

Aus technischer Sicht besteht die Optimierung darin, Style-Anweisungen (CSS) für diesen Bereich in einer gesonderten Datei auszulagern. Die Trennung der Styles in kritische- und nicht kritische Teile sorgt für eine schnellere Darstellung der Inhalte auf Webseiten.

Ein Vorteil dieser Technik ist, dass das Stylsheet für den Above the Fold Bereich schneller geladen werden kann, da diese Datei besonders klein ist. Das Surfverhalten von Webseitenbesuchern wird somit nicht eingeschränkt und ein Absprung des Besuchers kann somit verhindert werden.

Gleiches gilt im Übrigen auch für das HTML. Beim Aufrufen einer Webseite sendet der Client (Browser) einen Request an den Server und fordert das Markup (index.html) an. Bei großen HTML-Dateien kann es passieren, dass mehrere Requests nötig sind um das komplette Dokument zu übertragen. Auch hier greift der Above the Fold Bereich ein. Genau wie bei CSS kann HTML in kritische- und nicht kritische Bereiche unterteilt werden. So kann HTML beispielsweise später per AJAX nachgeladen werden.

Der Browser kümmert sich jedoch zuerst um den kritischen Bereich im oberen Teil auf der Startseite und um die Durchführung notwendiger Requests. Durch die erhaltenen Informationen kann dem Webseiten-Besucher die Seite angezeigt werden.

Fazit: Es gibt Diverse Wege und Möglichkeiten das Frontend zu optimieren. Angefangen bei Minimierungsarbeiten von Requests, über die Sprite-Technik, bis hin zur Einteilung von CSS- und HTML-Codes in kritische- und nicht kritische Bereiche.

Wir als technischer Dienstleister helfen Ihnen natürlich sehr gerne beim Optimieren Ihres Frontends und stehen Ihnen gerne beratend zur Seite.
Nächster Beitrag