Kritisches CSS auslagen?

[omp-blog]

Hallo,

ich hätte mal eine Frage an diejenigen, die sich gut mit Wordpress in Verbindung mit dem Plugin Autoptimize auskennen. Dort wird unter anderem empfohlen, das kritische CSS der Webseite auszulagern, was immerhin $8 pro Monat an Gebühren bei criticalcss.com kostet.

Ich konnte zum auslagen von kritischem CSS in Wordpress nicht wirklich viel an Informationen finden. Könnt Ihr mir hierzu was sagen? Wie sinnvoll ist das?

Bin für jede Tipps dankbar.

Grüße
Michael

[staticweb]

> Ich konnte zum auslagen von kritischem CSS in Wordpress nicht wirklich viel an Informationen finden. Könnt Ihr mir hierzu was sagen? Wie sinnvoll ist das?

Dachte erst es geht um die over the fold Optimierung beim Laden, aber das macht ja von extern keinen Sinn. Ist vermutlich nur eine Art CDN.

[supervisior]

Bin für jede Tipps dankbar.

Wenn Du so eine Meldung bekommst, dann ist das ein unmittelbares Indiz dafür, dass Du es in Sachen CSS übertrieben hast. Natürlich gibt es diverse Plugins, um so was vermeintlich zu lösen. Diese Plugins ändern aber nix an der Datenmenge und CSS, besonders zu viel davon, beeinflusst nun mal die Zeit zum Rendern des Codes. Pagespeed stört sich nicht an der Ladezeit, sondern an der Zeit, die benötigt wird damit im Browser was sichtbar wird und (zu viel) CSS verzögert diese Anzeigezeit.

Plugins, die so was vermeintlich lösen, sind im Grunde genommen wie Schmerztabletten, wenn Du Zahnschmerzen hast. Der Schmerz geht damit zwar weg, das Loch im Zahn bleibt aber. Bevor Du also Gedanken daran verschwendest, wie Du die Schmerzen loswirst, solltest Du zuerst darüber nachdenken, wie Du das Loch repariert bekommst, weil Du dann gar kein Plugin (Schmerztabletten) brauchst. Dann stört sich nicht nur Pagespeed nicht mehr dran, sondern Deine Seite läd auch schneller.

Nachdem Dir und mindestens 9 von 10 weiteren die Kenntnisse fehlen dürften, um die Ursache lösen zu können, bist Du wahrscheinlich trotzdem dazu verdonnert eines dieser Plugins zu verwenden. Für dieses Autoptimize gibt es aber bessere und v.a. kostenlose Altermativen, wie z.B. das LiteSpeed Plugin für Wordpress. Dieses Plugin hat 2 wesentliche Funktionen, wobei nur 1 davon für Dich in Frage kommt. Die eine Funktion ist fürs Optimieren, die andere für den HTTP Cache. Letztere kannst Du nicht nutzen, wenn Du nicht auch den LiteSpeed Webserver verwendest. Sich aber mal darüber informieren, lohnt sich aber, weil Du damit in eine Geschwindigkeitsregion aufsteigst, die Dich von den Socken hauen wird, aber das ist ein anderes Thema.

Die Optimierungsfunktionen dieses Plugins bietet Dir mehr als jedes andere für diese Funkton erhältliches Plugin. Das ist aber ein wenig mit Vorsicht zu genießen. Nicht weil das Plugin fehlerhaft wäre, sondern weil nicht alle Themes/Templates auch alle Optimierungsfunktionen unterstützen. Deswegen nicht gleich alle Funktionen aktivieren, wo optimieren drauf steht, sondern eine Funktion nach der anderen und zwischendurch testen.

https://de.wordpress.org/plugins/litespeed-cache/

[/Affilitiv/]

was immerhin $8 pro Monat an Gebühren bei criticalcss.com kostet.

Dort steht 2€

* Unlimited domains - create critical css for as many websites as you want, all for the same price.

was soll das "ll for the same Price" heisen? das "unlimited" in den 2€ drin sind, oder das jede Domain diesen Preis kostet?


für Wordpressen gibts einen tollen SOnderpreis
* 8€ +€6/month for each additional domain you use.

und was wollen de genau machen?

Ist vermutlich nur eine Art CDN.

man verlagert das CSS dorthin? das soll was bringen?

