Kombination von Stylesheets

nulldrei · March 13, 2016, 8:41pm

Hallo und guten Abend,

ich möchte gerne ein paar Fragen zur Performance-Optimierung klären.
Wir haben einige Module im Shop (CE, v4.9.1) nachinstalliert, von denen wiederum einige ihre eigene css-Datei mitbringen.

Da ich ohnehin dabei bin, die oxid.css zu entschlacken und zu optimieren (indem ich z.B. Abschnitte von Funktionalitäten, die wir nicht nutzen, entferne), stellt sich mir die Frage, ob es sinnvoll ist, die anderen css-Dateien in die oxid.css zu integrieren, damit nur noch eine einzige Datei vom Server geladen wird.

In dem Zusammenhang zunächst eine technische Frage.
Die css-Dateien werden innerhalb der Module in der jeweils passenden tpl-Datei üblicherweise wie folgt eingebunden:

[{oxstyle include=$oViewConf->getModuleUrl('(a)_Foldername_des_Moduls_im_oxid_modules_Folder',"Pfad_von_(a)_zur_css-Datei_des_Moduls")}]

Reicht es aus, das nach Einfügen des Modul-Stylesheets in die oxid-css auf folgende Weise zu ändern, oder muss noch etwas an anderen Stellen geändert werden?

[{oxstyle include=$oViewConf->getModuleUrl('(a)_Foldername_des_Moduls_im_oxid_modules_Folder',"Pfad_von_(a)_zur_oxid.css_Datei")}]

In diesem Zusammenhang habe ich noch zwei weitere Fragen.

Hat es einen Vorteil, die Stylesheet-Informationen getrennt zu lassen bzw. kann ich mir unerwünschte Seiteneffekte einhandeln, wenn ich die Stylesheets zusammenführe (immer vorausgesetzt, dass ich dabei keinen Murks produziere)?
Sind Aufwand und Nutzen in einem vertretbaren Verhältnis zueinander?

Wenn sich die Performance nur so marginal verbessert, dass sich weder die Usability noch das Suchmaschinenranking ändert, dann muss man sich die Zeit dafür nicht ans Bein binden.

Danke und Gruß,
Steffen

OXID-Design · March 13, 2016, 8:57pm

Hallo Steffen,
mach dir darüber überhaupt keine Gedanken. Wenn es möglich ist installiere mod_pagespeed vom Google und erweitere deinen .htaccess Datei wie folgt:

Für PHP 5.3 oder älter:


## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 year"
</IfModule>
## EXPIRES CACHING ##

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
</FilesMatch>

<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>

# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
</IfModule>

Für die PHP Version ab 5.4


<ifmodule mod_expires.c>
<Files ~ "\.(jpe?g|png|gif|css|js|woff)$">
	ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"
    FileETag None
    <IfModule mod_headers.c>
        Header append Cache-Control "public"
        Header unset ETag
    </IfModule>
</Files>
</ifmodule>

<IfModule mod_headers.c>
<FilesMatch "\.(gif|png|jpg|jpeg|pdf|ico)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>


<IfModule filter_module> 

FilterDeclare   COMPRESS
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'text/html'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'text/css'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'text/plain'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'text/xml'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'text/x-component'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'application/javascript'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'application/json'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'application/xml'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'application/xhtml+xml'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'application/rss+xml'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'application/atom+xml'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'application/vnd.ms-fontobject'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'image/svg+xml'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'image/x-icon'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'application/x-font-ttf'"
      FilterProvider  COMPRESS  DEFLATE "%{CONTENT_TYPE} = 'font/opentype'"
      FilterChain     COMPRESS
      FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
</IfModule>
<IfModule !mod_filter.c>
  # Legacy versions of Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
  AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>

vanilla_thunder · March 13, 2016, 10:23pm

Ganz objektiv kann dir das eigentlich niemand beantworten, dafür fehlen ganz einfach ne alle Infos.
Ob sich der Aufwand lohnt, hängt von mehreren Faktoren ab.
Z:B: ob es 2 Module und insgesamt 3 CSS Dateien gibt, oder 15 Module und 25 CSS Dateien.
Wie sehr sich die CSS Dateien in der Ladezeit der Seite bemerkbar machen.
Ob Cache header da sind, auch wenns 25 Dateien sind, wenn sie im Cache sind, dann ist das Problem eh nicht mehr da.
Aber bevor du an CSS Dateien gehst, würde ich zuerst die Zeilenumbrücke und Leerzeichen aus dem HTML entfernen, hat bei uns locker 30% ausgemacht.

