v3.1.x Google Page Speed / CSS Komprimierung und JavaScript parsen

Druckbare Version

02.01.2014, 18:22
mavnet

v3.1.x Google Page Speed / CSS Komprimierung und JavaScript parsen

Hallo allerseits,

ich versuche gerade, eine Seite Page-Speed mäßig auf Vordermann zu bringen.
Leider erreiche ich nur" 75/100 Punkten mobil" und" 90/100 Punkten Desktop" beim Google Page Speed Test. Mit dem Desktop Ergebnis kann ich ja noch leben, aber bei beiden Ergebnissen bemängelt Google folgendes:

Zitat:

Ihre Seite enthält 4 blockierende Skript-Ressourcen und 2 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite.
Keine der Seiteninhalte "above the fold" (ohne Scrollen sichtbar) konnten ohne Wartezeiten für das Laden der folgenden Ressourcen gerendert werden. Versuchen Sie, blockierende Ressourcen zu verschieben oder asynchron zu laden, oder laden Sie kritische Bereiche dieser Ressourcen direkt inline im HTML.

Entfernen Sie JavaScript, das das Rendering blockiert:
http://ajax.googleapis.com/ajax/libs.../jquery.min.js
http://www.???.de/…meraslideshow/ass...mera-jq-1-9.js
http://www.???.de/…slideshow/assets/....easing.1.3.js
http://www.???.de/…ssets/js/jquery.m...tomized.min.js
Optimieren Sie die CSS-Darstellung für die folgenden URLs:
http://www.???.de/…es/cameraslidesho...css/camera.css
http://www.???.de/assets/css/47ba67de3e61.css

Wie bekomme ich das Problem in den Griff?
Ich habe meine "eigene" externe Styleheet in das Layout eingebunden. Meine css-Angaben im eigenen Stylesheet werden aber nicht komprimiert, denn wenn ich

Zitat:

http://www.???.de/assets/css/47ba67de3e61.css

aufrufe,
sehe ich zwar das CSS des (vermutlich) Layout-Builders komprimiert, darunter steht dann aber mein eigenes CSS, völlig unkomprimiert.

Zu

Zitat:

Keine der Seiteninhalte "above the fold"

:
Müsste man hier nicht das JS später parsen? Wenn ja, wie mache ich das?

Unter http://www.whatsmyip.org/http-compression-test/ habe ich ein positives Ergebnis (Site is gzipped).

Im Augenblick weiss ich nicht mehr weiter ...

Hat jemand von euch Erfahrungen oder Tipps für mich?

Beste Grüße,
mavnet
02.01.2014, 20:48
tab

Die Amazon-Startseite hat eine 78/100 und 88/100. Besser als die Startseite von Amazon bist du also beim Desktop schon :)
Zu der Geschichte mit dem asynchronen Laden gab es hier im Forum irgendwo einen Thread, wie z.B. Ressourcen via subdomain geladen werden können. Für halbwegs neue Contao-Versionen ist das sogar schon integriert , siehe "Datei-URL" und "Assets-URL" im Startpunkt der Website.
03.01.2014, 15:52
mavnet

Ok, danke dir für den Hinweis.Dann werde ich mir mal das mit der Subdomain anschauen ... schönes we !
03.01.2014, 16:51
Dirch

Du könntest dich an die Entwickler der Erweiterungen wenden, damit sie Sorge dafür tragen, daß ihre Scripts in das kombinierte JS-File gehängt werden. (die cameraslideshow macht das z.B. nicht) Das gleiche gilt für etwaiges CSS. Wenn du das lokale jQuery benutzt, dann wird dies auch in das kombinierte File geschrieben.

Die CSS-Datei mit kryptischem Namen ist die von Contao zusammengehängte dynamisch erstellte Datei. Contao macht an der Stelle nichts anderes, als die Dateien aneinander zu hängen.

Die eigentliche Komprimierung wird in den Contao BE-Einstellungen konfiguriert. Globale Einstellungen->Skripte komprimieren
08.01.2014, 12:23
Grossvater

Bezüglich des Content-Delivery-Network(asset url auf subdomain) gibt es auch einen hilfreichen Beitrag von Leo Feyer auf contao.org
08.01.2014, 13:04
mavnet

Hi,

so wie ich das im Beitrag richtig verstehe, muss dann auf eine Subdomain bzw. auf eine Hauptdomain nur eine htaccess mit den Einstellungen?
25.02.2014, 20:46
Supermann

Zitat:

Zitat von Grossvater

Bezüglich des Content-Delivery-Network(asset url auf subdomain) gibt es auch einen hilfreichen Beitrag von Leo Feyer auf contao.org

Hallo,

ich habe schon in einem anderen Thread meine Problematik bezüglich Subdomains angesprochen. Ich finde man sollte vielleicht einmal die Anleitung auf die hier immer verlinkt wird aktualsieren, denn die ist von 2010 und wie ich das sehe nicht mehr aktuell.

