![\"newbie.jpg\"](\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2007\/11\/newbie.thumbnail.jpg\")
<\/p>\n<\/p>\n
Ein nicht zu untersch\u00e4tzendes Kriterium um Besucher auf einer Webseite zu halten ist die Ladezeit der Seite. Zwar hat sich einiges aufgrund verbesserter Internet-Anschl\u00fcsse getan und viele User gehen inzwischen mit High-Speed ins Internet, aber viele eben auch noch nicht. Grund genug mal ein Auge drauf zu werfen und zu schauen, was man verbessern k\u00f6nnte.<\/p>\n
Im Allgemeinen gilt die Faustregel, dass eine Webseite innerhalb der ersten 8 Sekunden vollst\u00e4ndig angezeigt werden sollte. Geschieht dies nicht, ist die Gefahr gro\u00df, dass der ungeduldige User weg- und weiterklickt.<\/p>\n
Auch als Laie kann man seine eigene Seite mal einem Test unterziehen und die Adresse der Webseite bei www.websiteoptimization.com <\/a>eingeben.<\/p>\n Es gibt eine ganze Reihe von M\u00f6glichkeiten die Ladezeit zu verbessern. Manches kann man auch als Laie selber machen, bei anderen Dingen muss der „Profi“ ran.<\/p>\n Insgesamt wird empfohlen, dass die zu ladende Datenmenge 30KB nicht \u00fcbersteigen soll. Vielfach l\u00e4sst sich das \u00dcbersteigen dieser Grenze auf die Verwendung von Javasripts zur\u00fcckf\u00fchren, die f\u00fcr die Navigation eingesetzt werden. Der Grund daf\u00fcr liegt auf der Hand : Javascript Navigationen gibt es zu Hauf im Internet zum Runterladen. Sie sind von einnehmender Fr\u00f6hlichkeit, sch\u00f6n bunt, k\u00f6nnen auf- und zu klappen, blinken, blitzen, hupen und machen lauter so neckische Dinge, die andere Navigationen nicht bieten. Das verf\u00fchrt leicht dazu eine solche Navigation als „sch\u00f6n“ und „muss ich auch haben“ zu empfinden. Neben weiteren Nachteilen kann aber so eine Monsterbacke von Javascript-Men\u00fc schon einen erheblichen Anteil daran haben, dass die Datenmenge, die geladen werden muss um die Seite vollst\u00e4ndig anzuzeigen, einfach zu gro\u00df ist.<\/p>\n Was kann man dagegen tun?<\/strong><\/p>\n Ganz einfach. CSS-Men\u00fcs verwenden. Es gibt einen Haufen von guten Alternativen, man muss nur wissen wo.<\/p>\n http:\/\/css.maxdesign.com.au\/listamatic\/index.htm<\/a> http:\/\/www.cssplay.co.uk\/menus\/<\/a> Bei vielen Untersuchungen mit dem Websiteoptimization-Tool wird sich u.U. auch zeigen, dass die Bilder der n\u00e4chstgr\u00f6\u00dfere Brocken sind. Bilder werden zum einen f\u00fcr die Gestaltung der Webseite eingesetzt und\/oder sind f\u00fcr die Darstellung unverzichtbar, weil sie anschaulich bestimme Sachverhalte erkl\u00e4ren oder , z.B. bei einem Shop, angebotene Produkte zeigen.<\/p>\n Bilder im .jpg Format , die vom Autor einer Webseite in die Inhalte eingef\u00fcgt werden, sollten daher immer bis an den Rand des Ertr\u00e4glichen komprimiert werden um jedes Byte einzusparen.<\/p>\n An sich kann man die Komprimierung mit jedem Grafik-Programm durchf\u00fchren, aber da die meisten, oft nur redaktionell t\u00e4tigen Autoren einer Webseite, kein Grafikprogramm besitzen, w\u00e4re z.B. Irfan-View<\/a> zu empfehlen. Das Programm kann man sich kostenlos runterladen. Die Bedienoberfl\u00e4che hat zwar einen recht spr\u00f6den Charme, Irfan-View ist aber dennoch ein durchaus empfehlenswertes Tool, welches neben der Komprimierung auch noch einige andere Dinge auf der Pfanne hat.<\/p>\n Wer das nicht will, dem kann auch Picasa<\/a> empfohlen werden. Einmal installiert kann man mit Picasa seine Bilder auch mit einigen Effekten versch\u00f6nern, die Bilder auf der Festplatte organisieren und sogar Webalben anlegen.<\/p>\n Sollten diese Ma\u00dfnahmen nicht ausreichen, muss man analysieren welche Bilder f\u00fcr die Datenmenge haupts\u00e4chlich verantwortlich sind. Sind es die vom Autor eingef\u00fcgten Bilder im Text oder einer Fotogalerie oder sind es die Bilder, die im Design einer Seite stecken?<\/p>\n Ja – ja – das ist die Kehrseite der Medaille. Grafikintensive Seiten mit Hingucker-Effekt verbrauchen oft f\u00fcr allein f\u00fcr das Design viel Speicherplatz. Besonders bei shops ist es daher wichtig sorgf\u00e4ltig damit umzugehen bzw. hier eine M\u00f6glichkeit in Betracht zu ziehen, die jedoch wahrscheinlich nicht von Laien durchgef\u00fchrt werden kann.<\/p>\n Dass eine Seite sich nur langsam aufbaut, kann, neben der schon erw\u00e4hnten Speichergr\u00f6\u00dfe der einzelnen Dateien auch an der Anzahl der offenen https Verbindungen liegen. Jedes Bild, welches geladen wird, hat seine eigene Verbindung und wird \u00fcber diese vom Server abgerufen und auf der Webseite dargestellt. Sind es viele Bilder, hat man logischerweise auch viele solcher Verbindungen offen. F\u00fcr die Bilder, die f\u00fcr das Design ben\u00f6tigt werden, kann man jedoch durch die „Sprite-Technik“ die Anzahl der Verbindungen reduzieren.<\/p>\n http:\/\/www.alistapart.com\/articles\/sprites<\/a><\/p>\n Im einfachsten Fall kann man die „Sprites“ z.B. schon f\u00fcr Links und Listsymbole anwenden und so zumindest die Anzahl der offenen Verbindungen f\u00fcr Bilder die zum Design einer Seite geh\u00f6ren reduzieren. Hierzu bedient man sich der M\u00f6glichkeiten der Bildpositionierung mit CSS. Im Falle eines Links z.B. w\u00fcrde man sowohl das Symbol f\u00fcr den Links als auch das Symbol f\u00fcr den Link im gehoverten Zustand in ein (1) Bild legen statt in zwei getrennte. Durch die Angabe der Position kann man aber auf dem Bildschirm immer nur eines von beiden sehen. Diese Methode hat den Vorteil, dass das Bild, welches ja im Grunde zwei Symbole enth\u00e4lt, in einem Rutsch vom Browser in den Cache geladen wird.<\/p>\n In komplexeren F\u00e4llen, soll es auch m\u00f6glich sein ALLE Bilder eines Designs in eine (ich sag mal) Folie zu legen. Das habe ich aber selber noch nicht ausprobiert. Sollte ich aber vielleicht mal, denn mein Weblog ist auch nicht gerade ein Vorbild in Sachen Speichergr\u00f6\u00dfe und Ladezeit. Was ich mich allerings frage\u00c2\u00a0 ist, wie sich solche Grfaiken bei\u00c2\u00a0 mit relkativen Gr\u00f6\u00dfeneinhaiten aufgebauten Webseiten verhalten.<\/p>\n Wer mehr \u00fcber Sprites wissen will, kann hier weiterlesen: M\u00f6chte man es besonders barock und volumin\u00f6s empfiehlt sich das Layout mit Tabellen zu erstellen, m\u00f6glichst viele davon zu verschachteln und viele Zellen miteinander zu verbinden. Am besten geht das mit einem html-Editor wie Frontpage, weil man da die Tabellen visuell zusammenklickern kann ohne dabei den \u00dcberblick zu verlieren. Ganz Virtuose k\u00f6nnen das nat\u00fcrlich auch ohne einen Editor ;-) – Im Quellcode kommen dabei einzigartige Kunstwerke heraus, die garantiert so schnell niemand kopiert.<\/p>\n Glaubst du nicht?<\/p>\n Gut :-) – au\u00dfer das mit dem Kopierschutz w\u00fcrde es auch nicht glauben, denn in den allermeisten F\u00e4llen ist der dritte Hauptspeicherfresser so mancher Webseite der Html-Code an sich. Daf\u00fcr sorgen eine veraltete Layout-Technik mit html und Tabellen, die einen Quelltext als nicht zu durchschauendes Gewirr aus html-Elementen deren Auszeichnungen f\u00fcr das Aussehen( „Bl\u00e4hcode“) verwandeln.<\/p>\n Es gibt zwar einige Tools mit denen man html und css optimieren und die Gr\u00f6\u00dfe verringern kann, am besten jedoch ist es das \u00dcbel bei der Wurzel zu packen und eine Webseite von Grund auf mit X<\/strong>html und CSS Stylesheets zu erstellen.<\/p>\n Hierbei werden Layout und Inhalt voneinander getrennt. Die .css Datei wird ausgelagert und muss vom Browser somit nur einmal geladen werden um im Cache zu landen und von dort aus f\u00fcr jede weitere Seite des Webs benutzt werden zu k\u00f6nnen. In der .css Datei stehen alle Informationen dar\u00fcber wie die Webseite aussehen sollen. Tabellen werden in solchen Layouts nur noch dann benutzt, wenn es sich um taballarische Daten handelt, die dargestellt werden sollen, nicht jedoch um damit Hintergrundbilder oder sonstige Design-Elemente auf dem Bildschirm zu positionieren.<\/p>\n Jede Webseite sollte im Quelltext mit der so genannten Doctype-Deklaration beginnen. Hieraus ist ersichtlich, ob es sich um xhtml oder html handelt.<\/p>\n Willst du mehr wissen? Lies mal hier: http:\/\/artikel.fabrice-pascal.de\/dtd\/ <\/a><\/p>\n Wenn deine Seite mit Tabellen layoutet, findest du im Quelltext zahlreiche Elemte wie : <table>, <tr> und <td>. Wenn deine Seite CSS verwendet, findest du im <head> deiner Seite einen Link zu einer Datei, die auf .css endet bzw. wenn das .css nicht ausgelagert ist (was nur in einigen F\u00e4llen sinnvoll ist) findest du auch .css-Auszeichnungen direkt im <head>. Benutzt deine Seite das Boxmodel um das Layout zu erstellen, findest du im Quellext nur selten eine Tabelle.<\/p>\n — Bin schon da … sagte der Igel.<\/p>\n Ein nicht zu untersch\u00e4tzendes Kriterium um Besucher auf einer Webseite zu halten ist die Ladezeit der Seite. Zwar hat sich einiges aufgrund verbesserter Internet-Anschl\u00fcsse getan und viele User gehen inzwischen mit High-Speed ins Internet, aber viele eben auch noch nicht. Grund genug mal ein Auge drauf zu werfen und … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,148,177,235],"yst_prominent_words":[],"class_list":["post-3616","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-accessibility","tag-tipps-und-tricks","tag-xhmtl-css"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3616"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3616\/revisions"}],"predecessor-version":[{"id":4045,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3616\/revisions\/4045"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3616"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Nur Warnings … watt nu?<\/h2>\n
Javascript und die Navigation<\/h3>\n
\nHier sind einige CSS-Men\u00fcs zu finden, mit denen auch Anf\u00e4nger zurecht kommen.<\/p>\n
\nSpielkinder mit Hunger auf mehr schauen mal bei Stu Nichols rein.<\/p>\nGrafiken und Bilder<\/h2>\n
Speichergr\u00f6\u00dfe reduzieren<\/h3>\n
Anzahl der https-Verbindungen reduzieren<\/h3>\n
\nhttp:\/\/spritegen.website-performance.org\/section\/what-are-css-sprites\/<\/a><\/p>\n<\/h2>\n
<\/h2>\n
Der Code<\/h2>\n
Woran kann ich als Laie erkennen, ob meine Webseite mit Tabellen und html layoutet?<\/h3>\n
\nfoto: istockphoto | nijht<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"