Pagespeed verbessern

Pagespeed verbessern

Beitragvon yogi » Do 27. Nov 2014, 13:40

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:
webs-speed1.png
GTmetrix Ergebnis vor der Optimierung
webs-speed1.png (62.29 KiB) 2188-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 ...
webs-speed2.png
GTmetrix Ergebnis mit CSS Verdichtung und Javascript Zusammenfassung
webs-speed2.png (16.94 KiB) 2188-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:
webs-speed3.png
GTMetrix mit GZip Kompression
webs-speed3.png (14.13 KiB) 2188-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:
webs-speed4.png
GTmetrix mit Caching (1 Woche)
webs-speed4.png (17.88 KiB) 2188-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.
yogi
Administrator
 
Beiträge: 289
Registriert: Do 6. Mai 2010, 16:16
Wohnort: Köln

Re: Pagespeed verbessern

Beitragvon rieste » Do 27. Nov 2014, 16:37

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.
rieste
 
Beiträge: 134
Registriert: Fr 18. Mär 2011, 08:54

Re: Pagespeed verbessern

Beitragvon basteldehs » Di 2. Dez 2014, 11:01

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
Mein Online Shop http://www.bastel-dehs.de
basteldehs
 
Beiträge: 77
Registriert: So 20. Okt 2013, 08:29
Wohnort: Chemnitz

Re: Pagespeed verbessern

Beitragvon basteldehs » Fr 5. Dez 2014, 07:33

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 ) :D :D , da lass ich mich mal Überraschen und Berichte mal später.

grüssle basteldehsi
Mein Online Shop http://www.bastel-dehs.de
basteldehs
 
Beiträge: 77
Registriert: So 20. Okt 2013, 08:29
Wohnort: Chemnitz



Ähnliche Beiträge


Zurück zu INFORMATIONEN

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron