Contao für Google Page Speed optimieren

[xkoy]

Hi,

ok aber mein Server unterstützt das, so stehts zumindest in der info.php

[xchs]

Dann ist ja alles bestens.

[xkoy]

Ja eben nicht. Pagespeed meckert und http://www.gidnetwork.com/tools/gzip-test.php

Dort der test geht auch schief: www.mentales.at

[xchs]

Und wenn Du die Skripte als GZip-komprimierte Dateien auslieferst?

An und für sich sehe ich aber keinen Grund, wieso das nicht auch mit Deflate funktionieren sollte, wenn - wie Du ja sagst - das serverseitig unterstützt wird.

[xkoy]

Irgendwie komm ich da nicht mehr mit.

Also: Ich lasse die standard htaccess so wie Sie ist, da ist es "deaktiviert". Dann wirds quasie "on the fly" von Contao komprimiert?

Wenn ich es "aktiviere" übernimmt der Server die gzip Kompression?

Aber beides funktioniert nicht. Pagespeed meckert bei beidem. Und der GZIP test gibt auch ein "NO" aus.

Kanns dann nur am Server liegen?

Weil ich eine 2.9.5 install habe dort geht die gzip Komprimierung.

[refalo]

CSS Sprites: Mit jQuery alle Bilder (img) autom. ersetzen (background-image)

Ich habe mal versucht, eine Homepage in Richtung CSS-Sprites zu optimieren (NABU Heidelberg), genauer gesagt, lasse ich mit Hilfe von jQuery alle Vordergrund-Bilder (img) auf der aktuell zu ladenden Seite, die ein bestimmtes Kriterium erfüllen, automatisch durch CSS-Sprites, also durch Hintergrundbilder zu ersetzen. Bei (Maus-)Hover oder beim Durch-Tabben (Fokuswechsel) werden die Bilder später entsprechend gewechselt, zum Beispiel durch eine "hellere" Bild-Version.

Falls Interesse der genau(er)en Lösung besteht, kann ich das gerne weiter ausführen (.js und .css-Code, Tutorial bzw. das ins Contao Wiki auslagern oder so...). Hier schon einmal einige Details zu Randbedingungen/Umsetzung/Implementierung:

- Es spielt keine Rolle, in welchem Kontext das zu ersetzende Bild auftaucht (also ob als/im Inhaltselement, Modul, Nachricht, Event, Gallery usw....). Es kann also wie gewohnt ("redaktionell") im Backend irgendwo ausgewählt und eingefügt werden.
- Alle diese Bilddateien müssen bereits sowohl den/einen normalen (oben bzw. center top) als auch den :hover bzw. :focus-Zustand (unten bzw. center bottom) beinhalten, sind also bereits die gewünschten Sprites-Bilddateien (also doppelte Höhe).
- Alle Vordergrundbilder, die automatisch durch Sprites ersetzt werden sollen, unterliegen der Konvention, dass sie mit -sprite vor dem letzten Punkt im Dateinamen enden müssen (also etwa ...-sprite.jpg bzw. ...-sprite.png usw...).
- Bei $(document).ready verpasse ich (mit Hilfe von jQuery) allen diesen Tags bzw. DOM-Knoten die Klasse '...-sprite' (addClass). Die Bilder werden zunächst versteckt.
- Später, erst bei $(window).load werden (per jQuery) alle Tags mit Klasse '...-sprite' mit dem entsprechenden Hintergrundbild (background-image) ersetzt (replaceWith). Bei ready wäre es zu früh, wie Tests per UTMS-Internet-Zugang oder mit mobilen Endgeräten gezeigt haben.

Sowohl bei :hover als auch bei :focus werden die Bilder gehighlightet bzw. das Hintergrundbild entsprechend verschoben. Das mit dem Fokus geht auch im IE(7/8), da ich die <img>- bzw. <a><img>-Tags durch <a>-Tags und nicht etwa durch <div>-Tags ersetze.

vg refalo

[xkoy]

hi, ganz doofe Frage von mir, warum mit jquery? geht doch alles mit Background-position, wie hier www.mentales.at

