Inline Small CSS

[Hexe_Mol]

div. webseiten, auf denen man die geschwindigkeit seines forums testen kann, sagen mir folgendes:

Code: Alles auswählen

The following external resources have small response bodies. Inlining the response in HTML can reduce blocking of page rendering.

http://naschiforum.de/ should inline the following small resources:

    http://naschiforum.de/ext/alex75/nocustprof/styles/prosilver/theme/nocustprof.css?assets_version=106
    http://naschiforum.de/ext/alex75/redtitlenewpost/styles/prosilver/theme/redtext.css?assets_version=106
    http://naschiforum.de/ext/alex75/smiliesscrollbox/styles/prosilver/theme/smiley.css?assets_version=106
    http://naschiforum.de/ext/crizzo/aboutus/styles/prosilver/theme/aboutus.css?assets_version=106
    http://naschiforum.de/ext/kirk/on_and_offlinestatus/styles/all/theme/on_and_offlinestatus.css?assets_version=106
    http://naschiforum.de/ext/phpbb/boardrules/styles/latte/theme/boardrules_common.css?assets_version=106

ich habe mir jetzt mal eine der erwähnten css als beispiel herausgepickt, das hier ist der gesamte inhalt:

Code: Alles auswählen

.profile-custom-field{
      display: none !important
	  }

eingebunden ist sie in der overall_header_head_append.html der erweiterung

Code: Alles auswählen

<!-- IF S_IS_BOT or not S_REGISTERED_USER --><!-- INCLUDECSS @alex75_nocustprof/nocustprof.css --><!-- ENDIF -->

wie muss ich die html nun umbauen, um die css einzubinden und nicht mehr extern zu laden? (hier fehlt ein smilie, der sich ratlos am kopf kratzt....)

[Crizzo]

Hi,

wie muss ich die html nun umbauen, um die css einzubinden und nicht mehr extern zu laden? (hier fehlt ein smilie, der sich ratlos am kopf kratzt....)

die Info von deinem Tool ist falsch. Die CSS-Dateien sind, wie man an der URL deutlich sieht, alle von deinem Forum. Da wird nur ein ?assets_version=106 angehängt, was ein "Problem" mit dem Browser-Cache behebt.

Wenn du das nicht magst, musst du einfach bei den CSS-Dateien diese Endung löschen. Siehe overall_header.html

Grüße

[Hexe_Mol]

danke für dein feedback.
ich glaube, "extern laden" ist einfach unglücklich ausgedrückt.
natürlich sind das alles css-dateien von meinem forum (bzw. von erweiterungen meines forums). aber es sind externe (also separate) .css-dateien und kein in die html-dateien eingebundener css-code.... der vorschlag des tools (bzw. div. tools, unter anderem gtmetrix.com) ist ja nun, aus einer separaten css-datei den entsprechenden befehl in die html einzubinden, weil es so wenig ist.
daher meine frage, wie das in einer html aussehen muss....

weder in der overall_header.html meines styles (latte von arty) noch in der des übergeordneten styles (prosilver) sind diese css-dateien verlinkt, was mir auch logisch erscheint, da es ja css-dateien von erweiterungen sind.
den inhalt der overall_header_head_append.html aus der entsprechenden erweiterung, habe ich ja oben schon gepostet, dieser besteht aus nur der einen zeile, also keine möglichkeit, dort ein

Code: Alles auswählen

?assets_version=106

zu löschen, weil es darin gar nicht vorkommt.

[gn#36]

Du könntest die besagte Datei in den jeweiligen Erweiterungen so umbauen, dass sie den CSS Code enthält statt die Dateien per includecss einzubinden.

In deinem Beispiel müsstest du <!-- INCLUDECSS @alex75_nocustprof/nocustprof.css --> ersetzen durch den Inhalt der an der Stelle eingebundenen CSS Datei (natürlich korrekt verpackt in <style type="text/css"> und </style> Sämtliche anderen Dinge sollten dabei erhalten bleiben, insbesondere also in deinem Beispiel <!-- IF S_IS_BOT or not S_REGISTERED_USER --> sowie <!-- ENDIF -->.

Das bedeutet für dich dann natürlich anschließend, dass du das beim Update der Erweiterungen ggf. noch mal machen musst. Wenn du es schon änderst kannst du daher im Grunde auch einfach alle davon in einer gemeinsamen CSS Datei zusammenfassen, die du dann 1x einbindest. Dann brauchst du beim Update der Extensions nur die Event-Dateien löschen, die den INCLUDECSS Befehl enthalten (angenommen, es hat sich an dem Teil nichts verändert).

Übrigens wäre ein "externer" Server für das nachladen von solchen Dateien ggf. sogar vorteilhaft: In der Regel senden Browser mehrere Anfragen an sehr viele Server gleichzeitig, aber beschränken die Zahl, die sie an den selben Server schicken. Sehr viele große Seiten haben daher z.B. getrennte Domains für Bilder und Textdaten.

[Hexe_Mol]

mit einem fleissigen einsatz in copy-paste hat das geklappt, dankeschön!