Offen Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

[Baufachhaus]

Hallo zusammen,

beim Geschwindigkeitstest meines Shops mit Google Analytics ist mir aufgefallen, dass ein Fehler im Template die Wertung der Geschwindigkeit beeinflusst.

Google gibt folgenden Fehler an:

Eliminate render-blocking JavaScript and CSS in above-the-fold content

darunter steht im Detail:

• None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
• Remove render-blocking JavaScript:
  • http://www.baufachhaus.de/includes/libs/minify/index.php?g=jtl3.js&316
  • http://www.baufachhaus.de/includes/libs/xajax_0.5_standard/xajax_js/xajax_core.js
  • http://www.baufachhaus.de/includes/plugins/jtl_search/version/102/frontend/template/js/suggest.js
• Optimize CSS Delivery of the following:
  • http://www.baufachhaus.de/includes/libs/minify/index.php?g=blue.css&316
  • http://www.baufachhaus.de/includes/plugins/jtl_search/version/102/frontend/template/css/su

Leider bin ich im Forum nicht auf vergleichbare Fragen gestoßen, deshalb hier die Frage. Die Komprimierung von JavaScript und CSS sind in den einzelnen Templates aktiv (Desktop & Mobil)
Kann mir jemand sagen, wie "schlimm" der von Google bemängelte Fehler ist bzw. wie man diesen behebt?
Aktuell erreicht der Shop eine Performance von 70/100 bei Mobil und 83/100 bei Desktop. - Schön wäre es natürlich dies weiter zu steigern. (Obwohl die Ladezeit von durchschnittlich 5,20 sek eigentlich "erträglich" ist)

Vielen Dank an euch im Voraus.

Beste Grüße

Baufachhaus

P.s. der Shop ist direkt bei JTL-Software gehostet

 

[buergi-ks]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Tja, so ist das - immer wieder was Neues! Sollte man gestern Javascripts möglichst ans Ende der Seite (in den Footer) verlegen, möchte Google "kleiner Codeschnipsel" nun inline - sprich im Quellcode der Seite haben. Zur Usability: 5 Sekunden Ladezeit für einen Webshop ist aber definitv zu lang - bin auch gerade am Optimieren. Fang erstmal alle von PageSpeed vorgeschlagenen Punkte abzuarbeiten und optimiere Seite für Seite: Startseite, Kategorieseite, Artikelseite.

Bonuspunkte bringen immer noch CDN (Content Delivery Networks) - hier könnte man die Bilder und die zu ladenden Dateien auslagern.
So sollten auch restlos alle Bilder vorm Upload optimiert sein - wir optimieren diese nicht mit JTL-Mitteln beim Upload, sondern vorher - weil man dann mehr Einfluss auf die Bilqualität hat.

Bezgl. der css-Dateien - hier gibt es imho zu viele und alle müssen geladen werden - selbst wenn man die Komprimierung von css und js verwendet - so werden z.B. die Klassen/Bezeichner mehrfach in den Dateien geschrieben und blähen die css-Dateien so unnötig auf - mit anderen Worten hier muss man im Template Hand anlegen und am Ende nur noch die customs laden.

Bei den PlugIns werden die css und Javascript unkontrolliert geladen, könnten zumeist aber tatsächlich inline geschrieben oder im Footer geladen werden.

Werde mal die einzelnen Schritte näher beleuchten:
Das Einschalten der "Komprimierung von Javascript und Stylesheets" in den Template-Einstellungen auf "ja" bringt ca. 20 Indexpunkte.

 

[buergi-ks]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Was Geschwindigkeit bringt ist die "gzip"-Komprimierung, diese kann man über die .htaccess anschalten, leider nicht Standard im JTL- Shop - bringt in unserem Shop ca. 10 Indexpunkte

Zeile einfügen:

php_value output_handler ob_gzhandler

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
</ifmodule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>

<IfModule mod_deflate.c>
<FilesMatch "\.(js|jpg|jpeg|gif|png|css|txt|html)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/xhtml-xml "access plus 600 seconds"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
</IfModule>

Alle Arbeiten natürlich auf eigene Gefahr - bitte unbedingt jede Änderung testen!!!!!!

 

[seocom]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Hallo Leute,
was da stört ist vor allem das ? im Dateinamen.
Dateien mit einem ? können nicht gecacht werden.
Weiss jemand von euch ob wenn man das ? aus den rewrite rules minify raus nimmt noch alles funktioniert?

PS: CDN habe neulich getestet (nur mit Bildern) hat nicht eine Verbesserung gebracht (1 Punkt)

 

[seocom]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Und warum steht eigentlich immer die Shopversion im Dateinamen, ich kann doch nur eine installiert haben?

 

[Baufachhaus]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Hallo buergi-ks,

