Pagespeed verbessern

[yogi]

Hallo zusammen,

in letzter Zeit bekomme ich immer häufiger anfragen dazu den Pagespeed des Shops zu verbessern.
Hier gibt es generell mehrere Möglichkeiten und viele Ansatzpunkte.

Auch gibt es viele Tools/Seiten die einem einen PageSpeed ermitteln, ich habe für diese Anleitung http://gtmetrix.com benutzt.

Ein aktueller Test vor den hier beschrieben aktualisierungen ergibt folgende Werte für den webs demo shop:

GTmetrix Ergebnis vor der Optimierung

webs-speed1.png (62.29 KiB) 14741 mal betrachtet

Erster Schritt - im Backend
zunächst sollte man die Kompression der css und Javascript Dateien vom Shop aktivieren. Dieses Feature gibt es seit der V1.0.10 und ist seit der V1.0.17 vermutlich Fehlerfrei. Bei älteren Versionen kann es zu Verarbeitungsproblemen kommen so das die generierten Dateien nicht lauffähig sind - das kann man aber einfach Ausprobieren und wenns nicht klappt einfach wieder abschalten:

Backend -> Konfiguration -> Zusatzmodule
- CSS-Kompressor: auf minimized oder condensed setzten
- Javascript kombinieren: auf true
Nachteil dieser Aktion:
Das entwickeln und ändern der CSS und JS dateien wird erschwert, da man jedes mal daran denken muß den Cache zu löschen damit die Änderung auf eine Außenwirkung zeigt. Die WEBs Shop Software kann damit schon recht gut umgehen, da beim Abruf der neuen Dateien ein "VersionCode" angehängt wird, hier "?AB"

Code: Alles auswählen

<link rel="stylesheet" type="text/css" href="/css/webs.css?AB" />

Ergebnis:
* Minify CSS: 84% => 100%
* Inline small Javascript: 86% => 100%

Das Gesamtergebnis hat sich nun schon um einige Prozentpunkte im YSlow Grade verbessert ...

GTmetrix Ergebnis mit CSS Verdichtung und Javascript Zusammenfassung

webs-speed2.png (16.94 KiB) 14741 mal betrachtet

zweiter Schritt - /.htaccess Anpassen
Ein dicker Brocken ist noch die fehlende gzip Compression, die vor der Optimierung nicht vorhanden war.
Diese zu aktivieren geht leider nicht im Backend, sondern über eine Modifikation der aktuellen .htaccess, indem man den folgenden Block hinzufügt:

Code: Alles auswählen

<IfModule deflate_module>
    SetOutputFilter DEFLATE

    # Don't compress images
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

    # Make sure proxies don't deliver the wrong content
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
</IfModule>

Nun sieht das ergebnis gleich schon viel besser aus:

GTMetrix mit GZip Kompression

webs-speed3.png (14.13 KiB) 14741 mal betrachtet

Aber da geht noch mehr, denn auch das fehlende Browser Caching läßt sich über einen Block in der /.htaccess aktivieren:

Code: Alles auswählen

<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 application/x-shockwave-flash "access plus 604800 seconds"
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 604800 seconds"
    ExpiresByType application/javascript "access plus 604800 seconds"
    ExpiresByType application/x-javascript "access plus 604800 seconds"
</IfModule>

Leverage browser caching: 20% => 100%

Wie man sieht sind wir schon ganz schön weit gekommen:

GTmetrix mit Caching (1 Woche)

webs-speed4.png (17.88 KiB) 14741 mal betrachtet

Dritter Schritt: Core Code anpassen
Remove query strings from static resources:
Öffne die Datei /includes/classes/smarty_plugins/function.header.php und suche nach

Code: Alles auswählen

