[theme_plus] Verschiedene Fragen zur Einrichtung & PageSpeed-Optimierung

Druckbare Version

06.04.2016, 09:49
Webstylerin

[theme_plus] Verschiedene Fragen zur Einrichtung & PageSpeed-Optimierung

Hallöchen zusammen,

ich setze nun zum ersten mal theme_plus für die PageSpeed-Optimierung ein und habe ein paar Fragen dazu:

1) Mir scheint es, als binden verschiedene Browser verschiedene xxx-collection.css ein. Das Problem dabei ist, dass eine Version der collection.css die internen Contao CSS (reset, layout-builder, responsive layout) am Anfang eingebunden hat, die andere nicht. Mein FF bspw. nimmt die vollständige, Opera die ohne die Contao-CSS, was natürlich zu Anzeigefehlern führt. Lustigerweise ist das nur beim Layout der Startseite (hat ein extra Seitenlayout in Contao) der Fall. Kann sich das jemand erklären? Bis ich eine Lösung habe überschreibe ich die unvollständige Version mit der vollständigen, aber das ist keine Dauerlösung.

2) Eine Abhängigkeit von theme_plus ist "nur" eine Entwicklerversion. ikimea/browser dev-master müsste das sein. Ist ja eigentlich kein Problem, ich hab aber einige Installationen mit denen der Composer nur funktioniert wenn ich die minimale Stabilität erhöhe (RC oder gar Stable). Bei solchen Installationen würde theme_plus dann raus fallen. Ist das nur vorübergehend eine Entwicklungsversion oder kann man schon sagen, dass es eine der Erweiterungen ist, die ewig auf der aktuellen Version sitzen bleibt?

3) Nun mal eine eigentlich PageSpeed-Frage. Ich habe theme_plus installiert um CSS-Dateien automatisch zu minimieren und zu komprimieren. Nur irgendwie klappt das nicht so recht. Meine eigene CSS ist als externe CSS via theme_plus-CSS-Einbindung eingefügt, ich habe einen Filter (CSS Min (CSS) unter Assetic angelegt und in bei der CSS unter Assetic-Einstellungen eingetragen. Hab ich falsch gedacht? Fehlt da noch etwas?

4) GZip-Komprimierung ist auf dem Server aktiv, aber die collection.js wird nicht komprimiert. Die CSS anscheinend schon, da meckert er nicht mehr. Warum wird die .js nicht komprimiert?

Sonnige Grüße
Nicole
06.04.2016, 09:54
Spooky

Zitat:

Zitat von Webstylerin

1) Mir scheint es, als binden verschiedene Browser verschiedene xxx-collection.css ein. Das Problem dabei ist, dass eine Version der collection.css die internen Contao CSS (reset, layout-builder, responsive layout) am Anfang eingebunden hat, die andere nicht. Mein FF bspw. nimmt die vollständige, Opera die ohne die Contao-CSS, was natürlich zu Anzeigefehlern führt. Lustigerweise ist das nur beim Layout der Startseite (hat ein extra Seitenlayout in Contao) der Fall. Kann sich das jemand erklären? Bis ich eine Lösung habe überschreibe ich die unvollständige Version mit der vollständigen, aber das ist keine Dauerlösung.

Hast du den Seitencache aktiviert? Wenn ja, dann könnte es dieses Problem sein: https://github.com/netzmacht/contao-...plus/issues/83

Zitat:

Zitat von Webstylerin

3) Nun mal eine eigentlich PageSpeed-Frage. Ich habe theme_plus installiert um CSS-Dateien automatisch zu minimieren und zu komprimieren. Nur irgendwie klappt das nicht so recht. Meine eigene CSS ist als externe CSS via theme_plus-CSS-Einbindung eingefügt, ich habe einen Filter (CSS Min (CSS) unter Assetic angelegt und in bei der CSS unter Assetic-Einstellungen eingetragen. Hab ich falsch gedacht? Fehlt da noch etwas?

Du musst noch mrclay/minify oder natxet/CssMin in deiner composer.json hinzufügen.

Zitat:

Zitat von Webstylerin

4) GZip-Komprimierung ist auf dem Server aktiv, aber die collection.js wird nicht komprimiert. Die CSS anscheinend schon, da meckert er nicht mehr. Warum wird die .js nicht komprimiert?

Poste einen Link zur Seite und deine .htaccess
06.04.2016, 10:12
Webstylerin

Zitat:

Zitat von Spooky

Hast du den Seitencache aktiviert? Wenn ja, dann könnte es dieses Problem sein: https://github.com/netzmacht/contao-...plus/issues/83

Ja, hab ich. Gerade in Bezug auf die Ladegeschwindigkeit ist das doch ein wichtiger Aspekt. :/ D.h. ich kann entweder theme_plus einsetzen ODER den Cache?

Zitat:

Zitat von Spooky

Du musst noch mrclay/minify oder natxet/CssMin in deiner composer.json hinzufügen.