Vieleicht findet sich ja ein Profi der das einmal übernimmt.
04.03.2014, 10:53
Flaschenzug

Hallo,

ich spiele gerade mit den gleichen Optionen wie hier besprochen.
Die Assets und Files laufen bei mir bereits über Subdomains.

Was mich beschäftigt (bzw. mir nicht klar ist wie ich es sinnvoll lösen kann):

Zitat:

JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen

Eine Option wäre ja das asynchrone laden (Schlagwort: async)
Also habe ich mich ein bisschen schlau gemacht und bin auch über eine Diskussion zwischen Leo und einem anderen User gestolpert, bei der das asynchrone Laden eher als Problem beschrieben wurde (zumindest wenn man MooTools verwendet).

Wenn ich aber im fe_page Template die JS Dateien an das Ende der Seite setze (statt im header), funktioniert zumindest mal eine Erweiterung nicht mehr (der RockSolid Slider).

Hat jemand eine Idee, oder bereits einen Weg gefunden das sinnvoll zu lösen?

Danke und viele Grüße,
Jonas
04.03.2014, 11:34
Supermann

Hallo Flaschenzug,

kannst du das gleiche beobachten wie ich, das wenn Du die Subdomains aktivierst das dann der Pagespeed zurück geht? Wenn nicht, was hast Du sonnst noch eingebaut außer das Du die Subdomains aktiviert hast. Vielleicht kannst Du ja auch die Einstellung in Deiner htaccess offenlegen.

Ich danke Dir schon einmal für evtl. Antworten.
04.03.2014, 11:35
tab

Wenn du Javascript oder CSS für den ohne Scrollen angezeigten Teil der Seite brauchst, dann bleibt dir eigentlich nur, alles direkt ins HTML zu schreiben. So verstehe ich das jedenfalls. Besonders sinnvoll kann ich das aber nicht finden und mache es deshalb auch nicht. Und damit bin ich auch in guter Gesellschaft. Die Geschichte mit den Subdomains werde ich mir aber noch überlegen, das wäre wohl relativ einfach machbar. Gibt es eigentlich auch eine Möglichkeit, Contao wirklich auf 3 Server zu verteilen? Zum Beispiel einfach dieselbe Installation auf 3 Servern zu machen und eine davon jeweils für HTML, CSS und Javascript aufzurufen? Das mit den Subdomains, die auf dieselbe Installation verweisen ist ja nach meinem Verständnis größtenteils nur eine Befriedigung für Google.
04.03.2014, 15:13
Flaschenzug

Danke für eure Rückmeldungen.

@Supermann:
In der Tat, habe es mal mit und ohne getestet. Und ohne die Subdomains kriege ich im Schnitt 3-5 % mehr.
Zwar kann ich nicht ausschließen, dass das zufällige Schwankungen (Antwortzeit des Servers) sind, aber das wären sehr einseitige Schwankungen.
Kann das jemand erklären ?

@tab:
Okay, sehe ich ähnlich wie du. Dachte allerdings das es hierbei darum geht, dass die Daten erst geladen werden wenn die HTML Daten bereits übertragen wurden. Wirklich Sinn macht das allerdings auch nicht. Werde also schauen, dass die Scripte wenn möglich am Ende der Seite geladen werden - und das CSS belasse ich im Header.

Bleibt allerdings noch immer mein Problem:
Wie kriege ich die Scripte sinnvoll hinter den Footer ohne das diese nicht mehr funktionieren?
Gibt es hierfür Ideen ?
04.03.2014, 15:18
Supermann

Hallo Flaschenzug,

genau das Problem habe ich mit dem Pagespeed auch. Ich habe das auch schon in einem neuen Thread angesprochen und dort gefragt woran das liegen könnte. Leider scheint sich hier im forum damit aber niemand auszukennen.

Ich frage mich warum Contao diese Funktion bietet, wenn man diese aber nutzt es eher langsamer wird? und wenn ich etwas falsch gemacht habe, warum es keine aktuelle Anleitung zu diesem Thema gibt?
04.03.2014, 15:34
Flaschenzug

Also grundsätzlich geht es dabei darum (Auszug aus einem Blog Beitrag):

Zitat:

ich habe 3 Subs für die Bilder. Warum, weil Browser nur eine bestimmte Anzahl an Request parallel abarbeiten können. "Parallel" heißt hier aber gleichzeitig an den gleichen Host. Verschiedene Subs sind verschiedene Hosts. Ist halt eine Frage was sinnvoll ist, da für jede Sub auch ein DNS-Request erforderlich ist und der kostet auch Zeit. Bei mir sind in der Regel 10-40 Bilder pro Seite, diese werden dann entweder auf 1, 2 oder 3 Subs verteilt.