Ob es Wechselwirkungen gibt, kann auch niemand versprechen. Je mehr Module es gibt und je mehr das Template von Azure abweicht, desto wahrscheinlicher ist es. Da muss man probieren und schauen.

nulldrei · March 14, 2016, 10:40am

Danke für die schnellen Antworten!

@OXID-Design: Das Stichwort mod_pagespeed ist ein guter Tipp.
Allerdings traue ich Freund Google grundsätzlich nicht über den Weg.
Man kommt nicht wirklich um G. rum, aber man sollte sich auch nur soweit davon abhängig machen wie unumgänglich.
Neben solch Prinzipienreiterei aber noch ein praktischer Punkt: Setzt die Installation eines Zusatzmoduls zum Apachen nicht voraus, dass man ein Hostingpaket hat, welches das zulässt?
Ich bin mir ziemlich sicher, dass das bei uns ggw. nicht der Fall ist.

@vanilla thunder: Der ausgelieferte HTML-Code wird ja mittels PHP erzeugt, allerdings nach meinem oberflächlichen Verständnis in einer größeren Anzahl verschiedener PHP-Dateien.
Dann wäre es sicher nicht effizient, dort jeweils hineinzugehen, um etwaige Optimierungspotenziale auszuschöpfen. Gibt es anstatt dessen einen sinnvolleren Ansatz?

Ungeachtet dessen wäre es prima, wenn jemand ggf. noch etwas dazu sagen könnte, ob mein im Eingangspost skizzierter Weg des Kombinierens von CSS-Files sauber ist oder ob ich dabei etwas übersehen habe .

Danke und eine nette Woche,
Steffen

OXID-Design · March 14, 2016, 10:56am

Hallo Steffen,
Google macht das nicht un-eigensinnig. Da haben Entwickler vom Google etwas wunderbares geschrieben noch dazu kostenlos. Wenn du dich vom Google nicht abhängig machen möchtest dann eröffne kein Online-Shop, das ist wirklich mein ernst.

Grüße
Rafig

nulldrei · March 14, 2016, 11:07am

Hmja, ich sehe das Problem…
Die Welt ist voller saurer Äpfel, in manche muss man auch mal hinein beißen.
Ich schaue bei nächstbester Gelegenheit, was in unserem Hostingpaket erlaubt ist bzw. wie wir ggf. upgraden müssten, damit ein Aufbohren des Apachen möglich wird.

vanilla_thunder · March 14, 2016, 11:23am

[QUOTE=nulldrei;178664]Gibt es anstatt dessen einen sinnvolleren Ansatz?[/QUOTE]

leere mal den Browser Cache, öffne das Netzwerk-Panel in den Browser-Dev-Tools Fenster und lade die Seite (damit du aktuelle Werte zum späteren Vergleich hast)
geh mal in die application/views/bla bla bla/layout/base.tpl
füge etwa in der Mitte “[{strip}]” vor “<!DOCTYPE HTML>” und ganz am Ende “[{/strip}]” ein.
tmp/ leeren
Browser Cache leeren, neuen Tab aufmachen, Geschwindigkeits-Tool öffnen, Seite laden
und dann musst du die Größe von index.php vergleichen bzw es könnte auch als “document” oder “www.deine-seite.de” aufgeführt sein

nulldrei · March 15, 2016, 11:34am

Hallo, zunächst mal vielen Dank für die Hilfe!

Ein kurzes Update: Ich hatte gestern Abend versucht, das umzusetzen, aber möglicherweise habe ich ein Detail übersehen.
Jedenfalls unterschieden sich die Prä- und Post-Change-Versionen der Startseite nur relativ marginal (d.h. die grooßen Lücken im Quellcode sind nach wie vor existent), angesichts der fortgeschrittenen Zeit habe ich den Versuch aber zunächst abgebrochen.

Wenn es dazu Neues gibt, werde ich das hier posten.

Gruß,
Steffen