Okay, werd ich gleich machen.

Zitat:

Zitat von Spooky

Poste einen Link zur Seite und deine .htaccess

Bekommst gleich ne PN von mir.

LG
Nicole
06.04.2016, 10:13
Spooky

Zitat:

Zitat von Webstylerin

Ja, hab ich. Gerade in Bezug auf die Ladegeschwindigkeit ist das doch ein wichtiger Aspekt. :/ D.h. ich kann entweder theme_plus einsetzen ODER den Cache?

Naja, teste zuerst mal, ob das Problem nicht mehr existiert, wenn du den Seitencache deaktivierst. Wenn nicht, dann liegt das Problem doch wo anders.
06.04.2016, 10:23
Spooky

Auf deiner Seite wird keine Ressource vom Server gzip komprimiert gesendet. Der Grund dafür ist, dass die .htaccess Dateien von Contao auf deinem Server nicht funktionieren, weil nginx statt Apache zum Einsatz kommt. Du musst deinen nginx Server entsprechend selbst konfigurieren.
06.04.2016, 10:25
Webstylerin

Zitat:

Zitat von Spooky

Naja, teste zuerst mal, ob das Problem nicht mehr existiert, wenn du den Seitencache deaktivierst. Wenn nicht, dann liegt das Problem doch wo anders.

"Internen Cache umgehen" ist aktiviert, per Systemwartung die Caches geleert, selbes Problem.

FF lädt die richtige Datei, Opera die unvollständige. Bei den Unterseiten kann ich durch wiederholtes Laden (mit gedrücker Shift-Taste) im Opera die vollständige CSS bekommen, auf der Startseite ändert sich nichts.

Es werden immer wieder neue Versionen der collection.css generiert. Ist das normal?

EDIT: Du meinst wohl eher den Cache-Modus. Der Stand auf Browser- & Servercache. Den hab ich jetzt deaktiviert, nun ist das Problem weg.
06.04.2016, 10:28
Webstylerin

Zitat:

Zitat von Spooky

Auf deiner Seite wird keine Ressource vom Server gzip komprimiert gesendet. Der Grund dafür ist, dass die .htaccess Dateien von Contao auf deinem Server nicht funktionieren, weil nginx statt Apache zum Einsatz kommt. Du musst deinen nginx Server entsprechend selbst konfigurieren.

Wie in 98% der Fälle bei mir kann ich am Server nicht wirklich was ändern. Laut http://checkgzipcompression.com/ ist die Kompression aber aktiv und https://gtmetrix.com meckert nur bei den beiden JS & CSS-Files. Ich fühle mich verwirrt. :)
06.04.2016, 10:34
Spooky
Zitat:

Zitat von Webstylerin

"Internen Cache umgehen" ist aktiviert, per Systemwartung die Caches geleert, selbes Problem.

Nein, der Seitencache, nicht der interne Cache. Um zu testen ob es am Seitencache liegt, musst du den Seitencache deaktivieren. Und dann nochmal testen.

Zitat:

Zitat von Webstylerin

Wie in 98% der Fälle bei mir kann ich am Server nicht wirklich was ändern. Laut http://checkgzipcompression.com/ ist die Kompression aber aktiv und https://gtmetrix.com meckert nur bei den beiden JS & CSS-Files. Ich fühle mich verwirrt. :)

Sieh' dir die Response Headers selbst an:
- /assets/css/89ac9774-collection.css
  
  Code:
  
  Accept-Ranges: bytes Cache-Control: max-age=604800, public Connection: keep-alive Content-Length: 11906 Content-Type: text/css Date: Wed, 06 Apr 2016 09:30:41 GMT Etag: "5704d740-2e82" Last-Modified: Wed, 06 Apr 2016 09:30:40 GMT Server: nginx X-Powered-By: PleskLin
- /assets/js/fb9f84f2-collection.js
  
  Code:
  
  Accept-Ranges: bytes Cache-Control: max-age=604800, public Connection: keep-alive Content-Length: 57891 Content-Type: application/javascript Date: Wed, 06 Apr 2016 09:30:41 GMT Etag: "5704d45e-e223" Last-Modified: Wed, 06 Apr 2016 09:18:22 GMT Server: nginx X-Powered-By: PleskLin
- /assets/images/9/logo-ed0dba39.png
  
  Code:
  
  Accept-Ranges: bytes Cache-Control: max-age=604800, public Connection: keep-alive Content-Length: 6023 Content-Type: image/png Date: Wed, 06 Apr 2016 09:30:42 GMT Etag: "5704bd94-1787" Last-Modified: Wed, 06 Apr 2016 07:41:08 GMT Server: nginx X-Powered-By: PleskLin
