Wie wird eine css vom server eingelesen ?

ami · **ami** » 20.07.2015, 14:55 **Wie wird eine css vom server eingelesen ?**

Das Template welches ich gerne verwenden würde hat eine css Datei die 144 kb gross ist (meine jetzige gerade mal 8 kb) . Wird diese erst komplett eingelesen ? Das wäre für mich ein no-go und eine Entscheidung gegen bootstrap !

Melegrian · **Melegrian** » 20.07.2015, 15:49 **Wie wird eine css vom server eingelesen ?**

Probiere es einmal mit Minifizierung. Alles beherzige ich auch nicht, doch einiges schon.

https://www.mediaevent.de/css/effizienz.html

Aiken · **Aiken** » 20.07.2015, 16:16 **Wie wird eine css vom server eingelesen ?**

am besten nen CDN benutzen: https://www.bootstrapcdn.com/
dann ist die CSS Datei im normalfall schon vorgeladen und wird erst garnicht geladen

gurken · **gurken** » 20.07.2015, 18:04 **Wie wird eine css vom server eingelesen ?**

die css wird beim ersten Aufruf der Seite komplett geladen, danach ist sie im Cache und geht dann etwas schneller.

144kb find ich net so schlimm, pack sie am besten da nochmals rein
https://cssminifier.com/
dann wird sie nochmals etwas kleiner

Melegrian · **Melegrian** » 20.07.2015, 18:26 **Wie wird eine css vom server eingelesen ?**

ami hat geschrieben:(meine jetzige gerade mal 8 kb)

Bei responsive Webdesign kannst Du die 8 ohnehin vergessen.

gurken hat geschrieben:die css wird beim ersten Aufruf der Seite komplett geladen, danach ist sie im Cache und geht dann etwas schneller.

Wenn die Besucher seiner Seiten mehrheitlich nach der ersten Seite abspringen und nie wieder kommen, dann ist das aber ein schwacher Trost. Da ist dann CDN wirklich besser.

ami · **ami** » 21.07.2015, 15:09 **Wie wird eine css vom server eingelesen ?**

Danke erstmal für die Tips !

der minifier hat 20 kb gebracht, die Datei lässt sich jetzt aber nicht mehr mit Notepad++ bearbeiten. Das ist Im Prinzip schlimm

Bei cdn muss ich mich jetzt erstmal einlesen um überhaupt das Prinzip zu kapieren. Ich wäre aber eigentlich gerne weiterhin unabhängig von anderen Servern, wenn ich es soweit richtig verstanden habe

@Melegrian: stimmt es geht so gerade noch. 3 feste Auflösungen. Reicht eigentlich für meine kleine Handwerkerseite und google meckert nicht mehr über no responsive

Warum bläht sich bootstrap nur immer weiter auf, gibt es evtl. ein tool was unbenötigten code entfernen kann oder ist generell alles nötig was in der css steht ?

toSeo · **toSeo** » 21.07.2015, 16:13 **Wie wird eine css vom server eingelesen ?**

ami hat geschrieben:Warum bläht sich bootstrap nur immer weiter auf, gibt es evtl. ein tool was unbenötigten code entfernen kann oder ist generell alles nötig was in der css steht ?

Du kannst Dir doch eine Version runterladen, in der nur die benötigten Komponenten enthalten sind.

Versuch mal mit der less-Variante zu arbeiten. WinLess z.B. packt das dann in eine css zusammen und übernimmt dabei auch das Verkleinern.

Wenn Du Gzip auf dem Server aktivierst, dann werden aus den 100+kB übrigens um die 20. Und spätestens da würde ich mir keine großen Gedanken mehr machen.

sup · **sup** » 21.07.2015, 16:32 **Wie wird eine css vom server eingelesen ?**

"Wie wird eine css vom server eingelesen ?"

Erstmal wird eine CSS Datei nicht vom Server eingelesen sondern vom Server heruntergeladen und dann vom Client verarbeitet. CDN bringt bei einer einzigen Datei von der größe so gut wie garnichts. Solang deine Seite hier (google speedtest) gut abschneidet ist alles top.

