Nur bedingt brauchbare Tools

[Schattenwerk]

Das tolle an solchen Tools ist, dass sie nur eine Einzelseite betrachten.

Unnötige Styles rausfischen konnte nämlich schon Google Pagespeed, jedoch was bringt es mir, wenn mir ca. 40% meiner Styles als unnötig angezeigt werden, jedoch 30% davon auf der Folgeseite nötig sind.

Ob dieses Tool dies ebenso macht, kann ich leider nicht nachvollziehen, da der Dienst offenbar überlastet ist. Aber ich denke mal nicht ;)

[Xstream]

dann splittest du das eben in 2 dateien und lädst die eine nur auf den seiten auf denen es nötig ist?

[LH]

Xstream schrieb:
--------------------------------------------------------------------------------
> dann splittest du das eben in 2 dateien und lädst die eine nur auf den
> seiten auf denen es nötig ist?

Wenn eine CSS Datei komplexer wird, ist das Splitting kaum einfach zu erledigen. Da ist der Aufwand für die Trennung so groß, das man die Optimierung gleich komplett von Hand angehen kann.

Die Situation von "Schattenwerk" kann ich gut nachvollziehen. Viele Seiten sind heute dynamisch und enthalten nicht immer alle Elemente. So kann eine Seite Kundenbewertungen enthalten, eine andere nicht, obwohl beide sich um Produkte drehen. Nur gibt es eben nicht für jedes Produkt auch Kundenbewertungen.
Je nach Seitenaufbau ist es schlicht nicht möglich das eine Seite alle Elemente enthält (z.B. weil einige Elemente nur bei Haartrocknern vorkommen, andere nur bei Tablet-PCs. Da sie alle im Grunde das gleiche Design mit der gleichen CSS nutzen, ist eine klare Trennung aber nicht einfach möglich).

So ein Tool muss also viele Seiten analysieren, um ein sinnvolles Ergebnis zu erzielen.

Zudem gibt es ein weiteres Problem: Javascript. Einige meiner Seiten nutzen Javascript um dynamisch Elemente zu erzeugen. Damit dürfte dieser Dienst überfordert sein.

[Schattenwerk]

Xstream schrieb:
--------------------------------------------------------------------------------
> dann splittest du das eben in 2 dateien und lädst die eine nur auf den
> seiten auf denen es nötig ist?

Neben dem von Xstream schon gesagtem: Dann lege ich für zwei Seiten zwei CSS-Dateien ab, wovon dann ca. 80% (für Grundgerüst) gleich sind? Ich empfehle dir mal: http://de.wikipedia.org/wiki/DRY

Also, was muss ich tun? Den Grundaufbau in noch eine Datei splitten. Nun habe ich drei Dateien für zwei Seiten. 4 HTTP-Requests wovon nur einer gecached werden kann.

Ich will dir nun nicht zu nahe treten aber offenbar hast du im professionellen Bereich, wo auch eine schnelle Verfügbarkeit über die ganze Welt hinweg per CDN, etc. relevant ist, noch nicht mit Webseiten gearbeitet.

Und nun lege ich dir noch eins drauf, weil wie schon Xstream gesagt hat: Die Seiten sind dynamisch. Können vom Kunden im CMS sogar per Drag & Drop im Baukastenprinzip zusammengezogen werden. Die Webseite enthält also neben einem Grundaufbau, mehrere Templates und für diese Templates über 100 individuelle Content-Elemente.

Diese Content-Elemente haben teilweise gleiche Styles, teilweise eigene. Und nun will ich dich sehen, wie du mit deinem Konzept dort weiterkommst ;)

[dabbes]

Und wer bitte macht sowas ?
Dann müsste man für jede Seite ein separate Datei anlegen.

Trotz komplexer Seiten und anwachsender Stylesheets sehe ich das Problem nicht wirklich an.
Grundsätzlich muss eine gewisse Disziplin bei der Vergabe von Bezeichnern da sein, um die CSS gut zu strukturieren, damit spart man am meisten unnötige Stylesheets.

