Pagespeed verbessern
Verfasst: Do 27. Nov 2014, 12: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: 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"
Ergebnis:
* Minify CSS: 84% => 100%
* Inline small Javascript: 86% => 100%
Das Gesamtergebnis hat sich nun schon um einige Prozentpunkte im YSlow Grade verbessert ... 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:
Nun sieht das ergebnis gleich schon viel besser aus:
Aber da geht noch mehr, denn auch das fehlende Browser Caching läßt sich über einen Block in der /.htaccess aktivieren:
Leverage browser caching: 20% => 100%
Wie man sieht sind wir schon ganz schön weit gekommen: Dritter Schritt: Core Code anpassen
Remove query strings from static resources:
Öffne die Datei /includes/classes/smarty_plugins/function.header.php und suche nach
füge hier vor dem require_once folgende Zeile ein
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
den wir einfach durch diesen ersetzten
gleiches gilt für das "logo_small.gif" wird ersetzt durch
damit die ID im image auch ausgegeben wird muß noch die Smarty-Funktion erweitert werden. Suche dafür in der Datei includes/classes/smarty_plugins/function.image.php und füge dem Array ein 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.
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: 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" />
* Minify CSS: 84% => 100%
* Inline small Javascript: 86% => 100%
Das Gesamtergebnis hat sich nun schon um einige Prozentpunkte im YSlow Grade verbessert ... 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>
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>
Wie man sieht sind wir schon ganz schön weit gekommen: 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');
Code: Alles auswählen
header(sprintf('Content-Type: text/html; charset=%s', CHARSET));
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" />
Code: Alles auswählen
{image src="`$tpl_path`img/logo.gif" alt="$store_name" title="$store_name" id="logo"}
Code: Alles auswählen
<img src="{$tpl_path}img/logo_small.gif" alt="www.webs.de" />
Code: Alles auswählen
{image src="`$tpl_path`img/logo_small.gif" alt="www.webs.de"}
Code: Alles auswählen
'class', 'width'
Code: Alles auswählen
'id',
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.