Die erzählen natürlich das sie superschnelle Server haben ... ala dem Hyperloop in Korea (ein neuartiger Zug mit 1000kmh) und dein Hoster hat natürlich nur einen Tarbi mit 80kmh

Das erzählen die nur um Geld zu bekommen? die normalen Hoster untereinander sind keine Konkurenten und können den Kunden "Schrott" verkaufen?

[supervisior]

@/Affilitiv/

Um Dich nicht dumm oder sagen wir mal unwissend weiterleben zu lassen. Sowohl im konkreten Fall bezogen auf das angebene Plugin als auch generell zum Thema Critical CSS geht es nicht um das Auslagern von CSS, auch wenn das Wort auslagern so verwendet wird. Deswegen ist damit auch kein CDN gemeint. Statt Aus- muss man das eher als Verlagern verstehen. Verlagern insofern, als dass der für Pagespeed kritische Bereich above the fold, also oberhalb der Knickfalte in Sachen CSS anders behandelt werden soll als den Bereich below the fold, als all jener Bereich den man erst sieht, wenn man scrolled.

Zu diesem "Auslagern" gehört u.a. das Kombinieren, bzw. das Zusammenfügen mehrerer CSS Dateien zu nur 1 Datei. Maßgeblich beschreibt das "Auslagern" aber das Setzen von CSS Formatierungen als Inline Definition für den Bereich above the fold. Das CSS für diesen kritischen Bereich steht dann also nicht in einer CSS Datei, sondern inline im HTML Header, sodass die Anzeige nicht durch das Laden und Rendern insbesondere durch sehr große und vielen CSS Dateien blockiert wird. Das macht aber erst dann einen Sinn, wenn die CSS Datei(en) defered, also verzögert geladen wird/werden.

So ein von Pagespeed bezeichneter Fehler tritt aber nicht generell auf, sondern besonders dann, wenn man es in Sachen CSS einfach übertreibt, was keine Seltenheit ist. Sehr viele Template (Er)Bauer haben dafür oft und schlichtweg kein Gespür. Verschlimmbessert wird diese Widrigkeit durch responsive Templates/Themes.

[omp-blog]

danke für die ausführliche erklärung.

ich hatte es jetzt auch so verstanden oder veemutet, dass dieser critivalcss.com account dann wie eine art cdn ist. aber wie du es erklärst. macht das dann ja keinen sinn, da die css menge sich ja nicht ändert.

[supervisior]

ich hatte es jetzt auch so verstanden oder veemutet, dass dieser critivalcss.com account dann wie eine art cdn ist. aber wie du es erklärst. macht das dann ja keinen sinn, da die css menge sich ja nicht ändert.

Falls da tatsächlich ein CDN im Spiel sein sollte, macht ein CDN schon Sinn. Grundsätzlich bringt ein CDN die Daten schneller zum Client, weil m.E. näher am Client dran. Das macht sich aber nur dann wirklich bemerkbar, wenn man ein Publikum hat, das nicht nur aus Deutschland kommt. Hat man nur nationales Publikum und ist Anbindung des eigenen Servers an den Backbone nicht gleich grottenschlecht, merkt man von einem CDN so gut wie gar nichts, kann dadurch sogar schlechter werden und sorgt dann nur für mehr Administrationsaufwand.

[nerd]

was immerhin $8 pro Monat an Gebühren bei criticalcss.com kostet.

Ohje; klingt mir ja extrem nach abzocke. $8 sind viel zu teuer um <1MB dateien zu hosten, wahrscheinlich unnuetz und wird dir sicher auch nicht den gewuenschten effekt bringen.

Wenn du CSS unbedingt auslagern willst, kannst du das auch viel billiger selbst z.b. via amazon cdn/cloud machen, kostet dann am ende vielleicht ein paar cent pro monat.

Wenn dein CSS zu gross ist dann hast du andere probleme: dein theme ist scheisse programmiert oder du hast viel zu viele frontend plugins aktiviert die alle ihr eigenes css mitbringen und einzeln geladen werden muessen.

Prinzipiell solltest du so wenig wie moeglich styles haben, nur ein css file fuer deine seite haben was alle (frontend-) styles beinhaltet, und dieses dann minimieren damit es schnell ausgeliefert und vom browser gecachet werden kann. Wenn dein wordpress zu langsam ist, wuerde ich zuerst mal plugins entfernen die nicht zwingend noetig sind.

Also normalerweise lagert man ja eigentlich immer nur grosse dateien aus die nichts im cms oder auf dem eigentlichen webserver selbst zu suchen haben, wie z.b. artikelbilder bei tageszeitungen, videos usw. damit der webserver entlastet wird.
Bei einer kleinen wordpress seite mit weniger als 10000 besuchern pro tag wirst du wahrscheinlich keinen unterschied merken.

[nerd]

Wenn Du so eine Meldung bekommst, dann ist das ein unmittelbares Indiz dafür, dass Du es in Sachen CSS übertrieben hast.

Mir sieht es eher danach aus dass der anbieter sein wordpress plugin kostenlos zur verfuegung stellt, nur um damit seine voellig ueberteuerte dienstleistung (CDN was 1000x mehr kostet als jeder andere anbieter) darueber zu bewerben.
Wahrscheinlich wird das plugin auch dann den $8/monat plan empfehlen, wenn man auf der ganzen seite keinen einzigen css style definiert hat...

[supervisior]

Wenn Du so eine Meldung bekommst, dann ist das ein unmittelbares Indiz dafür, dass Du es in Sachen CSS übertrieben hast.

Mir sieht es eher danach aus dass der anbieter sein wordpress plugin kostenlos zur verfuegung stellt, nur um damit seine voellig ueberteuerte dienstleistung (CDN was 1000x mehr kostet als jeder andere anbieter) darueber zu bewerben.
Wahrscheinlich wird das plugin auch dann den $8/monat plan empfehlen, wenn man auf der ganzen seite keinen einzigen css style definiert hat...

Womit Du sicherlich nicht unrecht hast. Andererseits anbieten kann er es ja. Wer das Angebot annimmt, ist halt selber schuld.

[/Affilitiv/]

@/Affilitiv/

Um Dich nicht dumm oder sagen wir mal unwissend weiterleben zu lassen.

das Setzen von CSS Formatierungen als Inline Definition

CSS im HTML macht deen Code größer = längere Ladezeit, und zwar bei jedem Load

CSS in extra Datei, wird einmal geladen, danach aus dem Cache


es wurde mal gesagt das man Grafiken als inline einbauen soll ....
... hab da mal eine Seite gesehen die hatte das Favivon als inlineGrafik, durch dieses HAXadezimalisieren wird de Dtenstrom etwa 50% größer, und das bei jedem LOAD da nicht gecacht wird

Wenn Google solchen Mist mit besserem Ranking belohnt, dannmacht Google absoluten Mist

[nerd]

Bei kleinen icons macht das schon sinn, das es prinzipiell schneller ist eine einzige grosse datei mit inline-grafiken zu laden als viele kleine dateien. Eine verbindung aufmachen, datei anfordern und warten bis diese uebertragen ist dauert schon mindestens ~100ms (wenn der browserqueue frei ist, nicht sowieso noch 100 andere sachen uebertragen werden sollem), und in der zeit hat man den 25% overhead in dateitgroesseschon oft mit uebertragen.

[supervisior]

CSS im HTML macht deen Code größer = längere Ladezeit, und zwar bei jedem Load

CSS in extra Datei, wird einmal geladen, danach aus dem Cache


es wurde mal gesagt das man Grafiken als inline einbauen soll ....
... hab da mal eine Seite gesehen die hatte das Favivon als inlineGrafik, durch dieses HAXadezimalisieren wird de Dtenstrom etwa 50% größer, und das bei jedem LOAD da nicht gecacht wird

Wenn Google solchen Mist mit besserem Ranking belohnt, dannmacht Google absoluten Mist

Vom Mars aus betrachtet und mit einer Brille für Kurzsichtige auf der Nase hast recht, aber Dein vermeintliches Wissen darüber hat Mittelalter Charakter, wobei das schon im Mittelalter falsch war. Die Kriterien, die Pagespeed für kritisch hält, mögen an mehreren Stellen fragwürdig zu sein und sind sie auch, aber im konkreten Fall bezogen auf zu viel CSS in zu vielen Dateien und die womöglich noch per CSS includiert, müsste man Dich eigentlich an die Tafel stellen und 100.000 x schreiben lassen: "Ich @/Affilitiv/, erzähle nie wieder so einen Quatsch."

Lass es bitte sein weiterhin so einen Quatsch zu erzählen.