Guck dir seiten wie Google, Zalando etc. an und auch deren Mobile Seiten. Das sind immer gute Referenzwerte wie groß deine Seite sein sollte.

Mit F12 (Firefox/Chrome) kannst du auch im Netzwerk-Debugger gucken wie viel KB/MB eine Seite zum laden braucht und welche Anfragen wohin geschickt werden etc. pp.

Die Obfuskation (minify) von CSS und Javascript ist auf jeden fall ein einfacher Schritt um Bandbreite zu sparen und Geschwindigkeit zu gewinnen. Du solltest immer eine Version der Datein haben die für einen Menschen lesbar ist und eine Version der Datei die dann Obfuskiert ist und ausgeliefert wird auf deinen Server.

Falls du noch fragen hast schieß los

Melegrian · **Melegrian** » 21.07.2015, 19:40 **Wie wird eine css vom server eingelesen ?**

ami hat geschrieben:3 feste Auflösungen. Reicht eigentlich für meine kleine Handwerkerseite und google meckert nicht mehr über no responsive

Und wozu benötigst Du dann noch bootstrap?

Can · **Can** » 21.07.2015, 20:27 **Wie wird eine css vom server eingelesen ?**

hi ami,
ggf. solltest du dich bei so hoch ambitionierten Zielen mit LESS auseinandersetzen. Damit kannst du dein Bootstrap Build selbst bestimmen, also nur die Teile verwenden die für dich Relevant sind.
Besser wäre aber wirklich die Nutzung eines CDNs der dir Bootstrap bereitstellt. Diese liegt in der Regel schon im Cache des Users und muss gar nicht geladen werden. Steht hier bestimmt auch schon irgendwo schonmal.

Dein bisschen eigenes CSS stellst du dann in einem eignen File bereit. Bei kleinen Seiten ist es nichtmal sonderlich schlimm wenn du es nicht minimierst, wenn du ein CMS verwendest gibt es (Typo3 scriptmerger, Wordpress: Better WordPress Minify, usw). Das ist der einfachste weg damit du immer im originalen CSS arbeiten kannst, dem CLIENT (NICHT SERVER) allerdings eine optimierte minimierte Version bereitgestellt wird.

ami · **ami** » 21.07.2015, 23:49 **Wie wird eine css vom server eingelesen ?**

sup hat geschrieben:Du solltest immer eine Version der Datein haben die für einen Menschen lesbar ist und eine Version der Datei die dann Objuskiert ist und ausgeliefert wird auf deinen Server.

Logisch, danke dir !

Melegrian hat geschrieben: Und wozu benötigst Du dann noch bootstrap?

Gute Frage, ganz ehrlich ? Am liebsten hätte ich meine statische Seite von 2010 zurück, eine simple html datei mit ein paar Bildern und freundlichem Text. Diese ganze responsive Geschichte raubt mir meine letzte Kreativität. Stundenlang am ausprobieren und dann hakt es doch wieder irgendwo, dabei geht das wesentliche total flöten,

Wie wichtig ist euch eine (optisch) fehlerfrei Seite eigentlich ? Vielleicht sehe ich die Sache ja viel zu verbissen ? Gibts eigentlich schon Selbsthilfegruppen für responsives Design ?

Melegrian · **Melegrian** » 22.07.2015, 08:29 **Wie wird eine css vom server eingelesen ?**

ami hat geschrieben:Gibts eigentlich schon Selbsthilfegruppen für responsives Design ?

Kommt ja darauf an, wie Deine Seite aufgebaut sein soll. Für ein dreispaltiges Layout bin ich von dem letzten auf dieser Seite ausgegangen, wobei der Mittelteil mit Inhalt immer oben bleibt. In einem Seiten-Wrapper gelegt, rutscht zuerst die rechte Sidebar mit Info nach unten und danach die Linke mit Navigation. Oder umgekehrt bei Mobile First, nur musst Du davon ausgehen, dass die Seite noch richtig in Browsern angezeigt wird, die noch keine Media Queries verstehen.

