Javascript per Google Closure Compiler zusammenführen

Hallo zusammen,

habe ein Template auf Basis von azure (CE 4.5.1) im Einsatz und mich mit der Pagespeed beschäftigt. Diese fällt nicht gerade famos aus und daher würde ich gerne die vielen JS Dateien zu einer zusammenführen.
Habe dazu im Closure Compiler die entsprechenden JS Dateien geaddet und dann den Compiled Code generiert.
Nur jetzt weiß ich überhaupt nicht weiter, wo ich den Compiled Code nun einfügen muss?

Kann mir hierzu jemand weiterhelfen?

Freu mich auf eure Rückmeldung,
sommerliche Grüße
Nicole

Hallo Nicole,
wenn ein RootServer bzw. VirtualServer zur verfügung steht würde ich vorschlagen den [B]PageSpeed Module[/B] direkt auf dem Server zu Installieren. Installation dauert ca. 2 Min. und den rest macht er von alleine.

Falls das nicht Möglich ist, füge das hier in deinen .htaccess datei ein.


# BEGIN Gzip Compression
AddEncoding gzip .gz
<filesmatch "\.js\.gz$">
AddType "text/javascript" .gz
</filesmatch>
<filesmatch "\.css\.gz$">
AddType "text/css" .gz
</filesmatch>
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]
</ifmodule>
# END Gzip Compression

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

<IfModule mod_headers.c>
<FilesMatch "\.(js|css)$">
Header set Cache-Control "max-age=86400, public"
</FilesMatch>

<FilesMatch "\.(gif|png|jpg|jpeg|pdf|ico)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

<IfModule mod_deflate.c> 
<FilesMatch "\.(css|js|x?html?|php)$"> 
SetOutputFilter DEFLATE 
</FilesMatch> 
</IfModule>

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

Hierbei musste man JS und CSS Dateien auf dem Server gepackt bereitstellen, das heißt oxid.css in gleicher Verzeichnis muss auch als oxid.css.gz zur verfügung stehen.

Vor dem Packen lässt man am besten die Dateien durch so einen [B]Compression[/B] Tool laufen.

Irgendwo hier in Forum gibt es ein ähnliches Kode er packt die Dateien von alleine, das ist natürlich noch viel besser.

Grüße
Rafig

Hallo Rafig,

Gzip habe ich bereits in der .htaccess ergänzt und die gz-Dateien auch generiert und im entsprechenden Verzeichnis abgelegt.

Pagespeed gibt mir jedoch immer noch ein Ergebnis mit 39/100 aus und “meckert” an, dass zu viele JavaScript/CSS geladen werden müssen - wenn möglich, sollten die Scripts zusammengeführt werden.

Daher bin ich auf der Suche, wie ich diese in der Anzahl reduzieren kann und bin darüber auf den Google Compiler gestoßen - weiß nur jetzt überhaupt nicht weiter, wo ich den Compiled Code einfügen muss - vergleichbar wie bei Deinem Link zum Compression Tool, nur dass mehrere js-Dateien zu einer Datei zusammengeführt werden sollen und diese Datei ja irgendwo in Bezug gesetzt werden muss…

Eine Idee, ob ich hier vllt “falsch denke” oder den Wald vor lauter Bäumen nicht sehe???

LG
Nicole

Nicole,
39 ist nicht normal. :eek: Hast du Evtl. irgendwelche Module im Einsatz die dafür verantwortlich sind? Nach einer Anpassung mussten über 90/100 sein, vorher 79-82.

[B]Hier[/B] siehst du Google PageSpeed Module im Einsatz. Quelltext anzeigen lassen und oben anbindung von CSS und unten JS Dateien ansehen. :wink: Die werden alle in einer Datei zusammengeführt. Die Seite musste über 94 Punkten schaffen, obwohl sehr viele Grafiken enthält.

Versuche mal hiermit: [B]GTmetrix[/B]

Grüße
Rafig

[QUOTE=OXID-Design;147782]Nicole,
39 ist nicht normal. :eek:[/QUOTE]
Das ist nicht Google Pagespeed sondern ein anderer Service, hast du das gesehen?

Hallo!

Schon mal einen herzlichen Dank für eure bisherigen Feedbacks!!!

Habe nun mal die Pagespeed über GTmetrix gemessen und da kommt “zumindest” 70% raus - aus meiner Sicht führen aber die zuvielen CSS und JS Dateien zu dem schlechten Ergebnis, so dass ich die hohe Anzahl in einer css und einer js Datei zusammenführen muss.

Ich sehe auch den Bezug bei suess-versand, der einzelnen js und css Datei Datei, aber ich bin iregndwie total überfrodert, wie ich dahin kommen kann.

Eine Installation von Google PageSpeed Module verweist auf “Supported platforms: CentOS/Fedora (32-bit and 64-bit) / Debian/Ubuntu (32-bit and 64-bit)” hin - …für mich “Böhmische Dörfer”.

Kennt ihr eine Anleitung, wie ich als “Laie” hier weiterkomme? Oder habt ihr Steps an Tipps für eine Installation?

LG
Nicole

Mit Google Pagespeed Insights komme ich nun auf ein Ergebnis von 78%!

Ich würde nur gerne die Zusammenführung der JS dateien hinbekommen, weil ich denke, dass das Laden von über 20 JS Dateien nach Zusammenführung und Auslagern ne Menge verbessern kann.

Den Compiled Code habe ich generieren lassen, aber ich finde keinen Ansatz, wie und wo ich den Bezug zu der neuen “zusammengeführten” JS Datei pflegen kann :confused:

Vielleicht hat jemand unter euch eine Idee oder kennt sich damit aus?

LG
Nicole