WordPress Performance verbessern

Wednesday, August 27th, 2008 | mach's dir selbst

Die 1. Regel in der Optimierung einer Homepage ist die Minimierung der HTTP-Requests, also die Anzahl der Dateien die der Browser laden muss.

Das wusste man auch schon im Zeitalter von < Web 0.1, deswegen haben die Browser-Herstellen den Cache (Zwischenspeicher) erfunden. Im Cache speichert der Browser HTML, CSS, JavaScript und andere Dateien, damit diese nicht erst aus dem “langsamen” Internet geladen werden müssen. Im Firefox kann man sich den Inhalt vom Cache ansehen, wenn man about:cache in die Adresszeile eingibt.

Jedoch ist das für den Browser ein Tanz auf dem Drahtseil, er muss für jede Datei entscheiden, ob diese aus dem Cache oder aus dem Internet geladen werden soll. Der Browser weiß nicht, ob die Datei im Cache noch aktuell oder inzwischen veraltet ist. Es gibt verschiedene Wege dem Browser dabei zu helfen, das Thema in diesem Post soll der Expires-Header werden.

Mit dem Expires-Header gibt man dem Browser vor bis wann eine Datei im Cache gehalten werden kann. Erst danach wird der Browser die Datei wieder aus dem Internet laden.

Das ist in der Regel aber kein Problem, wenn man in der HTML-Datei die URLs mit einem Parameter aufruft. Dieser Parameter ändert sich bei einer Änderung der Datei. Ich habe mal einen Screenshot der CSS-Includes bei der Wikipedia gemacht:

Wie man sieht hängt die Wikipedia “?165” an die Datei, wenn die CSS-Dateien verändert werden, wird aus der 165 sicher eine 166. Beim nächsten Besuch holt der Browser sich diese “neue” Datei.

Auch WordPress ruft JavaScript -und CSS-Dateien mit einem Parameter auf. Es werden jedoch keine Expires-Header gesetzt, dies wird wahrscheinlich nicht gemacht weil es nicht unter allen Umgebungen unterstützt wird. Bei den meisten Providern wird folgende Lösung jedoch funktionieren, ein Versuch ist es auf jeden Fall wert.

Dazu muss lediglich eine .htaccess Datei unter wp-admin angelegt werden:
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"

Beim Apache-Webserver muss das Module mod_expires installiert sein, wenn es zu keinem Fehler kommt, ist es installiert.

Wenn alles funktioniert kann die .htaccess-Datei auch unter wp-includes kopiert werden. Jedoch sollte die Datei nicht unter wp-content kopiert werden.

WordPress ruft die Bilder ohne einen Parameter auf, d.h. bei einer Änderung z.B. einem Update muss der Browser-Cache gelöscht werden. Alternativ könnte man jede WordPress-Version in einen anderen Ordner installieren, das ist etwas komplizierter – vielleicht schreibe ich dazu noch einmal etwas.

Man könnte natürlich auch die Bilder ohne, bzw. mit einem geringeren Expires-Header, ausgeben:
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 day"
ExpiresByType image/jpeg "access plus 1 day"
ExpiresByType image/png "access plus 1 day"

Bringt das überhaupt etwas?

YSlow ist ein Firefox-Plugin das speziell für die Performance-Analyse von YAHOO! entwickelt wurde. YAHOO! bietet es kostenlos zum Download an.

Ohne die .htaccess Datein bekommt die “Write Post”- Seite von WordPress mit 38 Punkten eine 6, mit den beiden Dateien kommt die Seite auf 79 Punkte:

Man kann so auch ohne Google Gears bzw. die Turbo-Funktion von WordPress eine bessere Performance bekommen.

Tags: , , , ,

20 Kommentare to WordPress Performance verbessern

drumba
August 27, 2008

Danke für den Tipp, das werde ich demnächst mal testen.

drumbas last blog post..Monsterzeug folgt Greatnet und Kruta

Gerd-E.
August 27, 2008

Hi,
super, vom Prinzip kann ich folgen;-)
Ist die Geschwindigkeitsverbesserung zu merken oder sind das nur Millisekunden??

Gerd-E.s last blog post..Veränderungen bei GmbH-Gründung mit MoMiG

infogurke
August 28, 2008

@Gerd, gemessen habe ich das jetzt nicht; aber WordPress “fühlt” sich schneller an. Bei mir zu Hause mit 1Mbit DSL fällt das im Gegensatz zu meinem Arbeitsplatz mit 16Mbit weit mehr ins Gewicht.

Einen riesigen Unterschied konnte ich bei mir nicht festellt, das liegt aber zum großen Teil auch daran, dass ich im Firefox Firebug, Html Tidy und YSlow als Extensions installiert habe und die den Fuchs schon deutlich verlangsamen. Dazu kommt noch, dass ich unter Linux arbeite und dort der Firefox – im Gegensatz zu Windows – eher träge ist.

Markus
August 28, 2008

Was auch immer Google Gears mit der Performance Optimierung einer Webseite zu tun hat..
Ansonsten ist der Tipp gut und das mit dem Parametern hinter CSS Dateien auch während der Entwicklung einer Webseite sehr praktisch.
Evtl. ist es vielleicht noch erwähnenswert, dass YSlow eine Erweiterung von dem eigentlich benötigtem Firefox Add-on Firebug ist.

Passend zu YSlow hier noch ein Artikel:
YSlow Perfomance Plugin – Optimiere deine Webseite

Und wer wirklich Wert auf eine schnelle Webseite legt sollte sich einmal die Präsentation von Steve Souders “High Performance Web Sites: 14 Rules for Faster Pages” ansehen.

Grüße
Markus

Markuss last blog post..Das Internet – wie alles begann

Robert
August 28, 2008

Gute Idee! Wie so oft ist es ein sehr nahe liegender Gedanke, der trotzdem erst entdeckt werden musste – gerade weil man oft den Blick für die “alten” Technologien aus lauter blinder Liebe zum gehypten Gadget von heute wie eben Gears aus den Augen verliert.

Roberts last blog post..Verrücktes Pferd mit schweren Blutungen [1]

Kim
August 28, 2008

Ich habs heute bei mir ausprobiert, und läuft ohne Problem. Und spätestens bei einer langsamen Verbindung merkt man es deutlich.

Kims last blog post..WordPress Admin ohne Google Gears beschleunigen

Paul
August 28, 2008

Vielen Dank für das hilfreiche Tutorial, werde ich die Tage auch mal testen.

Pauls last blog post..Blogtopf und der Google Sitelink

Sergej Müller
August 28, 2008

Gut, ist aber nur ein Bruchteil der Optimierungsmöglichkeiten. Nachfolgend sind mehr als 20 Tipps einer sinnvollen Optimierung für WordPress: http://www.crazyleafdesign.com/blog/20-tips-and-tricks-to-speed-up-your-wordpress-blog/

infogurke
August 29, 2008

@Sergej, über die Tipps lässt sich streiten. Punkt 16 mit “Optimize database using phpMyAdmin.” beispielsweise; wer ernsthaft mit MySQL arbeitet, arbeitet nicht mit phpMyAdmin.

Das mag zwar ein Burchteil sein, aber es ist ein sehr einfacher und schneller Tipp mit großem Nutzen.

Sergej Müller
August 29, 2008

Zitat: “…wer ernsthaft mit MySQL arbeitet, arbeitet nicht mit phpMyAdmin.”
Gegenargument: Wer ernsthaft mit CSS arbeitet, arbeitet nicht mit mehreren CSS-Dateien, achtet auf die Header und setzt Firebug sowieso als Werkzeug ein.

In jedem Tipp steckt ein Stück Performance.
Aber ich weiß was du meinst 😉

Sergej Müllers last blog post..Wartungsupdate für wpSEO

infogurke
August 29, 2008

Jepp, deswegen setzen wir auf der Arbeit auch auf einen CSS-Builder. Der nimmt mehrere “Source-CSS-Dateien” und fügt diese zu einer großen Datei zusammen. Vielleicht eine Idee für ein WordPress Plugin…

Sergej Müller
August 29, 2008

@martin
Bin der Meinung, so etwas gibt es schon. Wenn nicht, dann mach ich schnell einen 😉

Sergej Müllers last blog post..Wartungsupdate für wpSEO

Frank
September 15, 2008

Ich liefere es ebenso aus und kann es aus der Erfahrung nur unterstreichen. Ich nutze einen anderen Syntax um das Modul abzufragen, im Grunde aber das gleiche.

# compress
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|txt|php|html|jpg|gif|png)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Alternativ bietet es sich an, wenn man ein Theme erstellt und JS und CSS optimiert hat, aber trotzdem gern die Edit-Möglichkeit im Editor zu haben, dass man das Stylesheet mit einem Schlüssel ausgibt, so wird es auch nur bei unterschiedlichem Schlüssel neu geladen. Einfach in die functions.php des Themes.

/**
* Smart cache-busting
* http://www.alistercameron.com/2008/09/10/smart-cache-busting-for-your-wordpress-stylesheet/
*/
if (!function_exists('css_cache_buster')) {
function css_cache_buster($info, $show) {
if ($show == 'stylesheet_url') {

// Is there already a querystring? If so, add to the end of that.
if (strpos($pieces[1], '?') === false) {
return $info . "?" . filemtime(WP_CONTENT_DIR . $pieces[1]);
} else {
$morsels = explode("?", $pieces[1]);
return $info . "&" . filemtime(WP_CONTENT_DIR . $morsles[1]);
}
} else {
return $info;
}
}

add_filter('bloginfo_url', 'css_cache_buster', 9999, 2);
}

Jared
February 15, 2009

Ich bin selber grade dabei meinen Blog und mein Portfolio zu optimieren und habe den Artikel über Google gefunden.

Leider wird meine Seite mit der oben beschriebenen Methode noch langsamer :(
Habe ich etwas falsch gemacht? Ich habe einfach die .htacces mit dem erforderlichem Code in /wp-admin gespeichert…

lg

infogurke
February 16, 2009

Was heißt denn langsamer, gefühlt oder gemessen?

Jared
February 16, 2009

Gefühlt auf jeden Fall langsamer 😉 und mit Yslow bestätigt.
Vorher lag die durchschnittliche Ladezeit bei 2,4sek und nach der von dir beschriebenen Methode bei ca. 19sek!

infogurke
February 16, 2009

Oh, das ist heftig 😉

Spontan fällt mir dazu jetzt aber nix ein, vielleicht liegts am Webserver…

Einen anderen Browser hast du mal ausprobiert?

Voku
January 10, 2010

Habe in den letzten Tagen meine Webseiten auch mal mittels “YSlow” optimiert und dazu einen kleinen Blog-Eintrag verfasst:

-> http://voku-online.de/comment-n153.html

PS: schaut euch mal mal “mod_deflate” an, damit kann die Ladegeschwindigkeit einer Webseite noch einmal drastisch steigern…

momig
March 17, 2010

[…] hier Literaturlisten und andere Werkzusammenstellungen zu aktuellen Wirtschaftsthemen. ZBW_news …Wordpress Performance verbessern – infogurke.deDie 1. Regel in der Optimierung einer Homepage ist die Minimierung der HTTP-Requests, also die […]

[…] reading here: WordPress Performance verbessern – infogurke.de Tags: optimierung, […]