Und das macht somit grundsätzlich schon Sinn. Ich frage da mal nach, kenne jemanden der hier weiterhelfen könnte.
Kannst du einmal den Link zu deinem neuen Thema zur Thematik posten?

Danke und Grüße
04.03.2014, 15:37
Supermann

Hallo Flaschenzug,

https://community.contao.org/de/show...und-Subdomains
06.03.2014, 10:14
Flaschenzug

Also:
Ich habe mal einen SEO Menschen danach befragt.
Und er hat letztlich bestätigt, was wir auch schon diskutiert haben. Es kann Sinn machen, muss aber nicht.

Sinn weil die Anfragen gesplittet werden (und bei bestimmten Konfigurationen pro Domain nur eine gewisse Anzahl an Anfragen parallel erfolgen kann).
Nicht sinnvoll wenn die Anfragen lange dauern (jeweils neue Verbindung die hergestellt werden muss).

Allerdings dürfte es eigentlich nicht so stark abweichen (bis zu 5 Punkte) wenn ich die Assets und Files über Subdomains ansteuere.
Es bleibt mir also weiterhin ein Rätsel wieso es so länger dauert...

Bei welchem Hoster bist du denn?
Zufällig bei All-Inkl?
06.03.2014, 10:16
Supermann

Hallo,

Server4you und wir haben dort einen eigenen Profi Server. Deshalb verstehe ich das auch nicht mit dem Unterschied.
06.03.2014, 10:28
kayyy

Ohne die URL kann man relativ wenig helfen.

Ist denn PageSpeed im Einsatz ?

Hier läuft die Komprimierung Serverseitig.
Desweiteren ist natürlich auch der Faktor Geschwindigkeit und Caching eine wichtige Rolle.

Für einen Kunden hatten wir hier mit diversen Serverseiten Optimierungen optimale Ergebnisse hinbekommen.

http://im.bilderkiste.org/4139410167787/test10.png

Um aber hier genau helfen zu können, müsste man sich aber ebend einmal die eigentliche Webseite genauer anschauen,
um zu sehen, was hier im Detail optimiert werden musss.
06.03.2014, 10:35
Supermann

Hallo,

also wenn das etwas hilft: http://www.digiphotopro.de/fotolabor
06.03.2014, 10:40
kayyy

Zitat:

Zitat von Supermann

Hallo,

also wenn das etwas hilft: http://www.digiphotopro.de/fotolabor

PageSpeed sagt dir ja hier schon die Fehler, dass JS Dateien einiges blockieren -> http://developers.google.com/speed/p...or&tab=desktop

Entfernen Sie JavaScript, das das Rendering blockiert:
https://www.digiphotopro.de/assets/js/9adfb897b808.js
https://www.digiphotopro.de/…odules/...ReadyRateIt.js
https://www.digiphotopro.de/…ystem/m...c/js/rateit.js

Gtmetrix sagt fast dasselbe bzgl. der JS Dateien

http://gtmetrix.com/reports/www.digi...ro.de/vCUwmgs7

Kannst du diese evtl. in den Footer verlegen ?
06.03.2014, 10:44
Supermann

Hallo,

das weis ich auch und es gibt hier im Forum auch schon Diskussionen darum wie man das umgehen könnte. Eine Sinvolle Lösung wurde aber noch nicht gefunden soviel ich weis. Außerdem funktionieren einige Scripte nicht mehr wenn ich diese später lade.

Wenn das z.B ein Kriterium dafür sein sollte das dass mit den Subdomains einwandfrei funktioniert, frage ich mich warum man dann bei Contao nicht festlegen kann wo wann welches Script geladen wird. Ich glaube auch nicht das das hierfür der Ausschlaggebende Punkt ist das dass mit den Subdomains bei mir nicht funktioniert.
06.03.2014, 10:48
Spooky

Zitat:

Zitat von Supermann

Hallo,

das weis ich auch und es gibt hier im Forum auch schon Diskussionen darum wie man das umgehen könnte. Eine Sinvolle Lösung wurde aber noch nicht gefunden soviel ich weis. Außerdem funktionieren einige Scripte nicht mehr wenn ich diese später lade.

Wenn das z.B ein Kriterium dafür sein sollte das dass mit den Subdomains einwandfrei funktioniert, frage ich mich warum man dann bei Contao nicht festlegen kann wo wann welches Script geladen wird. Ich glaube auch nicht das das hierfür der Ausschlaggebende Punkt ist das dass mit den Subdomains bei mir nicht funktioniert.

Mit den Subdomains hat das nichts zu tun.

Mit der Theme+ Extension kannst du zB festlegen, ob die scripts im <head> oder am Ende des <body> eingebunden werden sollen. Aber auch nur pro Layout, nicht pro Script.

