PageSpeed optimieren

Hallo zusammen,

aich bin aktuell dabei ein paar Dinge an der PageSpeed vie Google Insights zu optimieren, komme aber nicht ganz weiter.

Wie kann man z.b. das Browser-Caching für JS und CSS einstellen (das wir noch bemängelt).

Ich habe den Default in der .htaccess mal wie folgt geändert, aber ob das so gut ist?

BEGIN Expires-Headers

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 600 seconds” (war default 30 Sekunden).

PageSpeed sieht das aber sowieso auch noch nicht als optimal an.

Danke!

600 Sekunden bringt wenig - ich würde eher auf einen Tag gehen:

<ifmodule mod_expires.c>
<Filesmatch “.(jpg|jpeg|png|gif|js|css|swf|ico)$”>
ExpiresActive on
ExpiresDefault “access plus 1 days”
</Filesmatch>
</ifmodule>

Konkret bemängeltg google alles was in:

/out/azure/src/js/

Liegt.

Aber auch mit einem Tag als Einstellung ändert sich da nichts bei Google :frowning:

Gegenfrage: bei den css-Dateien wird nichts mehr bemängelt?
(insbesondere bei oxid.css - wenn dem so ist, kann man Syntax-Fehler in der .htaccess weitestgehend ausschließen)

also die oxid.css wird auch noch bemängelt, obwohl ich die optimierte bereits ersetzt hatte… komisch.

Und in meiner .htaccess sieht es aktuell so aus:
Also anders als dein Code oben.

gzip Compression

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
<FilesMatch “.(css|js|x?html?|php)$”>
SetOutputFilter DEFLATE
</FilesMatch>
</ifmodule>

BEGIN Expires-Headers

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 days"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/ico "access plus 604800 seconds"
ExpiresByType image/x-icon "access plus 14 days"
ExpiresByType application/x-shockwave-flash "access plus 14 days"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript “access plus 14 days”
</IfModule>

END Expires-Headers

einen Syntax-Fehler sehe ich gerade auch nicht …

  • der Default von 1 Tag wird ja ausgeführt (kann man im Firebug sehen)
  • die 14 Tage bei css auch
  • nur die 14 Tage bei javascript-Dateien nicht …

hast du mal den Code aus #2 probiert?
PS der generelle Default bei 1 Tag kann evtl. zB bei ajax-Abfragen zu Problemen führen

PSPS: vielleicht funktioniert :

ExpiresByType application/javascript “access plus 14 days”

also mit dem Code aus #2 geht es, aber er stuft mich stark herunter weil er wohl nicht lange genug cached.

ich habe es jetzt zum test so gemacht und nun wird auch JS gechached, ob das so 100% sauber ist muss mir ein Profi bitte sagen :slight_smile:

BEGIN Expires-Headers

<ifmodule mod_expires.c>
<Filesmatch “.(js)$”>
ExpiresDefault “access plus 14 days”
</Filesmatch>
</ifmodule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 30 seconds”
ExpiresByType text/html “access plus 500 seconds”
ExpiresByType application/xhtml+xml “access plus 500 seconds”
ExpiresByType image/jpg “access plus 14 days”
ExpiresByType image/jpeg “access plus 14 days”
ExpiresByType image/png “access plus 14 days”
ExpiresByType image/gif “access plus 14 days”
ExpiresByType image/x-icon “access plus 14 days”
ExpiresByType application/x-shockwave-flash “access plus 14 days”
ExpiresByType text/css “access plus 14 days”
#ExpiresByType text/javascript “access plus 14 days”
#ExpiresByType application/x-javascript “access plus 14 days”
</IfModule>

END Expires-Headers

Moin,
auch ich sollte kürzlich einen Blick auf die htaccess eines Kunden werfen, bin aber leider auch definitiv kein SEO-Profi. Jedenfalls wurde sich dort scheinbar bisher nach diesem Whitepaper gerichtet: http://docu.oxid-esales.com/devdocuments/whitepaper-performance-optimierung.pdf
Und nun ist/bleibt die Frage, ob das in dieser Form 1:1 noch Sinn macht heutzutage? Zumal ich fürchte, dass dort einige Zeilen nicht ganz korrekt sind, nämlich 5x “filesMatch” innerhalb “mod_headers”. Da scheint der Backslash falsch maskiert zu sein, z.B.:

<filesMatch "\\.(css)$">

Das besagt doch, dass zwingend ein Backslash erwartet wird, gefolgt von irgendeinem Zeichen (muss KEIN Punkt sein) und dann halt die Endung css. Korrekt wäre aber:

<filesMatch "\.(css)$">

da ja der Punkt maskiert werden soll und Backslashes eh nur unter Windows vorkommen. Was meint ihr, irgendwelche Einwände oder Verbesserungsvorschläge?
Danke + Gruß!

PS: hier mal der ganze Code:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
    ExpiresByType image/x-icon "access plus 604800 seconds"
    ExpiresByType image/jpeg "access plus 604800 seconds"
    ExpiresByType image/png "access plus 604800 seconds"
    ExpiresByType image/gif "access plus 604800 seconds"
    ExpiresByType image/ico "access plus 604800 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 432000 seconds"
    ExpiresByType text/css "access plus 432000 seconds"
    ExpiresByType text/javascript "access plus 432000 seconds"
    ExpiresByType application/x-javascript "access plus 432000 seconds"
    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

<ifModule mod_headers.c>
    <filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
        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>

    Header unset ETag
    Header unset Last-Modified
</ifModule>

FileETag None

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

Habt Ihr "JavaScript- und CSS-Ressourcen, die das Rendering blockieren"
schon wegbekommen?

Ich hab Probleme das critical css zu extrahieren, ich erwische damit nur ~80%

Das css ist beim pagespeed der letzte Punkt und ich krieg den nicht ausgefuchst grumel

Hallo Zusammen,

ich habe das selbe Problem wie Tecki.
Meine styles.min.css wird als blockierend angezeigt.

Laut Google heißt es:

[I]Diese Regel gilt, wenn PageSpeed Insights feststellt, dass eine Seite externe Stylesheets enthält, die das Rendern blockieren und damit die Darstellung von Inhalten auf dem Bildschirm verzögern.[/I]

Jedoch handelt es sich hierbei nicht um ein externes CSS.

Als Empfehlung gibt Google externe CSS direkt ins HTML einzufügen wenn diese klein sind. Falls diese groß sind nur den Teil der “above the fold” wichtig ist:

[I]Ermitteln Sie im Fall einer großen CSS-Datei den CSS-Code, der zum Rendern des ohne Scrollen sichtbaren Inhalts erforderlich ist. Platzieren Sie ihn inline und lassen Sie die übrigen Stile nach dem ohne Scrollen sichtbaren Inhalt laden.[/I]

Also habe ich den CSS-Code zu Header, Navigation, und Slider direkt in das base.tpl eingefügt.

Hat jedoch leider nicht gereicht, das Problem besteht noch immer.

Meine styles.min.css ist 304kb groß. Im Vergleich zur Oxid-Vanilla-Verison nur 130kb größer, was für einen umfangreichen Shop nicht ungewöhnlich ist.

Hat jemand eine Idee was ich noch tun kann?

304kb ist 5-10 mal größer als “gewöhnlich”.
demoshop css: ~ 45kb
mein angepasstes flow: 35kb
Amazon ~65kb.