[/Affilitiv/]

datei anfordern und warten bis diese uebertragen ist dauert schon mindestens ~100ms (wenn der browserqueue frei ist, nicht sowieso noch 100 andere sachen uebertragen werden sollem),

Wieviele klagen das das Netz (das schneller ist wie früher) soooooo langsam ist?

blöderweise hab ich hier nur IDSN Speed (dazu wohl noch ein Problem mit dieser BrowserQue)
wenn ich den Bookmark, aufrufe
youtube.com/results?search_query=meibritt+illner&sp=CAI%253D
habe ich Glück wenn nach 30 Minuten was zu sehen ist

aber im konkreten Fall bezogen auf zu viel CSS in zu vielen Dateien

also, ich hab immer nur eine CSS

Die Kriterien, die Pagespeed für kritisch hält,

mögen an mehreren Stellen fragwürdig zu sein
und sind sie auch,

Du weisst, das das allgemeine Handeln falsch ist
Du machst es trotzdem

Dein vermeintliches Wissen darüber hat Mittelalter Charakter,

wobei das schon im Mittelalter falsch war

im Mittelater sprach keiner von dieser Knickfallte ....

hatte wegen diesem Fred hier nach Critischem CSS gegoogelt = nachleden einer css blockiert die Renderengine weil die nicht weiss ob die TAGS verändert wurden

Code: Alles auswählen

<head
.... style.css
</head
<body
<TAG style="machmal ohne in die CSS zu schauen"
---- Knickfalte---
<TAG class="xyz"
</body

woher weis die Renderengine das im externen css kein allgeneiner Style für den Tag oberhalb der Knickfalte drin ist?

oder ist das ein Mittelalter Problem, weil die HeaderCSS erst via Ajax nach dem Scrollen kommt .... darum funktioniert bei mir Google nicht? dort ist quasie garkein html mehr zu sehen, nur noch JS also Ajax

datei anfordern und warten bis diese uebertragen ist dauert schon mindestens ~100ms (wenn der browserqueue frei ist, nicht sowieso noch 100 andere sachen uebertragen werden sollem),

Wenn alle an ihrem Auto 666 Anhänger haben .... dann ist die Autobahn überlastet
dann muß man die Autobahn vergrößern und die Anhänger in den Kofferraum einbauen(dadurch wird das Auto länger, also der Platzverbrach auf der Autobahn bleibt gleich)

wäe es nicht 100% besser mal eine Millisekunde in die Kupplung zu investrieren und die Anhänger auf dem Parkplatz zu lassen?

Lass es bitte sein weiterhin so einen Quatsch zu erzählen.

Erklär mir mal ganz genau wo der Quatsch ist,
ich bin lernfähig
es sagte mal ein Schlauer Kopf "ich weiss das ich nichts weiss"
ich bin in der Lage meine Meinung zu ändern

Andere blockieren da "ich mach das schon richig so"
wink mit dem Tannenbaum .....
Multithriating .... 50.000 mal mit einer URL
oder 50.000 URLs mit einem Aufruf ..... Gruß an Hanzo

[/Affilitiv/]

datei anfordern und warten
bis diese uebertragen ist dauert

schon mindestens ~100ms (wenn der browserqueue frei ist, nicht sowieso noch 100 andere sachen uebertragen werden sollem)

wenn ich an meinen PHP sende, und der etwas größer ist, dann kommt das vielleicht nicht an

wenn ich viele Googlefenster (oder andere mit Ajax Zeug) offen haben
dann fahren da quasie die Anhänger auf der Autohan ....
... Tabs zu und dann klappt es vielleiicht doch mit dem Post



back to NEUzeit
wenn der html verkleinert wird, und dazu ein Vielfaches an Ajax kommt, dann ist das nicht weniger sondern viel mehr und braucht viel länger

im Mittelalter kamm die html+css und dann gabs Mittagessen
Heute ruft man beim Liefarndo an
der faxt an die Pizzaria
die fragt bei der Schufa ob ich Geld habe
die Schufa fragt bei Lemanbrother was es am Samstag zu essen gibt
Lemanbrother schickt mir ein Verbraucherkredit Angebot
die Pizzara bestellt bei Amazon die Pizza
Amazon schaut ob sie eine Provision von Leman bekommen haben
Lieferando macht einen Termin beim Tüv
..... usw usw
schöne NEUzeit