Welche Scripts funktionieren nicht mehr, wenn du sie an das Ende des <body>s gibst?
06.03.2014, 10:49
kayyy

Zitat:

Zitat von Supermann

Hallo,

das weis ich auch und es gibt hier im Forum auch schon Diskussionen darum wie man das umgehen könnte. Eine Sinvolle Lösung wurde aber noch nicht gefunden soviel ich weis. Außerdem funktionieren einige Scripte nicht mehr wenn ich diese später lade.

Wenn das z.B ein Kriterium dafür sein sollte das dass mit den Subdomains einwandfrei funktioniert, frage ich mich warum man dann bei Contao nicht festlegen kann wo wann welches Script geladen wird. Ich glaube auch nicht das das hierfür der Ausschlaggebende Punkt ist das dass mit den Subdomains bei mir nicht funktioniert.

Was passiert denn, wenn du genau diese drei Skripte in den Footer legst ?
Funktionieren die Rating Scripte dann ?

Ansonsten wie sieht es aus mit dem defer Attribut für die drei Files, oder asynchron laden?

http://webdesign.tepelmann.com/PageS...avaScript.html
06.03.2014, 10:53
Supermann

Hallo,

also als erstes funktioniert wie hier im Forum schon beschrieben der Rocksolid Slider nicht mehr, zum zweiten funktioniert mein Produktslider nicht mehr.

Die Erweiterung Theme + hatte ich auch schon versucht, aber die bereitet teilweise auch Probleme. Ich möchte auch so wenig wie möglich von irgendwelchen Erweiterungen abhängig sein, da es da ja manchmal bei Updates ziemlich dran hapert.
06.03.2014, 10:54
kayyy

Zitat:

Zitat von Supermann

Hallo,

also als erstes funktioniert wie hier im Forum schon beschrieben der Rocksolid Slider nicht mehr, zum zweiten funktioniert mein Produktslider nicht mehr.

Die Erweiterung Theme + hatte ich auch schon versucht, aber die bereitet teilweise auch Probleme. Ich möchte auch so wenig wie möglich von irgendwelchen Erweiterungen abhängig sein, da es da ja manchmal bei Updates ziemlich dran hapert.

Hast du dir einmal diese Variante angesehen ? http://webdesign.tepelmann.com/PageS...avaScript.html
06.03.2014, 10:56
Supermann

Hallo,

sehe ich mir gerade an. Kann mann das ganze denn auch Updatesicher einbinden?
06.03.2014, 10:57
kayyy

Zitat:

Zitat von Supermann

Hallo,

sehe ich mir gerade an. Kann mann das ganze denn auch Updatesicher einbinden?

Der Slider wird vermutlich nicht funktionieren, da hier das verantwortliche Javascript, dass den Slider konfiguriert / ausführt als Inline Style im HTML Code ist, dann aber hier erst die eigentliche Datei im Footer geladen wird.
Es sollte funktionieren, wenn man dieses inline Javascript unter dem Rocksolid Script in den Footer verschiebt.
06.03.2014, 11:01
kayyy

Evtl. hilft das auch weiter:

https://developers.google.com/speed/...-outline?hl=de

Hier wird der Inline Javascript Code in eine Javascript Datei gepackt.
Wenn diese Javascript Datei dann in den Footer gepackt wird unterhalb des Sliders Script sollte es funktionieren.

Ist jetzt aber eher ein experimenteller Gedanke.
06.03.2014, 11:02
Supermann

Hallo,

ich habe mir das gerade angesehen.

Was mache ich aber wenn die Sripte:

Code:

<?php $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/fry_accessible_tabs/assets/jquery.tabs.js'; ?> <?php $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/fry_accessible_tabs/assets/jquery.cookie.js'; ?> <?php $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/fry_accessible_tabs/assets/jquery.syncheight.js'; ?>

so geladen werden? wie bekomme ich da zb. das defer="defer" hin?
06.03.2014, 11:19
kayyy

Zitat:

Zitat von Supermann

Hallo,

ich habe mir das gerade angesehen.

Was mache ich aber wenn die Sripte:

Code:

<?php $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/fry_accessible_tabs/assets/jquery.tabs.js'; ?> <?php $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/fry_accessible_tabs/assets/jquery.cookie.js'; ?> <?php $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/fry_accessible_tabs/assets/jquery.syncheight.js'; ?>

so geladen werden? wie bekomme ich da zb. das defer="defer" hin?

z.B mittels PageSpeed -> https://developers.google.com/speed/...js-defer?hl=de

Hier auch nochmal ein beste practice: https://developers.google.com/speed/...DeferLoadingJS
17.02.2015, 22:22
AndreasC

Zitat:

Zitat von tab

Die Amazon-Startseite hat eine 78/100 und 88/100.

Kling für mich wie ein Äpfel mit Birnen Vergleich.