Die Dateigröße ist irrelevant, wenn ich mir angucke was morderne Seite alles an JS-Dateien laden oder Bildern, da fallen selbst 100 KB Stylesheets nicht ins Gewicht (wobei ich noch keine Seite gesehen habe die 100 KB CSS hat).

[developer]

Xstream schrieb:
--------------------------------------------------------------------------------
> dann splittest du das eben in 2 dateien und lädst die eine nur auf den
> seiten auf denen es nötig ist?

Genau das macht man eben nicht.
Der overhead durch die zusätzlich benötigten Requests und die höhere Komplexität ist weitsaus größer als das Einsparungspotential.

Vor allem weil die Dateien gecached werden können.

Es ist zwar sinnvoll eine Core Css und darüber hinaus spzezifischere files und oder themefiles zu bauen, aber sinnloses splitten um ja keine unnötige requests führt genau zum Gegenteil.

Um einen derartigen Dienst sinnvoll nutzen zu können wäre weitaus mehr KnowHow über Browser, Caching, CDN und HTTP wichtig als es bei den zu erwartenden Anwendern vorhanden sein dürfte.

Whatever you do, do it with: 5 + (sqrt(1-x^2(y-abs(x))^2))cos(30((1-x^2-(y-abs(x))^2))), x is from -1 to 1, y is from -1 to 1.5, z is from -100 to 4.5

[Moridin]

dabbes schrieb:
--------------------------------------------------------------------------------
> (wobei ich noch keine Seite gesehen habe die 100 KB CSS hat).

Die gemergte CSS-Datei des Projekts, an dem ich gerade arbeite, hat aktuell 199KB.

Finde solche Tools nur bedingt sinnvoll - eine einzige CSS-Datei, in der alles vorhanden ist, muss nur ein einziges Mal vom Server geladen werden und kann dann aus dem Browser-Cache kommen - wozu für jede Seite einen eigenen Request auf eine spezifische CSS-Datei?

Man darf auch nicht das Risiko vergessen, das solche Tools mit sich bringen - unseren Kunden ist es reichlich egal, ob nun 50KB oder 200KB CSS geladen werden, aber wehe irgendwas sieht nicht so aus, wie es aussehen soll, dann klingelt hier das Telefon.

[Schattenwerk]

Moridin schrieb:
--------------------------------------------------------------------------------
> dabbes schrieb:
> ---------------------------------------------------------------------------
> -----
> > (wobei ich noch keine Seite gesehen habe die 100 KB CSS hat).

Kontere mit 275 KB auf 10675 Zeilen ;p

[zZz]

zum optimieren der stylesheets finde ich das auch nur bedingt sinnvoll, allerdings hilft es gänzlich ungenutzte styles aufzuspüren. das ging zwar schon mit unused-css.com, aber wirklich zufrieden war ich mit dem dienst auch nicht. mal den müllmann antesten...

[Th3Dan]

Schattenwerk schrieb:
> Also, was muss ich tun? Den Grundaufbau in noch eine Datei splitten. Nun
> habe ich drei Dateien für zwei Seiten. 4 HTTP-Requests wovon nur einer
> gecached werden kann.

Warum sollen 4 CSS-Dateien nicht gecached werden können?
Das geht mit entsprechender Ausgabe sogar in dynamisch generierten Stylesheets.

Das Problem ist eher dass man 4 HTTP-Requests hat wo nur einer Nötig ist. Wenn da jetzt noch JS und Einzelbilder die nicht als Sprites vorliegen dazukommen hat man schnell eine große Summe beisammen, welche die Ladezeit am Schluss drücken.

Die für den Endnutzer beste Lösung ist wohl die dynamische Generierung einer CSS-Datei, welche nur die für die aktuelle Seite notwendige Definitionen enthält.
Technisch gesehen ist das aber wiederum suboptimal, da eine statische CSS-Datei wesentlich schneller und mit weniger Ressourcenverbrauch ausgeliefert werden kann als wie wenn erst ein Script aufgerufen wird das dynamischen Content generiert und am besten noch mehrere Datenbankabfragen machen muss um das Stylesheet zusammenzubasteln.

Es hat alles seine Vor- Und Nachteile, muss man im Einzelfall halt immer gucken auf was man den Fokus legt und welche Nachteile man in Kauf nehmen kann.