Frage zu Minify und andere

Druckbare Version

23.03.2014, 22:21
Sabine14

Frage zu Minify und andere

Hallo, Fragen an die Experten,

ich versuche gerade mich mit von ThemePlus und Assetic näher vertraut zu machen.

Ziel: meiner lahmenden Webseite Beine zu machen.

Ich stelle unten lauter doofe Anfängerfragen, sorry, aber ich bekomme es nicht hin.

Contao 3.2.8
http://goo.gl/RPTisu

1.Frage:

Ich habe über die Composer Paketverwaltung mrclay/minify installiert und eine Filter-Chain aus cssmin und css rewrite zusammengestellt, die ich im Layout aktivieren möchte.
Folgender Fehler tritt dabei auf:

Fatal error: Class 'CssMin' not found in /var/www/virtual/queliman/html/system/modules/assetic/classes/vendor/kriswallsmith/assetic/src/Assetic/Filter/CssMinFilter.php on line 72

die dazu gehörige Zeile
$asset->setContent(\CssMin::minify($asset->getContent(), $filters, $plugins));

Wurde das Problem nicht behoben? Was muss ich machen, um Minify zum Laufen zu bekommen?

2. Frage:
ich habe über Theme Plus meine Style-Sheets über assets/css eingebunden - nun muss ich die Media-Queries unterbringen -
die Sheets sind im Contao Editor erstellt, finde ich auch ganz gut so, aber dieser bindet ja die Media-Queries anders ein?
Einfach direkt ins Style-Sheet schreiben?
Ist das überhaupt der richtige Weg, die Styles so einzubinden?

3. Frage:
wie bekomme ich die Java-Scripts zusammengefasst und komprimiert - irgendwie habe ich dazu im Forum nichts gefunden oder bin ich blind?
(Java geht nicht bei Uberspace, insofern fällt der Yui Compressor flach.)

4. Frage: was ist ein conditional comment, bzw. wie erstelle ich es richtig (klappt bei mir nicht), bzw, wahrscheinlich habe ich die Erklärung nicht verstanden oder kann sie nicht umsetzen.

Nachhilfe ist sehr! willkommen :)

Vielen Dank!

Sabine
23.03.2014, 22:48
Spooky

Zitat:

Zitat von Sabine14

Ich habe über die Composer Paketverwaltung mrclay/minify installiert und eine Filter-Chain aus cssmin und css rewrite zusammengestellt, die ich im Layout aktivieren möchte.
Folgender Fehler tritt dabei auf:

Fatal error: Class 'CssMin' not found in /var/www/virtual/queliman/html/system/modules/assetic/classes/vendor/kriswallsmith/assetic/src/Assetic/Filter/CssMinFilter.php on line 72

die dazu gehörige Zeile
$asset->setContent(\CssMin::minify($asset->getContent(), $filters, $plugins));

Wurde das Problem nicht behoben? Was muss ich machen, um Minify zum Laufen zu bekommen?

Du verwendest also die aktuelle Version von Theme+ über Composer (4.3.5.0)?

Zitat:

Zitat von Sabine14

2. Frage:
ich habe über Theme Plus meine Style-Sheets über assets/css eingebunden - nun muss ich die Media-Queries unterbringen -
die Sheets sind im Contao Editor erstellt, finde ich auch ganz gut so, aber dieser bindet ja die Media-Queries anders ein?
Einfach direkt ins Style-Sheet schreiben?
Ist das überhaupt der richtige Weg, die Styles so einzubinden?

Nein, das klingt nicht richtig - hast du überhaupt eigene CSS Dateien erstellt? Wenn ja - die sollten sich nicht unbedingt im assets/css Ordner befinden, der Ordner ist für die automatisch generierten Stylesheets vorbehalten. Media-Queries schreibst du einfach selbst in deinen Stylesheets, ja.

Zitat:

Zitat von Sabine14

3. Frage:
wie bekomme ich die Java-Scripts zusammengefasst und komprimiert - irgendwie habe ich dazu im Forum nichts gefunden oder bin ich blind?
(Java geht nicht bei Uberspace, insofern fällt der Yui Compressor flach.)

