alles-mit-links

Denkt man an die Zeit zurück, als Computer noch als Brotkisten (Commodore 64, ATARI 800XL) bezeichnet wurden, erinnert man sich auch daran, wie man beim Programmieren jedes unnötige Byte zu vermeiden suchte. Das ist heute nicht mehr der Fall, da moderne Rechner eine Leistungsfähigkeit haben, die die kühnsten Träume der Brotkistenbesitzer um ein Vielfaches übertreffen.

Trotzdem lohnt es sich auch heute, sich über die Verwendung unnötiger Bytes Gedanken zu machen. Auch wenn das Internet immer schneller wird, so ist es doch so, dass der Transport der Daten einer Webseite in Datenpaketen von 1500 Bytes (TCP/IP) abgewickelt wird. Schaut man sich eine Webseite unter diesem Gesichtspunkt einmal genauer an, ergibt sich noch einiges an Optimierungs-Potential um den Datentransfer einzugrenzen und den Webserver zu entlasten.

Das Transmission Control Protocol

Es braucht hier nicht das ganze Transmission Control Protocol (TCP) abgehandelt zu werden, darüber informiert Wikipedia sehr umfangreich.

Hier interessiert uns nur der Teilbereich der TCP-/IP-Paket-Größe, und wie man sie für die Optimierung des Datentransfers nutzen kann.

Der Aufbau der Datenpakete

Damit die Datenpakete ordnungsgemäß übertragen werden können verfügen sie über einen Header, der Absender und Empfänger, sowie Informationen über die Daten ansich, enthält. Dies sind bei einer Internetverbindung via DSL:

• TCP Header = 20 Byte
• IP Header = 20 Byte
• PPP Rahmen = 8 Byte

Diese 48 Header-Bytes müssen von der Datenpaket-Grösse von 1500 Bytes abgezogen werden, so dass für die Nutzdaten noch 1452 Bytes für die Übertragung zur Verfügung stehen.

Die Kommunikation zwischen Browser und Webserver

Fordert der Browser eine Webseite bei einem Webserver an, so segmentiert dieser die zu übermittelnden Daten (die Webseite, Bilder, CSS und JavaScript) in TCP-Segmente mit jeweils 1452 Bytes Nutzdaten. Diese werden der Reihe nach an den Browser übertragen, und dieser bestätigt den Empfang der Datenpakete.

Im optimalen Fall kommen alle Datenpakete schön der Reihe nach an, und der Browser muss nur den Empfang des letzten Paketes bestätigen. Es ist aber auch möglich, dass ein Teil der Pakete eine andere Route durch das Internet nehmen, und z.B von Frankfurt über Stuttgart nach München gelangen, andere dagegen einen Weg über Würzburg nehmen. In diesem Fall müssen die Pakete einzeln bestätigt werden, was naturgemäß mit einem höheren Datentransfer einhergeht.

Wie kann man mit Bit’s und Bytes den Datentransfer eingrenzen?

Es gibt mehrere Möglichkeiten, den Datentransfer zu verringern.

Leerzeich, Zeilenumbrüche und Quelltext-Kommentare entfernen

Es ist erstaunlich, wieviele Beytes mit Leerzeichen, Zeilenumbrüchen, Tabs und Kommentaren im Quelltext einer Seite zusammenkommen.

Um einmal reale Daten zu bekommen, habe ich den Inhalt der Startseite eines beliebten Blogs entfernt, und nur die Leerzeichen, Tabs, Zeilenumbrüche und Quelltext-Kommentare übrig gelassen, und als Text-Datei gespeichert. Es kamen 5,51 KB (5.649 Bytes) zusammen, die weder für den User, noch für die Darstellung im Browser notwendig waren. In Datenpakete umgerechnet sind das 3,8 Datenpakete mehr, die übertragen werden müssen.

Cascading Style Sheets (CSS)

Gleiches gilt für die CSS-Datei(en). Auch hier lohnt es sich, alle überflüssigen Informationen zu elemenieren.

Das alle Style-Angaben auch wirklich in der CSS-Datei stehen, und nicht doch noch viele Formatierungen im HTML-Quelltext vorgenommen werden, gilt heute als Standard. Trotzdem sieht man es immer wieder, wie auch bei dem untersuchten Blog, dass es doch nicht ordentlich gemacht ist. Auch sollten mehrere CSS-Dateien zu einer zusammengeführt werden.

Java-Script

Auch bei Java-Script lohnt es sich, diese zusammenzuführen, und zu bereinigen. Häufig sieht man viele kleine Java-Scripte, die duraus zusammengefasst werden können. Ausnahmen sind natürlich solche Scripte, welche von einem Fremdanbieter, wie Google AdSense, eingebunden sind.

Icons, Buttons, Smilies und Banner

Eine weitere Möglichkeit bietet sich, wenn man mehrere kleinere Grafiken wie Buttons oder Smilies in eine Bilddatei speichert, und diese als CSS-Sprites einbindet.

Wieviel Datentransfer kann gespart werden?

Nehmen wir den oben genannten Blog, und unterstellen ihm täglich 3.000 Besucher mit durchschnittlich 3 Seitenaufrufen, und rechnen nocheinmal 4000 Seitenaufrufe durch Crawler (Google, Yahoo, etc) dazu, kommen wir alleine mit den 4 (3,8) überflüssigen Datenpaketen auf 52.000 Datanpakete extra pro Tag. Das mach im Durchschnitt 2.166 Pro Stunde, 36 pro Minute und 0,6 pro Sekunde.

Würde man den Beispiel-Blog soweit optimieren, dass 15 Datenpakete eingespart werden könnten, würde man pro Tag schon 195.000 Datenpakete einsparen.

Fazit

Sicherlich muss man heute nicht mehr auf jedes Byte achten, wie zur Zeit der Brotkisten. Doch lohnt es sich immer noch, unnötige Bytes zu vermeiden. Ein einziges Byte zuviel, kann ein extra Datenpaket verursachen, welches vom Webserver abgearbeitet werden muss.

Auch Google honoriert schnelle ballastfreie Seiten seit der Einführung von Page-Speed. Bei einem anderen Projekt brachte die Optimierung der o.g. Punkte und die zusätzliche gZip-Komprimierung eine Verdoppelung der Crawler-Zugriffe. Doch dazu gibt es dann einen eigenen Beitrag.

Weitere interessante Beiträge

• Das WordPress PlugIn StatPress
• Ein neuer Server für alles-mit-links
• Mal wieder etwas optimiert am WordPress Blog
• WordPress Coaching: OnPage Optimierung
• Neues von Lieblingsdeutscher