nicht angemeldet
CSS Dateien best practice?
Hi,
bin gerade dabei eine etwas angestaubte Seite ein wenig aufzuräumen. Also ein wenig divitis kurieren, überflüssige Styles ausmisten und so.
Dabei stehe ich jetzt unter anderem vor der Frage, wie ich mit den Stylesheet-Dateien verfahre. Konkret also: Was ist die bessere Praxis: Soviel wie möglich in eine große Datei, die dann auch nur einmal geladen werden muss, oder lieber situationsbezogene kleinere Dateien, damit seltene Styles nur wenn sie wirklich gebraucht werden auch nachgeladen werden?
So als Beispiel wäre da ein Kontaktformular mit den ganzen Styles für input-Felder und dergleichen auf einer Seite, auf der vielleicht nur 5% der Besucher auch das Kontaktformular aufrufen. Lieber separat, oder eher nicht?
bye.
-
Mahlzeit,
da die Dateien vermutlich nicht mehrere kb gross sind, mach eine Datei für alles.
Der Overhead für mehrere Dateien ist grösser als die Styles, die unnötig geladen werden.--
42 -
Hallo,
das schöne: In der Praxis ist das vollkommen egal.
Wenn man das einfach mal ausprobiert und von Dritten auf verschiedenen Geräten und unterschiedlichen Übertragungsmöglichkeiten / -geschwindigkeiten testen lässt ist kein Unterscheid bemerkbar.
Deshalb solltest du danach gehen, wie du die CSS-Dateien am besten pflegen kannst.
Gruss
MrMurphy
-
Hallo!
das schöne: In der Praxis ist das vollkommen egal.
Seit wann das denn bitte?
Wenn man das einfach mal ausprobiert und von Dritten auf verschiedenen Geräten und unterschiedlichen Übertragungsmöglichkeiten / -geschwindigkeiten testen lässt ist kein Unterscheid bemerkbar.
Solche Aussagen halte ich schlicht für falsch.
Deshalb solltest du danach gehen, wie du die CSS-Dateien am besten pflegen kannst.
Nein, sollte er nicht ...! ;-)
Aber keiner sagt, dass man zur Bearbeitung die Datei verwenden muss, die hinterher auch online gestellt wird.
Soll heißen, man kann lokal seine eine große CSS Datei bspw. auch in mehrere zerlegen oder sonst irgendetwas damit anstellen.
Nur online, bzw. für den produktiven Einsatz sollte es dann unbedingt wieder nur eine einzige Datei sein (bereinigt/ komprimiert), die vom Server idealerweise auch noch 'gzipped' ausgeliefert wird.
Gruß Gunther
-
Soll heißen, man kann lokal seine eine große CSS Datei bspw. auch in mehrere zerlegen oder sonst irgendetwas damit anstellen.
Das geht dabei von einigen Methode, wie einfach nur sämtliche CSS files durch den PHP Interpreter zu jagen um z.B. variablen verwenden zu können, oder Includes (um eben sein CSS in einzelne Stückchen aufzuteilen) bishin zu fertigen Lösungen wie z.B. SCSS/SASS oder LESS - allerdings ist auch das nicht der weisheit letzter Schluss, weil es letzlich dazu führen kann, dass man in seinem Stylesheet "herumsaut" und letztlich deutlich mehr Code erzeugt, als man eigentlich benötigt.
-
-
Mahlzeit,
Wenn man das einfach mal ausprobiert und von Dritten auf verschiedenen Geräten und unterschiedlichen Übertragungsmöglichkeiten / -geschwindigkeiten testen lässt ist kein Unterscheid bemerkbar.
Lass mich raten, in deiner Welt gibt es nur DSL mit mindestens 16000 und keine Traffikbegrenzung.
Dummerweise gibt es aber für uns andere eine Welt mit Internetzugängen per Edge, HSDPA und 3G mit Trafficlimit, was deine Aussage, wie von Gunther erwähnt, schlicht als falsch entlarvt.
BTW: Wenn du Ahnung von Praxis hättest, du würdest sowas nicht schreiben, abgesehen davon, dass dieses Thema in den letzten Wochen hier mehrfach diskutiert wurde.
--
42
-
-
Hallo!
Performance-Optimierung ist eine empirische Wissenschaft. Ziel ist es nicht, auf Teufel komm raus die Seite schneller zu machen, sondern das dahinterstehende Ziel zu erreichen und den Erfolg statistisch zu messen. Im Marketing oft Conversion genannt: Finden der gewünschten Informationen, Verweildauer auf der Site, Geschäftsabschluss, generell Interaktionen. Es gibt wenige Performance-Richtlinien, die uneingeschränkt in allen Fällen anwendbar sind und immer Verbesserungen bringen.
Performance-Optimierung heißt nicht nur, die übertragene Datenmenge zu reduzieren. Die Bandbreite ist nur ein Faktor, der zunehmend unwichtiger wird. Ein anderer wichtiger Faktor ist z.B. die Netzwerk-Latenz. Bei hoher Latenz ist es eher nachteilig, kleine Datenpakete mit Protokollen wie HTTP nachzuladen. Manchmal ist das Übertragen von mehr Daten letztendlich besser für die User Experience.
Für eine kleine Website, die nicht Unmengen an CSS enthält, ist es einfacher, das gesamte CSS in eine HTTP-Ressource zu packen (z.B. mit einem Präprozessor wie Sass) und diese schon auf der Startseite zu laden. Wichtig ist dann, dass der CSS-Code minifiziert wurde, der Server den Code GZip-komprimiert überträgt und der Browser angewiesen wird, die Ressource lange zu cachen. Es verbessert die Performance nicht, wenn 2 KB CSS (minified + gzipped) für ein Kontaktformular erst bei Bedarf nachgeladen werden. Der HTTP-Overhead ist groß, die Latenz ist u.U. groß, das kann sogar die Benutzbarkeit der Site verschlechtern. Vielleicht lädt die Startseite minimal schneller (ich würde behaupten, nicht signifikant), dafür ist jeder Seitenwechsel langsamer.
Bei großen Sites, die aus hunderten oder tausenden unterschiedlichen Seiten und dementsprechend einem riesigen Haufen CSS bestehen, muss man sich über Modularisierung des CSS Gedanken machen. Dann ist es sinnvoll, CSS-Pakete von Seite zu Seite nachzuladen, sonst würde die Startseite einen Megabyte CSS einbinden, von dem nur ein Bruchteil gebraucht wird. Manche hochfrequentierten Mobilseiten betten das initial nötige CSS sogar ins HTML der Einstiegsseiten ein und speichern es per JavaScript zwischen, um die Ladezeit zu verbessern. Solche Hardcore-Optimierungen kosten für die meisten kleinen und mittleren Sites mehr als sie nützen.
Mathias