function smarty_function_header($params, $smarty)
{
    require_once(DIR_FS_INC . 'xtc_output_warning.inc.php');

füge hier vor dem require_once folgende Zeile ein

Code: Alles auswählen

    header(sprintf('Content-Type: text/html; charset=%s', CHARSET));

Diese Änderung wird auch in der nächsten WEBs V1.0.18 enthalten sein - somit hast Du keinen Update-Problem

Vierter Schritt: Modifikation am Template
Es gibt im aktuellen WEBs Template anscheinend stellen wo Bilder nicht durch die smarty image funktion geschickt werden, da die Größenangaben fehlen.
* templates/webs/img/logo.gif (Dimensions: 254 x 73)
* templates/webs/img/logo_small.gif (Dimensions: 32 x 31)
werden irgendwo im template referenziert - also suchen wir die stellen und finden in der /templates/webs/index.html

Code: Alles auswählen

<img src="{$tpl_path}img/logo.gif" alt="{$store_name}" title="{$store_name}" id="logo" />

den wir einfach durch diesen ersetzten

Code: Alles auswählen

{image src="`$tpl_path`img/logo.gif" alt="$store_name" title="$store_name" id="logo"}

gleiches gilt für das "logo_small.gif"

Code: Alles auswählen

<img src="{$tpl_path}img/logo_small.gif" alt="www.webs.de" />

wird ersetzt durch

Code: Alles auswählen

{image src="`$tpl_path`img/logo_small.gif" alt="www.webs.de"}

damit die ID im image auch ausgegeben wird muß noch die Smarty-Funktion erweitert werden. Suche dafür

Code: Alles auswählen

'class', 'width'

in der Datei includes/classes/smarty_plugins/function.image.php und füge dem Array ein

Code: Alles auswählen

'id', 

am Anfang hinzu.

Weitere TODOs:
- Combine images using CSS sprites: das ist derzeit nur durch viel Handarbeit zu realisieren. Auf wunsch kann das individuell für ein Kundentemplate gemacht werden, ist jedoch zeitaufwändig und damit kostenintensiv.
- Javascript könnte händisch minified werden um es auf den Server zu legen.

[rieste]

Ich darf mich hier mal bei Jörg bedanken!

Wir hatten diese Änderungen schon im Juli gemacht und es war ein wahrer Turbo Boost was Trafic und Bestellungen anging. Viele die Sich mit SEO beschäftigen wissen das Geschwindigkeit ein wichtiger Teil geworden ist und ich kann nur jeden empfehlen in diese Thematik auch mal zu investieren. Vieles wir von Jörg kostenlos angeboten doch fragt an was er darüber hinaus machen kann.

Wir investierten hier einige Euro um die Verbesserung zu machen und ich kann sagen das hat sich nach wenigen Wochen amortisiert! Klar gibt es keine Garantie aber wer stehen bleibt im Onlinegeschäft macht einen Rückschritt.

Aktuell erreichen wir 82/87 Aufgrund einer Aufwendigen Navigation bei ca. 5000 Produkten die Online sind.

[basteldehs]

Hallöchen,

also von mir noch ein feines Dankeschön für die nützlichen Infos,

habe es jetzt auch mal getestet funktioniert und ist auch bisl besser geworden 75% / 79%
nur macht der bei mir das:
Enable gzip compression F (17) 83%
Minify JavaScript C (72) 92%
Optimize images C (73) 75%

obwohl alles eingestellt ist, mmmmhhhhhhhhhhhh

braucht das seine zeit bis alles wirkt?

LG

[basteldehs]

Hallöchen,

meine Erfahrungen mit den neuen Einstellungen.
also habe die .htaccess geändert aber es ist nix passiert, aber auch gar nix

Grund:
es muss auf dem Server unbedingt das Modul Deflate und Expires auf Apache aktiviert sein, was mein Servertechniker gemacht hat.
danach haben auch die Änderungen in der .htaccess auch was bewirkt.

Neu
Page Speed Grade: (97%)
YSlow Grade: (86%)

also nochmals einen grossen Dank an Yogi

und was den Turbo Boost was Trafic und Bestellungen angeht ( wie bei rieste ) , da lass ich mich mal Überraschen und Berichte mal später.

grüssle basteldehsi