|
||||
Stimmt. Genau genommen:
Vorausgesetzt sie haben
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao« |
Sponsored Links |
Sponsored Links |
|
||||
Zitat:
Es gibt zwei verschiedene Möglichkeiten, um CSS-Dateien einzubinden. Obwohl beide Varianten den gleichen Zweck erfüllen, werden sie im IE unterschiedlich behandelt. Gemäss Yahoo's Performance Studie sollten Stylesheets zuoberst im HEAD eingebunden werden, damit ein progressives Rendern der Webseite möglich ist und der User den Eindruck gewinnt, die Seite würde sich schneller laden. Würde man die Stylesheets weiter unten im BODY einfügen, dann wäre das Rendern blockiert, und der User müsste während des Ladens eine weisse Fläche betrachten. Jetzt ist es so, dass im IE der @import-Befehl sich gleich verhält, wie ein <link> ganz unten im BODY. Daher lautet der Leitsatz von Yahoo: "Choose <link> over @import" |
|
||||
Zitat:
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
||||
Allerdings gilt es zu berücksichtigen, dass die von dir zitierte @import-Regel in einem Stylesheet und daher die Alternative <link ...> nicht wirklich zur Verfügung steht
Yahoo schreibt übrigens den Großteil des CSS schon bei der Erzeugung der Seite in einen <style>-Block in den Head der Seite, weil das Laden eines externen Stylesheets auch wenn es per link eingebunden immer zu einer Verzögerung führt. Allerdings ist das wirklich nur auf einer High-Performance Site wie Yahoo von Belang. Im Alltag der meisten Sites da draußen sind diese Zehntelsekunden höchstens von akademischem Interesse. Grüße aus Groningen Peter
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao« |
|
||||
Wenn es darum geht, daß die styles beim ersten Rendern zur Verfügung stehen,
sollten die a la Yahoo includet werden. @import oder <link> lösen doch eigentlich nur eine weitere HTTP-Abfrage innerhalb derer die das HTML holt, aus ? Oder ? Oder wird das irgendwie priorisiert ? |
|
||||
Zitat:
Möglicherweise bezieht sich Yahoo aber nicht auf diesen FOUC-Effekt, sondern auf ein allgemeines Verzögern (weisse Fläche) des Inhalts. Das Ziel ist es, (Teil-)Inhalte so schnell wie möglich auszugeben, obwohl die Seite noch nicht fertig geladen ist. Dies erweckt den Eindruck einer kürzeren Ladezeit. Zitat:
Bei meinen Webanwendungen habe ich schon seit längerem ein organisatorisches Problem mit den CSS-Dateien. Vielleicht könnte ich mit dieser Technik Ordnung schaffen. Zitat:
Nach Yahoo's Messungen besuchen 40-60% aller täglichen Besucher ihre Webseite mit einem leeren Cache. Diese Einbettung des CSS (und auch JS) reduziert die Anzahl der HTTP Requests. Bei grossen Besucherzahlen wird wohl dadurch der Webserver deutlich entlastet. Zitat:
Yahoo hat 34 "Best Practice" Regeln gesammelt, um die Performance von Webseiten zu erhöhen. Die Reduktion der Anzahl HTTP-Requests sehen sie als eine der wichtigsten Prioritäten an. In 'yslow' (Firefox Plugin) ist die Regel "Make fewer HTTP requests" als Erste aufgelistet. |
|
||||
Genau deswegen
Zitat:
Zitat:
Letztes Jahr hatte ich damit mal ein wenig experimentiert, was mich dann dazu gebracht hat, dass ich (momentan) nur noch 1-3 CSS-Dateien verwende. Screen, falls nötig Screen-IE und evtl. Print. Auch wenn die CSS-Dateien gecached werden, muss zwischendurch mal abgefragt werden, ob die Dateien im Cache aktuell sind, was ebenfalls einen HTTP-Request auslöst. Letztes hat hier im Forum aber jmd. einen Link gepostet, wo mit Hilfe von PHP einzelne CSS-Dateien aneinander gehängt wurden und somit Übersichtlichkeit (mehrere CSS-Dateien) und wenige HTTP-Request möglich sind. Leider etwas Overhead durch PHP, aber der ist imo vernachlässigbar gering. Selbst habe ich das aber (noch) nicht ausprobiert. |
|
||||
Das mit dem PHP ist recht Simpel.
Am Anfang header mit richtigen Mime Type und dann die Dateien Einbinden. Ggf. Kommentare und Tags entfernen und Los gehts.
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4 |
Sponsored Links |
|
||||
Und zusätzlich alle LF, CR, überflüssige Blanks ausmerzen. Spart auch noch mal (je nach Einrückungen) 10 bis 50 %.
Gegenüber der Übertragung (HTTP-Verbindung aufbauen, Routing durch die NSA, Finden des Hostst) fällt die Laufzeit im Server nicht ins Gewicht. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Little Boxes | Dieter | Ressourcen | 43 | 15.11.2011 04:05 |
Little Boxes Teil 1: Crashkurs zu HTML und CSS online lesen | pmmueller | Ressourcen | 6 | 25.02.2010 16:17 |
Bescheid: Little Boxes - Teil 0 (Null) | pmmueller | Ressourcen | 29 | 28.12.2008 16:54 |
Little Boxes - Varianten | FloZen | Offtopic | 14 | 03.06.2008 12:10 |
Suche PHP Buch ala Little Boxes | Zen5656 | Serveradministration und serverseitige Scripte | 2 | 17.02.2007 14:39 |