oder hab ich was verpasst?

[refalo]

Ja genau, wenn es (bereits) Hintergrundbilder sind.

Wenn ich aber ganz "stinknormal", quasi als Redakteur im Backend z.B. Bilder intuitiv als Inhaltselement oder so einfüge, dann ja als Vordergrundbild (<img>), also nicht von Haus aus als CSS-Sprite.

[jojojohann]

habe das gleiche Problem wie xkoy

er meckert für 4 Dateien an, bitte mit gzip komprimieren...

Die Komprimierung der folgenden Ressourcen mit gzip könnte ihre Übertragungsgröße um 67,5 KiB verringern (Reduzierung um 69 %).
Durch die Komprimierung von http://st3.xyz-xyz.de/.../mootools-more.js könnten Sie 56,5 KiB einsparen (Reduzierung um 70 %).
Durch die Komprimierung von http://www.xyz-xyz.de/ könnten Sie 8,6 KiB einsparen (Reduzierung um 68 %).
Durch die Komprimierung von http://st2.xyz-xyz.de/.../MooMenu.js könnten Sie 2,1 KiB einsparen (Reduzierung um 66 %).
Durch die Komprimierung von http://st2.xyz-xyz.de/system/contao.css könnten Sie 347 B einsparen (Reduzierung um 45 %).

komischerweise habe ich in der htaccess mod_defalte aktiv und auch Gzip ist aktiviert wie beschrieben ...
im backend habe ich Gzip Standartkomprimierung eingestellt.

Die seite liegt bei strato und, da sollte mod_deflate verfügbar sein ... in der info.php steht zumindest: HTTP_ACCEPT_ENCODING gzip, deflate

habe ich irgendwas vergessen, oder ist das normal das er das nicht komprimieren kann?

[xkoy]

Hi,

also bei mir funkt das jetzt immer, mit standard contao htaccess.

check mal hier: http://www.gidnetwork.com/tools/gzip-test.php

ob wirklich das vom Server aktiviert ist. Daran lags nämlich bei mir..

[jojojohann]

ziemlich eindeutig oder??

Web page compressed? No
Compression type? none
Size, Markup (bytes) 14
Size, Compressed (bytes) 0
Compression % 0.0

[xkoy]

hi,

lol :P

Genau so sah das bei mir auch aus, das komiche war, das es ab und an ging, kurios. jetzt gehts bei jedem meiner projekte da es aktiviert wurde auf "meinem" Server (reseller). Nun alles bestens und Top punkte bei pagespeed!

[Kaos]

Hallo zusammen

ich hab noch ein kleines Problem mit der Pagespeedoptimierung via Subdomains.

Die Subdomains sind angelegt und im Backend klappt es auch ohne Probleme.
Im Frontend aber werden alle Grafiken usw. weiterhin von der Hauptdomain geholt.

Das liegt wohl daran, dass bei mir im Frontend die URLs im Quellcode der Seite ohne Domainnamen angezeigt werden. (http://www.meintier.de)

z.B.:
<img width="150" height="100" alt="Bild" src="system/html/werkzeug_1-9d4725bf.jpg"/>

Die Dateien selbst sind via Hauptdomain und Subdomains erreichbar.

http://www.meintier.de/system/html/werkzeug_1-9d4725bf.jpg

http://st1.meintier.de/system/html/werkzeug_1-9d4725bf.jpg

Wo kann man einstellen, dass auch im Frontend die komplette URL verwendet wird?

Vielen Dank im Voraus,
Thomas

[xchs]

Wo kann man einstellen, dass auch im Frontend die komplette URL verwendet wird?

Die URLs für das Frontend kannst Du im "Startpunkt einer Webseite" in der "Seitenstruktur" eingeben.

[Kaos]

Die URLs für das Frontend kannst Du im "Startpunkt einer Webseite" in der "Seitenstruktur" eingeben.

Danke für die schnelle Antwort

Jetzt scheint es zu klappen. Ich hab die drei Subdomains nun in der Seitenstruktur und beim Punkt System/Einstellungen hinterlegt.