Contao-Camp 2024
Ergebnis 1 bis 14 von 14

Thema: Frage zu Minify und andere

  1. #1
    Contao-Nutzer
    Registriert seit
    15.10.2013.
    Beiträge
    85

    Standard 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

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.803
    Partner-ID
    10107

    Standard

    Zitat Zitat von Sabine14 Beitrag anzeigen
    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 Beitrag anzeigen
    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 Beitrag anzeigen
    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 Beitrag anzeigen
    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:
    <!--[if lt IE 7 ]>...<![endif]--> 
    . Wie du diese in Theme+ anwendest steht eh direkt darunter:
    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.

  3. #3
    Contao-Nutzer
    Registriert seit
    15.10.2013.
    Beiträge
    85

    Standard

    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
    Geändert von Sabine14 (24.03.2014 um 11:33 Uhr)

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.803
    Partner-ID
    10107

    Standard

    Zitat Zitat von Sabine14 Beitrag anzeigen
    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 Beitrag anzeigen
    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 Beitrag anzeigen
    b) beim Einbinden der Styles über /files speichert er sie nicht ab, Problem conditional comment
    Was genau meinst du damit?


    Zitat Zitat von Sabine14 Beitrag anzeigen
    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>
    <!--[if lt IE 7 ]><html class="ie6" lang="<?php echo $this->language?>"> <![endif]-->
    <!--[if IE 7 ]>   <html class="ie7" lang="<?php echo $this->language?>"> <![endif]-->
    <!--[if IE 8 ]>   <html class="ie8" lang="<?php echo $this->language?>"> <![endif]-->
    <!--[if IE 9 ]>   <html class="ie9" lang="<?php echo $this->language?>"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--><html lang="<?php echo $this->language?>"><!--<![endif]-->
    Hier wird per conditional comments einfach dem <html> tag je nach IE eine Klasse vergeben (.ie6, .ie7, .ie8, .ie9).

  5. #5
    Contao-Nutzer
    Registriert seit
    15.10.2013.
    Beiträge
    85

    Standard

    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

  6. #6
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

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

  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.803
    Partner-ID
    10107

    Standard

    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.

  8. #8
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    Doch Theme+ macht ziemlich viel ...

  9. #9
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.803
    Partner-ID
    10107

    Standard

    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.
    Geändert von Spooky (25.03.2014 um 22:01 Uhr)

  10. #10
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    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.

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.803
    Partner-ID
    10107

    Standard

    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 ).

  12. #12
    Contao-Nutzer
    Registriert seit
    15.10.2013.
    Beiträge
    85

    Standard

    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

  13. #13
    Contao-Fan Avatar von fabil
    Registriert seit
    10.11.2010.
    Beiträge
    383

    Standard

    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
    Github-Account: https://github.com/fabil

  14. #14
    Contao-Nutzer
    Registriert seit
    15.10.2013.
    Beiträge
    85

    Standard

    Hallo Fabil,

    besten Dank!

    Brachte 4 Pünktchen :-D

    Sabine

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •