Artikel mit ‘css’ getagged



Webseitenoptimierung – HTTP-Request

Freitag, 03. September 2010

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 …)

Webseitenoptimierung – Serverseitige Optimierung

Mittwoch, 25. August 2010

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 …)

Webseitenoptimierung – Code optimieren

Montag, 16. August 2010

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 …)

IE8 Input Button Problem

Mittwoch, 13. Mai 2009

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 …)

Runde Ecken für div-Container nur durch CSS

Montag, 25. Dezember 2006

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 …)

Seiteninhalt horizontal und vertikal zentrieren 2

Sonntag, 17. Dezember 2006

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 …)

Seiteninhalt horizontal und vertikal zentrieren

Montag, 30. Oktober 2006

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 …)

CSS Layouts

Sonntag, 29. Oktober 2006

Ü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 …)

CSS Menüs

Samstag, 21. Oktober 2006

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 …)

Kontaktformular - Copyrighthinweis und Impressum