- …
Die dynamisch generierten HTML Seiten werden aber komprimiert vom Server gesendet:
- / (Startseite)
  
  Code:
  
  Cache-Control: public, max-age=86400 Connection: keep-alive Content-Encoding: gzip Content-Length: 6357 Content-Type: text/html; charset=utf-8 Date: Wed, 06 Apr 2016 09:30:40 GMT Expires: Thu, 07 Apr 2016 09:30:40 GMT Last-Modified: Wed, 06 Apr 2016 09:30:40 GMT Pragma: public Server: nginx Set-Cookie: … Vary: User-Agent,Accept-Encoding X-Powered-By: PHP/5.6.8, PleskLin
- /leistungen/sicherheitsdienst.html
  
  Code:
  
  Cache-Control: public, max-age=86400 Connection: keep-alive Content-Encoding: gzip Content-Length: 3676 Content-Type: text/html; charset=utf-8 Date: Wed, 06 Apr 2016 09:33:25 GMT Expires: Thu, 07 Apr 2016 09:33:25 GMT Last-Modified: Wed, 06 Apr 2016 09:33:25 GMT Pragma: public Server: nginx Set-Cookie: … Vary: User-Agent,Accept-Encoding X-Powered-By: PHP/5.6.8, PleskLin
Wenn auf einem Hoster nginx im Einsatz ist, dann sollte es in den meisten Fällen auch umfangreiche Optionen geben diesen zu konfigurieren. Vielleicht hast du aber auch die Möglichkeit auf Apache zu wechseln (da Plesk zum Einsatz kommt).

Meine Vermutung ist aber, dass der Hoster den nginx so konfiguriert hat, dass er auch die .htaccess files ausliest (da zB

Code:

<IfModule !mod_authz_core.c> Order deny,allow Deny from all </IfModule> <IfModule mod_authz_core.c> Require all denied </IfModule>

in den diversen Unterordnern von Contao eine Auswirkung zu haben scheint). Nur funktioniert da unter Umständen nicht alles, bspw. dieser Teil der .htaccess:

Code:

## # Set the proper MIME types # @see https://github.com/h5bp/html5-boilerplate ## <IfModule mod_mime.c> AddType application/javascript js jsonp AddType application/json json AddType audio/ogg oga ogg AddType audio/mp4 m4a f4a f4b AddType video/ogg ogv AddType video/mp4 mp4 m4v f4v f4p AddType video/webm webm AddType video/x-flv flv AddType image/svg+xml svg svgz AddEncoding gzip svgz AddType application/vnd.ms-fontobject eot AddType application/x-font-ttf ttf ttc AddType font/opentype otf AddType application/x-font-woff woff woff2 AddType image/x-icon ico AddType image/webp webp AddType text/cache-manifest appcache manifest AddType text/x-component htc AddType application/xml rss atom xml rdf AddType application/x-web-app-manifest+json webapp AddType text/x-vcard vcf AddType application/x-shockwave-flash swf </IfModule> ## # Gzip compression # @see https://github.com/h5bp/html5-boilerplate ## <IfModule mod_deflate.c> <IfModule mod_filter.c> 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/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype </IfModule> </IfModule>

Dieser Teile wäre für die automatische Komprimierung zuständig.
06.04.2016, 10:54
Webstylerin

Zitat:

Zitat von Spooky

Nein, der Seitencache, nicht der interne Cache. Um zu testen ob es am Seitencache liegt, musst du den Seitencache deaktivieren. Und dann nochmal testen.

Ja, hab ich mittlerweile auch gemerkt, dass ich beim falschen Cache war. :) Mit deaktivierten Cache ist das Problem weg. Ich würde aber sagen ein aktiver Cache bringt mehr zur Geschwindigkeit als kombinierte/komprimierte/minimierte JS & CSS-Dateien, oder? Im Endeffekt macht es also keinen Sinn für mich theme_plus zu nutzen. :/

Zitat:

Zitat von Spooky

Sieh' dir die Response Headers selbst an

Also HTML-Dateien und Bilder werden "gegzipped", CSS & JS nicht. Das liegt an der Konfiguration des Server, hier müsste die Komprimierung für JS & CSS-Dateien aktiviert werden. Hab ich das richtig verstanden?

Zitat:

Zitat von Spooky

Wenn auf einem Hoster nginx im Einsatz ist, dann sollte es in den meisten Fällen auch umfangreiche Optionen geben diesen zu konfigurieren. Vielleicht hast du aber auch die Möglichkeit auf Apache zu wechseln (da Plesk zum Einsatz kommt).

Ich hab in diesem Fall keinerlei Zugang zum Server, ich könnte Änderungswünsche an den Kunden weitergeben. Hier wäre ein Wechsel auf einen Apache-Server zum empfehlen alternativ die richtige Konfiguration von nginx?

LG & mal wieder 1000 Dank!
Nicole
06.04.2016, 11:03
Spooky

Im Prinzip ja zu allem ;). Du kannst dir ja auch mal contao-supertheme ansehen, da habe ich auch einen Feature Request für CSSMin und JSMin gemacht (momentan kann man mit contao-supertheme anscheinend wenn dann nur mit yui minifyen lassen).