SEO – Optimierung Teil 2/5.

PERFORMANCEOPTIMIERUNG AUF DER CLIENTSEITE

In diesem Teil werden unterschiedlichste Ansätze und Techniken behandelt, welche dazu beitragen das Webprojekt clientseitig zu optimieren. Zu Beginne wird das Einsparpotential bei Inhalten, wie Texten und Bildern, betrachtet. Im Anschluss daran geht es um die Reduzierung von HTTP-Anfragen.

SEO OPTIMIERUNG DER INHALTE

Der Datenverkehr wächst von Jahr zu Jahr rasant. Einer Studie, der International Data Corporation (IDC) zufolge, verdoppelt sich der Datenverkehr des Internets alle zwei Jahre. Dies stellt nicht nur die Provider vor eine riesige Herausforderung, sondern auch die Betreiber von Webseiten und die Initiatoren von Webprojekten.

Ein Ansatz zur Performancesteigerung ist daher die Optimierung der Daten und Inhalte, die übertragen werden. Auf die Komprimierung der Inhalte wird im folgenden Abschnitt eingegangen, dieser Abschnitt widmet sich der gezielten Optimierung von Inhalten die auf Seiten dargestellt werden.

STRUKTUR DER INHALTE

Im ersten Schritt sollte eine optimierte Verzeichnisstruktur und Datenhaltung angestrebt werden, welche es erlaubt die Dateien strukturiert abzulegen. Dies verschafft dem Entwickler eine bessere Übersicht und ermöglicht den nachfolgenden Prozessen eine schnellere Abarbeitung. Im nächsten Schritt sollte geprüft werden, welche Daten von Bedeutung sind. Dies gilt sowohl für Inhalte, wie Bilder und Videos, als auch für CSS- und JavaScript-Dateien. Ein weiterer wichtiger Schritt, ist das Einbinden der Daten in der richtigen Reihenfolge. CSS-Dateien sollten ausschließlich im Head der Webseite eingebunden werden, damit sie direkt beim Rendern der Webseite zur Verfügung stehen.

Anders verhält es sich mit JavaScript-Dateien. Auf vielen Webseiten sieht man, dass komplette Sammlungen direkt im Head-Bereich eingetragen werden. Dies ist aber nicht ganz korrekt, denn JavaScript sollte am Ende der Datei eingebunden werden, bevor der Body geschlossen wird. Durch dieses Vorgehen wird der Rendering-Prozess beschleunigt.

GRAFIKEN UND BILDER

Eines der wichtigsten Merkmale einer Webseite sind Bilder und Grafiken. Diese dienen dazu gezielt Aufmerksamkeit zu erregen und ein freundliches Gesamtbild zu erschaffen. Sie sind auf heutigen Webseiten kaum noch wegzudenken. Bei Bildern bietet es sich grundsätzlich an, das richtige Format zu wählen und schon im Voraus die Größe festzulegen. Sollte die Größe des Bildes und die angegebenen Abmessungen unterschiedlich sein, so muss das Bild skaliert werden, was wiederum Ladezeit in Anspruch nimmt. Wird gar keine Größe angegeben, kann der Browser nicht den richtigen Anzeigeplatz reservieren und es kommt beim Laden der Seite kurzzeitig zu Fehlern in der Darstellung. Hat ein Bild keine Transparenzen und viele Farben, bietet sich das JPG-Format an. In allen anderen Fällen kann auf das PNG-Format zurückgegriffen werden.

Ebenfalls enthalten Bilder meist zusätzliche Metainformationen, beispielsweise Kommentare oder Anwendungsinformationen, oder zu große Farbpaletten, welche für den Gebrauch im Internet nicht relevant sind. Diese Informationen können gelöscht werden.

REDUZIERUNG VON HTTP-ANFRAGEN

Moderne Webseiten setzten sich aus einer Vielzahl von Elementen zusammen. Neben verschiedenen CSS- und JavaScript-Dateien kommen auch Glyphicons, Spritesheets und Multimediadateien zum Einsatz. Diese ermöglichen es die Seite für die Benutzer interessant zu machen und ihnen etliche Interaktionsmöglichkeiten zu bieten. Wird die Webseite geladen, verursacht jedes der Elemente eine HTTP-Anfrage. Das bedeutet, dass eine neue Verbindung zwischen Client und Server aufgebaut wird. Man könnte nun vermuten, dass man aufgrund immer schneller werdenden Verbindungen, wie z.B. VDSL und LTE, die Anzahl der HTTP-Anfragen vernachlässigen könnte. Eine schnellere Verbindung erlaubt es zwar einzelne Dateien schneller herunterzuladen, jedoch können die heutigen Browser nur eine begrenzte Anzahl an parallelen Verbindungen öffnen. Hinzu kommt, dass viele Gebiete, sowohl innerhalb von Deutschland als auch weltweit, noch weit davon entfernt sind schnelles mobiles Internet zu erhalten. Riesige Webseiten mit langen Ladezeiten würden somit potentielle Benutzer abschrecken. Mehrere parallele Verbindungen belasten ebenfalls den Client, als auch den Server und durch die Übertragung mehrere HTTP-Header auch das Netzwerk. Wichtig ist, dass mehrere gleichzeitige Verbindungen nicht das Grundproblem einer langsam ladenden Webseite lösen, sondern dadurch nur eine unvorteilhafte Programmierung verdeckt wird.
Die Reduzierung der HTTP-Anfragen ist somit eines der wichtigsten Merkmale zur Reduzierung des Datenverkehrs und somit auch zur Steigerung der Performance. Die Reduzierung lässt sich durch das Komprimieren und das Minimieren von Daten realisieren. Darunter fallen das Kombinieren verschiedener Dateien, das Zusammenfassen von Bildern, sowie die Verwendung von CSS-Sprites oder Glyphicons.