Gar nicht - mit vorbehalt ;) Habe bis jetzt einfach noch keine praktikable Möglichkeit gefunden auch JavaScript automatisch minifien zu lassen.

Zitat:

Zitat von Sabine14

4. Frage: was ist ein conditional comment, bzw. wie erstelle ich es richtig (klappt bei mir nicht), bzw, wahrscheinlich habe ich die Erklärung nicht verstanden oder kann sie nicht umsetzen.

Conditional comments sind sowas wie

PHP-Code:



. Wie du diese in Theme+ anwendest steht eh direkt darunter:

Zitat:

Conditional Comments ermöglichen das Einbinden Internet Explorer-spezifischer Dateien. Hier muss nur die Bedingung z.B. "lte IE 7" oder "IE 9" eingefügt werden. Der Prefix "<!--[if" bzw. Sufix "]>" werden automatisch eingefügt.

Is also genau so wie bei den normalen internen Stylesheets von Contao. Allerdings habe ich bei einem schnellen Test gerade eben Theme+ nicht dazu bewegen können, die jeweilige CSS Datei per Conditional Comment im Source einzufügen.
24.03.2014, 10:21
Sabine14

Hallo @Spooky,

danke für Deine Hilfe.

Frage 1:
Also:
ThemePlus 4.2.0.9002, wo bekomme ich die neueste Version her -> Paketverwaltung bietet mir durch die 4.2 an
Composer: 0.8.12

2. Frage css einbinden:
a) definiere "eigene" ?
(5 Stück) erstellt im Editor, werden von Contao unter assets/css/ abgelegt und auch zu einem Sheet zusammengeführt, funktionieren einwandfrei im Layout, unter ThemePlus auch, nur kein Wechsel der Bildschirmanpassungen wegen Einbindung Media Queries in ThemePlus; das habe ich verstanden und kann ich lösen, wobei sich hier noch die Frage stellt, ob sie sich minimieren lassen

b) beim Einbinden der Styles über /files speichert er sie nicht ab, Problem conditional comment
wie erstelle ich IE-spezifische Dateien - wollte ich mir sparen, bzw. das macht ja der Editor für mich bei Benutzung desselben, oder? Stichwort CSS3PIE

Frage 3)
schade eigentlich, kann man das nicht automatisch lösen? Wenn ja wie und wo finde ich was dazu - Stichwort Minify howto?

Frage 4 > Frage 2

Noch jemand irgendeine Idee?

Sabine
24.03.2014, 10:36
Spooky

Zitat:

Zitat von Sabine14

Frage 1:
Also:
ThemePlus 4.2.0.9002, also mal die neue Version testen, werde berichten -
Composer: 0.8.12

Das Problem das du angesprochen hast existiert in dieser Version auf jeden Fall noch, wenn ich mich richtig erinnere. Du musst auf die neueste Version aktualisieren.

Zitat:

Zitat von Sabine14

2. Frage css einbinden:
a) definiere "eigene" ?
(5 Stück) erstellt im Editor, werden von Contao unter assets/css/ abgelegt und auch zu einem Sheet zusammengeführt, funktionieren einwandfrei im Layout, unter ThemePlus auch, nur kein Wechsel der Bildschirmanpassungen wegen Einbindung Media Queries in ThemePlus; das habe ich verstanden und kann ich lösen, wobei sich hier noch die Frage stellt, ob sie sich minimieren lassen

Da hast du etwas falsch verstanden. Mit Theme+ managest du "eigene" Stylesheets, nicht die internen von Contao. Du legst dir bspw. irgendwo im /files Verzeichnis deine CSS Dateien an und bindest dieser über Theme+ ein.

Wie gesagt, die CSS Dateien, die sich im assets Verzeichnis befinden, werden automatisch von Contao bzw. Theme+ generiert. Du bindest momentan über Theme+ die von Contao automatisch generierten CSS Dateien ein, die aus den internen Stylesheets entstehen. Wenn du etwas an den internen Stylesheets änderst, würden diese Änderung wahrscheinlich nie im Frontend aufscheinen.

