Ein Http-Request ist, vereinfacht ausgedrückt, die Anfrage eines Browser an einen Webserver. So wird für jede Webseite erst ein Http-Request für die eigentliche Seite erzeugt, danach für jede einzelne Komponente, die zur Darstellung der betreffenden Seite benötigt wird, also z.B. Grafiken, externe CSS- und Javascript-Dateien. Jeder Http-Request benötigt Zeit, im Schnitt vergehen 50-200 Millisekunden von der Anfrage des Browsers bis zur Antwort des Webservers.

Da praktisch alle Browser parallele Anfragen mehr oder weniger begrenzen, entsteht hier schnell ein Flaschenhals, der für unnötige Verzögerung beim Laden einer Webseite verantwortlich ist. Besonders gravierend wirkt sich das bei vielen kleinen Dateien aus. Bei den heute üblichen Bandbreiten liegt die eigentliche Übertragungszeit für eine kleine Datei (bis einige Kilobyte) meist um ein Vielfaches unter der Zeit, den der Http-Request für diese Datei benötigt. Darum empfiehlt es sich, die Menge der externen Elemente auf ein sinnvolles Minimum zu beschränken.
(mehr …)

Dieser Artikel beschreibt einige sehr sinnvolle Optimierungsmöglichkeiten, welche durch serverseitige Einstellungen vorgenommen werden können, wenn die nötigen Voraussetzungen erfüllt sind. Viele HTML-, CSS-, Javascript oder auch Text-Dateien können durch GZip-Auslieferung deutlich im Speicherplatz verkleinert und damit schneller zum Browser übertragen werden.  Auch ein ordentliches Cachemanagement kann, zumindest bei Wiederholungsbesuchen oder beim Aufruf von Unterseiten, zu einer drastische Verringerung der Webseitenladezeit führen. Zwar können Browser dies auch selbständig steueren, fragen aber den Server bei jeder Datei erneut an, ob sich diese inzwischen geändert hat. Diese Anfragen benötigen ebenfalls Zeit und können im Regelfall mittels Expires-Header eingespart werden.

(mehr …)

Im Regelfall bestehen Webseiten aus HTML-Quellcode und CSS (Cascading StyleSheets), oft wird auch Java-Script eingesetzt. Aus Performancegründen empfiehlt es sich CSS und Java-Script in externe Dateien auszulagern, da diese im Browsercache abgelegt werden können und dann jeweils nur einmal für eine Website geladen werden müssen, egal wie viel Unterseiten aufgerufen werden. Dies hat darüber hinaus noch den Vorteil, Änderungen müssen nur in den externen Dateien durchgeführt werden und nicht auf jeder betroffenen Webseite. Da für jede nachzuladende Datei ein http-Request durchgeführt werden muss, empfiehlt es sich, nicht zu viele kleine CSS- oder Java-Script-Dateien einzubinden, denn jeder Request kostet wiederum Zeit, meist mehr als das eigentliche Laden der betreffenden Dateien. Auf das Thema http-Request wird in einem späteren Beitrag noch einmal genau eingegangen.

(mehr …)

Im Internet Explorer 8 werden ganz normale Input-Button derzeit nicht korrekt dargestellt. Wer mit dem IE8 unterwegs ist, wird sich vielleicht schon mal gewundert haben, warum bei einigen Webseiten Formulareingaben abgefragt werden, aber kein Absendebutton zur Verfügung gestellt wird. Das Problem ist ganz banal, der IE8 hat einen Bug. Button, für die kein Hintergrund definiert wurde, werden stark verkleinert angezeigt. Die Lokale Lösung für den Anwender ist in den erweiterten Internetoptionen des IE8 die Option „Visuelle Stile auf Schaltflächen und Steuerungselementen in Webseiten aktivieren“ zu deaktivieren. Webseitenbetreiber haben eine weitere Möglichkeit.
(mehr …)

Die Idee, abgerundete Ecken mit Hilfe von grafischen Elementen zu gestalten, ist so alt wie das Webdesign selbst. Auch heute noch greifen viele Webdesigner zu ihrem Grafikprogramm und zeichnen sich entsprechende Ecken selber. Dabei gibt es für Rahmen von div-Containern auch eine reine CSS-Lösung, die völlig ohne Bilder und Grafiken zurecht kommt.

Hintergrund dieser Technik ist eine optische Täuschung. So werden mehrere direkt nebeneinander liegende Rahmen über margin gekürzt und damit der visuelle Effekt abgerundeter Ecken erreicht. Mittels farblicher Abstimmung kann man auch räumliche Effekte wie z.B. höher oder tiefer gestellte Flächen gestalten.
(mehr …)

Einen div-Container auf einer Seite in der Mitte vertikal zu positionieren ist mit text-align: center; problemlos zu realisieren. Anders sieht es aus, wenn man ein div horizontal in der Mitte positionieren möchte. Eine etwas umständlich anmutende Methode mit zwei in einander verschachtelten div bringt gute Ergebnisse z.B. kann man dann ganz normal scrollen, wenn der Inhalt größer ist als der div-Container.
(mehr …)

Um einen div-Container mit beliebigen Inhalt mittig auf dem Bildschirm zu zentrieren (horizontal und vertikal), gibt es verschiedene Möglichkeiten. Eine davon ist Zentrierung durch negative margins. Hierzu ist es allerdings erforderlich, die Größe unseres Containers zu kennen und explizit fest zu legen.
(mehr …)

Überall im Internet ließt man von CSS und CSS Layouts. Ware Wunderkräfte werden Webseiten zugeschrieben, die anstelle der bewährten Tabellen zur Positionierung von Designelementen CSS einsetzen. Webseiten sollen schneller geladen werden, einfacher zu gestalten sein und Suchmaschinen sollen sie besser ranken. Doch was ist wirklich dran?

CSS hat eindeutig Vorteile. Der benötigte HTML-Code einer Webseite mit CSS Layout kann unter Umständen nur einen Bruchteil von einer Seite mit Tabellenlayout betragen. Der Vorteil wirkt sich allerdings erst so richtig aus, wenn die CSS Befehle in eine externe Datei ausgelagert werden. Dadurch wird diese im Browsercache abgelegt und muss nicht bei jeder Unterseite mit eingelesen werden.

(mehr …)

Textlinks sind schnell geladen und voll suchmaschinentauglich. Für Navigationsmenüs wünschen sich die meisten Webmaster zwar diese Vorteile, möchten aber auf ein schickes Aussehen nicht verzichten. Leider sehen Textlinks im Originalzustand recht spartanisch aus. Mit CSS lassen sie sich aber richtig aufpeppen.
(mehr …)