danke für den Tipp mit der gzip Komprimierung. Es hat auf Anhieb geklappt und die Punktzahl um 6 Punkte erhöht. Jedoch nur bei der PC Ansicht, auf die Mobile-Seite hatte diese Änderung keinen Einfluss.
Die angesprochene Sache mit den ? kann ich mir auch nicht erklären und das mit der Shopversion, sowieso nicht.

Nun denn, jetzt habe ich ein Ranking von 89/100 Punkten, das ist schon mal besser als zuvor und auch ohne rote Ausrufezeichen in den Warnungen Das ist schon mal was, ich wage aber zu bezweifeln, dass es ohne riesigen Aufwand machbar ist, den JTL Shop auf 100/100 sowohl Mobil, als auch am PC zu bekommen.

Vielen Dank einstweilen!

 

[Hanny]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Hallöchen,

Happy New Year 2014!

Danke für den Tipp mit der gzip Komprimierung. Habe den Code von buergi-ks verwendet und hat auf Anhieb geklappt. Jedoch das Einschalten der "Komprimierung von Javascript und Stylesheets" in den Template-Einstellungen geht nicht. Nach der Änderung auf "ja" wird mein Shop nicht mehr richtig angezeigt. Das hängt bestimmt mit dem Standard-Theme das "Benutzerdefiniert" ist zusammen.

Hat jemand einen Tipp was ich noch machen muß um diese Einstellung nutzen zu können.

Vielen Dank im Voraus.

Hanny

 

[Hang Loose]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Hallo buergi-ks

Habe deinen Code ausprobiert. Danach war der Shop nicht mehr erreichbar.(500 Internal Server Error) Da es bei anderen ja problemlos funktioniert muss noch Server-seitig etwas geändert werden?
Ich habe ein JTL Hosting. Shop 3.18B2

Gruss Hang

 

[Uhrenwarenhaus]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Hallo Hang,

leider habe ich jetzt das gleiche Problem. Habe die o.a. Zeilen eingefügt und den 500er Fehler im Shop. Auch nach löschen der Zeilen in der htacess kommt der Fehler immer noch. Kann mir da jemand helfen oder dauert es nur seine Zeit, bis der Shop wieder erreichbar ist?

 

[casim]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

@Jürgen

Ich kann deinen Shop aus der Signatur problemlos aufrufen

 

[Uhrenwarenhaus]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Hallo zusammen,

jetzt scheint wieder alles normal zu laufen. Ich denke einfach, es hat etwas gedauert, bis die Änderungen wieder eingespielt waren.

Sorry.

 

[deepblue]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Hallo,

wir nutzen die aktuelle Shop Version 3.19 Build: 4 und wie ich gerade gesehen habe sind das ico,
also das favicon.ico nicht mit GZIP komprimiert.

Wie kann ich ich das in der .htaccess Datei hinzuschreiben?

 

[deepblue]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Wie muss ich das in der .htaccess Datei eintragen?

<ifModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</ifModule>

<ifModule mod_headers.c>
Header unset ETag
FileETag None

<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|jpe)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>

 

[deepblue]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Leider bekomme ich immer folgendes bei dem favicon.ico angezeigt:

Use gzip compression for transferring compressable responses: 95/100
235.2 KB total in compressible text, target size = 225.3 KB - potential savings = 9.9 KB
FAILED - (17.4 KB, compressed = 7.5 KB - savings of 9.9 KB) - http://www.domain.de/templates/2015/themes/base/images/favicon.ico

Wie kann ich gzip auf das favicon.ico aktivieren?

 

[deepblue]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

Komme da leider nicht weiter! Werde nun mal ein Ticket erstellen bzgl. der GZIP-Komprimierungen. Da seint irgend etwas bei meiner .htaccess Datei nicht zu stimmen.

 

[casim]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

ein tiiiicket ... für ein favicon ... oh mann

 

[deepblue]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

@casim

Könntest du mir nicht da weiter helfen? Warum wird das favicon.ico standardmäßig nicht mit Gzip komprimiert?

 

[casim]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

@deepblue
Ich weiß ja jetzt nicht was du für ein favicon hast, aber in der Regel sind die nur ein paar hundert Byte groß
Was willst du da noch komprimieren ... und warum überhaupt

Wenn ich das jetzt oben richtig lese ist dein fav 17.4kb groß ... das solltest du lieber mal verkleinern

 

[deepblue]

AW: Seitenladezeit Google-Analytics - Render-blocking JavaScript und CSS

@casim

Das ist das Standard favicon.ico von JTL. Mir geht es in erste Linie darum, meinen JTL- Shop mal ein wenig zu optimieren.
Wenn ich meinen JTL-Shop nun über webpagetest.org mal aufrufe, sehe ich viele Rote "X" und diverse "!" dieses möchte ich gerne ein wenig reduzieren.

Bei dem favicon.ico stand eben, das es nicht mit GZIP komprimiert ist, obwohl meine .htaccess das doch eigentlich regeln sollte.
Oder nutze ich noch eine alte .htaccess Datei?