Zitat:

Zitat von Sabine14

b) beim Einbinden der Styles über /files speichert er sie nicht ab, Problem conditional comment

Was genau meinst du damit?

Zitat:

Zitat von Sabine14

wie erstelle ich IE-spezifische Dateien - wollte ich mir sparen, bzw. das macht ja der Editor für mich bei Benutzung desselben, oder? Stichwort CSS3PIE

CSS3PIE stellt für den IE8 (und 7?) CSS3 Funktionalitäten zur Verfügung, die der Browser andernfalls nicht hätte.

IE spezifische Dateien bindest du mit Conditional Comments ein - allerdings hat das, wie gesagt, bei meinem schnellen Test nicht funktioniert, vielleicht existiert da ein Bug in Theme+.

Für IE spezifische styles kannst du auch CSS verwenden, wenn du die ersten zwei Zeilen des default fe_page Templates hiermit ersetzt:

PHP-Code:

<!DOCTYPE html>     <html lang="<?php echo $this->language; ?>">

Hier wird per conditional comments einfach dem <html> tag je nach IE eine Klasse vergeben (.ie6, .ie7, .ie8, .ie9).
25.03.2014, 18:59
Sabine14

Hallo,

kurzer Zwischenstand von mir - mit der neuen ThemePlus-Version keine Fehlermeldung mehr, danke für den Hinweis!

Ich habe die Seite online gestellt (Google Speedtest laue 76 Punkte, autsch - über Mobile rede ich besser nicht), also heftig Verbesserungsbedarf, aber so schön einfach wie ich mir das vorgestellt habe, geht es, so scheint es, nicht.
Da muss ich noch ein bisschen rumprobieren (Entwicklungsumgebung) - ich LIEBE SynCto geradezu - eine supertolle Erweiterung!!

Sabine
25.03.2014, 19:29
andreasisaak

Das ist eigenartig. Sobald ich Theme+ einsetze komme ich gar nicht erst unter 85 Punkte. Meistens ohne besonderes zutun schon gleich über 90
25.03.2014, 19:41
Spooky

Hm, Theme+ an sich macht ja nicht viel besonderes, das direkt den PageSpeed Rank beeinflusst. Einzig das verschieben der JavaScripts in den Body vielleicht. Den meisten Punkteabzug (am Desktop) bekomme ich meistens durch fehlende Optimierung der JPGs und PNGs und je nach Server durch die hohe Response Time.
25.03.2014, 20:18
andreasisaak

Doch Theme+ macht ziemlich viel ...
25.03.2014, 20:58
Spooky

Naja was genau wäre das zum Beispiel? CSS Minifyen macht Contao ja auch schon selbst bei den internen Stylesheets (und Theme+ hat ja auch kein automatisches minifying für CSS von sich aus) und bis auf das managen von JavaScript fällt mir nichts ein was Theme+ ohne weiteres zutun noch machen würde, vor allem dass den PageSpeed verbessern würde.
25.03.2014, 21:11
andreasisaak

Ich nutze das Contao Framework aber nicht und da ist Theme+ mit den Möglichkeiten der unterschiedlichen Minify Ansätzen eine echte Bereicherung. Und ob du es glaubst oder nicht, mit Theme+ komme ich nun mal immer auf mindestens 85 Punkte. Mag sein das da noch andere Faktoren meiner Arbeitsweise einspielen aber ich habe eine riesen Flexibilität und trotzdem eine schnelle Website.
25.03.2014, 21:26
Spooky
Ja ja, das natürlich - wenn man externe Stylesheets einbinden will, dann gibt dir Theme+ sicher einen Vorteil beim PageSpeed Rank (würde ich auch nie anders verwenden). Aber zu den meisten Dingen:
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Optimize images
- Leverage browser caching
- Minify JavaScript
- Avoid landing page redirects
- Enable compression
- Minify CSS
- Minify HTML
- Prioritize visible content
- Reduce server response time
kann Theme+ eigentlich nichts beitragen (daher hat es mich auch gewundert dass sich Sabine14 da so viel davon erwartet ;)).
25.03.2014, 22:05
Sabine14