https://www.gipspferd.de/css/anleitung/ ... e-aendern/

Und Media Queries sind ja auch kein Problem, wenn man erst einmal sich ein wenig damit beschäftigt hat.

https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Für einzelne Fragen gibt es dann genügend Foren, in denen HTML5 und CSS beantwortet werden. Doch bei den vielen Anleitungen, die bereits im Web vorhanden sind, findet man auch ohne Fragen genügend Beispiele.

nerd · **nerd** » 23.07.2015, 05:35 **Wie wird eine css vom server eingelesen ?**

ami hat geschrieben: der minifier hat 20 kb gebracht, die Datei lässt sich jetzt aber nicht mehr mit Notepad++ bearbeiten. Das ist Im Prinzip schlimm

Warum benutzt du nicht LESS um deinen css code zu erzeugen? Ich benutze PHPStorm, und damit wird aus dem .less -file automatisch css erzeugt.
LESS ist prinzipiell leichter zu bearbeiten als reine css files, einfach weil man einmal definierte styles leicht wiederfindet, man kann farben ud andere styles vordefinieren, farben und groessen berechnen (z.b. H2 = 70% der fontgroesse von H1, Secondary color = 20% dunkler von Primary color) usw.
Fuer jedes bessere CMS gibts eigentlich irgendwelche plugins, welche CSS und JS auf dem server in eine minifizierte version umschreiben.

ami hat geschrieben: Warum bläht sich bootstrap nur immer weiter auf, gibt es evtl. ein tool was unbenötigten code entfernen kann oder ist generell alles nötig was in der css steht ?

Schonmal auf https://getbootstrap.com/customize/ gewesen um dort alle nicht benoetigten elemente und funktionen zu entfernen?

ami hat geschrieben:Gute Frage, ganz ehrlich ? Am liebsten hätte ich meine statische Seite von 2010 zurück, eine simple html datei mit ein paar Bildern und freundlichem Text. Diese ganze responsive Geschichte raubt mir meine letzte Kreativität. Stundenlang am ausprobieren und dann hakt es doch wieder irgendwo, dabei geht das wesentliche total flöten,

Also diese seite hier ist auch ganz ohne bootstrap responsive, schnell und schoen zu lesen.
Ich persoehnlich wuerde allerdings noch ein bischen mehr padding setzen und weniger harte farben verwenden...

gurken · **gurken** » 23.07.2015, 11:31 **Wie wird eine css vom server eingelesen ?**

Melegrian hat geschrieben: Wenn die Besucher seiner Seiten mehrheitlich nach der ersten Seite abspringen und nie wieder kommen, dann ist das aber ein schwacher Trost. Da ist dann CDN wirklich besser.

ich kenne CDN nicht, sehe ich das richtig das ich ein Script einbaue was noch größer wie die jetzige .css ist und damit soll alles schneller gehen?

Bei einer Durchschnitssgeschwindigkeit von 7Mbit ist eine 144kb css Datei wirklich kein Problem, diesen kleinen Brösel merkt die Leitung nicht mal, da gibts echt wichtigeres zu optimieren.
Apropo hat die FB Startseite 7MB zum laden, alleine das CSS Paket ist fast einen MB und nicht mal da meckert einer, obwohls da sehr viel zum meckern gäbe zumal auf der mobilen Seite die Größe nur minimal geringer ist.

toSeo · **toSeo** » 23.07.2015, 11:50 **Wie wird eine css vom server eingelesen ?**

gurken hat geschrieben: ich kenne CDN nicht, sehe ich das richtig das ich ein Script einbaue was noch größer wie die jetzige .css ist und damit soll alles schneller gehen?

Nein, kein Script. Du bindest bestimmte Pakete von einer anderen Source ein um Deine eigene Seite zu entlasten.

Damit profitierst Du auch davon, daß viele Leute dies tun und Besucher den Code bereits im Cache haben.

CDN = Content Delivery Network.