Hallo,
ist es möglich je nach Seite ein spezifisches CSS zu laden?
Man könnte doch einfach eine Abfrage in der base.tpl machen:
Wenn Produktseite dann ***.css.
Wenn Kategorieseite dann ***.css
Habt ihr eine Ahnung wie die Abfrage lautet, um zu checken, ob man sich auf der Start-, Produkt- oder Kategorieseite befindet?
Danke euch.
du kannst die CSS Dateien einfach in dem Template der jeweiligen Seite einbauen, so wie es mit einem JS Script hier gemacht wurde: https://github.com/OXID-eSales/flow_theme/blob/master/tpl/page/shop/start.tpl#L5
(in deinem Fall wäre das oxstyle statt oxscript)
Danke für deine Antwort.
Das ist bei mir leider nicht zielführend, da ich versuche, die CSS-Datei anstelle der style.css zu laden. Ich möchte verhindern, dass die riesige CSS-Datei geladen wird, wobei 70% des Inhalts nicht benötigt wird.
Diese Datei wird nur ein einziges mal vom Server geladen und kommt danach immer aus dem Browser Cache.
Nach deinem Szenario würde der Kunde sowieso die große Datei laden, weil er irgendwann auf einer der anderen Seiten landet, und auch noch zusätzlich eine andere, kleinere Datei für bestimmte Seiten laden. So muss er im Endeffekt mehr laden, als vorher.
Gut zu wissen.
Was hast du denn für einen Ratschlag, um in Hinsicht auf Ladezeiten nicht benutzte CSS Styles zu entfernen?
Jetzt kommt es darauf an, ob dein Server HTTP/2 kann, oder nicht.
Mit HTTP/2 könntest du mehrere Dateien gleichzeitig laden. Beispielsweise im Head lädst du nur Styles für “Above the fold (atf)” und im Footer lädst du styles die erst ein paar Millisekunden später gebraucht werden. ATF kann auch inline mit einem Style-Tag geladen werden.
Je nach Verbindung können drei kleine Dateien schneller geladen werden als eine Große, aber grundsätzlich kommt es auch darauf an, von welcher Dateimenge hier überhaupt geredet wird und ob nicht evt. ganze Codeblöcke entfallen können - wie zum Beispiel ungenutzte Plugin-Styles.
Edit: Wobei das nicht von http/2 abhängt, dass sollte in beiden Protokollen umgesetzt werden. Hier noch ein nützliches Tool dafür https://www.sitelocity.com/critical-path-css-generator
Um die Menge von css Code wirklich zu reduzieren, müsste man es wohl komplett neu kompilieren und komplett unbenutzte Teile weglassen. Ansonsten minify und gzip einstellen.
Es gibt auch Ansätze, die css in zwei Teile aufzuteilen:
Kritisch, was sofort für die Seite benötigt wird (grid, Layout)
Und unwichtigen css, das zu einem späteren Zeitpunkt nachgeladen wird.
bevor man above the fold angeht kann man tausend andere sachen optimieren… das ist den auwand einfach nicht wert.