Hallo,

steter Optimist halt :-)
Laut Beschreibung, zumindest wie ich sie verstanden habe, bietet aber gerade ThemePlus in Verbindung mit Assetic die Möglichkeiten verschiedene Komprimierer einzusetzen und diese auch auf verschiedenen Ebenen anzuwenden: Style-Sheets, Java-Script und nochmal Layout oder täusche ich mich da (habt Erbarmen mit mir - Anfänger...)

Der grösste Problempunkt bei mir ist wohl das Superfish-Menu, bloß hat mir mein reines CSS-Menu auf Tablets nicht so gut gefallen, da zu "hektisch".

http://goo.gl/lwsP2R

Pagespeed Google

Komprimierung - ich habe die Contao-Komprimierung eingeschaltet:
Durch die Komprimierung von http://domain/assets/css/918ae2fd733f.css könnten 106,5 KB (91 %) eingespart werden.
Durch die Komprimierung von http://domain/ könnten 22,3 KB (78 %) eingespart werden.
Durch die Komprimierung von http://domain/assets/js/5dad6ddeedbc.js könnten 20,4 KB (69 %) eingespart werden.
Durch die Komprimierung von http://domain…modules/superfish/assets/js/superfish.js könnten 4,5 KB (67 %) eingespart werden.
Durch die Komprimierung von http://domain/…dules/superfish/assets/js/hoverIntent.js könnten 3,2 KB (67 %) eingespart werden.

JS
Durch die Reduzierung von http://domain/…dules/superfish/assets/js/hoverIntent.js könnten 3,4 KB (70 %) eingespart werden.
Durch die Reduzierung von http://domain/…modules/superfish/assets/js/superfish.js könnten 1,9 KB (29 %) eingespart werden.
Durch die Reduzierung von http://domain/assets/js/5dad6ddeedbc.js könnten 1,1 KB (4 %) eingespart werden.

CSS
Durch die Reduzierung von http://domain/assets/css/918ae2fd733f.css könnten 5,2 KB (5 %) eingespart werden

und noch ein paar andere kleinere Sachen, Bilder sind ziemlich komprimiert

Mal schaun, wie weit ich komme :)

Danke für eure Hinweise und Mithilfe, übrigens

Sabine
26.03.2014, 07:18
fabil

Hallo Sabine,

für die Komprimierung der Seite habe ich noch einen Tip für dich. Den besten Hoster hast du ja zum Glück schon ausgewählt.

Verbinde dich via SSH mit dem Server.
Nun gebe folgendes ein:

Code:

test -f ~/etc/php.ini || cp -a /package/host/localhost/php-$PHPVERSION/lib/php.ini ~/etc/

Und danach das hier:

Code:

nano -w ~/etc/php.ini

Dann suchst du folgende Zeile, in der das steht:

Code:

zlib.output_compression = Off

Und diese Zeile änderst du zu

Code:

zlib.output_compression = On

Jetzt die Datei abspeichern (Steuerung+O, und dann Enter, dann Steuerung+X)

Nun muss nur noch der PHP-Interpreter neu gestartet werden.

Code:

killall php-cgi

Dort müsste jetzt eine Fehlermeldung kommen, aber diese kannst du einfach dann ignorieren. Jetzt kannst du nochmal den PageSpeed testen, müsste jetzt besser sein, da das .HTML-Dokument nun vor dem Ausliefern komprimiert wird.

Die Hauptinformationen zur php.ini findest du auch bei Uberspace direkt: https://uberspace.de/dokuwiki/develo...#eigene_phpini

Viele Grüße
Fabi
26.03.2014, 10:04
Sabine14

Hallo Fabil,

besten Dank!

Brachte 4 Pünktchen :-D

Sabine