onygo

Geschwin­dig­keit einer Web­site ist ein wich­ti­ger Fak­tor für die User Expe­ri­ence einer Web­site. Und seit Anfang des Jah­res natür­lich auch ein wich­ti­ger Fak­tor für das Google Ran­king einer Web­site.

Word­Press ist Out-of-the-box nicht unbe­dingt ein Per­for­mance Biest. Aber mit ein wenig Tuning ist das schon recht gut hinzukriegen.

Fol­gende Auf­ga­ben sind bei der Opti­mie­rung zu erledigen:

• Caching der gene­rier­ten Word­Press Seiten
• Zusam­men­fas­sen von Java­script und CSS Dateien in jeweils eine Datei
• Akti­vie­rung des Cachings von sta­ti­schen Dateien

Die ers­ten bei­den Auf­ga­ben habe ich mit­hilfe von zwei Word­Press Plugins rea­li­siert: WP Super Cache und WP Minify. Die dritte Auf­gabe lässt sich auf einem Shared Hos­ting Ser­ver mit Hilfe von .htac­cess realisieren.

Über WP Super Cache habe ich ja bereits geschrie­ben, aller­dings ist jetzt eine neue Kon­fi­gu­ra­ti­ons­mög­lich­keit hin­zu­ge­kom­men. Seit neu­es­tem kann man auto­ma­tisch für alle Word­Press Sei­ten sta­ti­sche Abbil­der der Seite im Vor­aus gene­rie­ren. Ich habe es so kon­fi­gu­riert, dass die Caches auto­ma­tisch alle zwei Stun­den neu gene­riert werden.

WP Minify fasst alle in einem Tem­plate vor­han­de­nen CSS und Java­script Files auto­ma­tisch zusam­men. Das Plu­gin musste ich nur instal­lie­ren und schon funk­tio­nierte es einwandfrei.

Die letzte Auf­gabe, das Caching von sta­ti­schen Dateien, lässt sich durch ein­fa­ches Ein­fü­gen von fol­gen­dem Code in die .htac­cess Datei akti­vie­ren. Die Dateien wer­den für zwei Monate gecacht, das lässt sich aber natür­lich anpassen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Expire headers 5184000 Sekunden = 2 Monate
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresByType image/x-icon "access plus 5184000 seconds"
ExpiresByType image/gif "access plus 5184000 seconds"
ExpiresByType image/jpg "access plus 5184000 seconds"
ExpiresByType image/png "access plus 5184000 seconds"
ExpiresByType text/css "access plus 5184000 seconds"
ExpiresByType text/javascript "access plus 5184000 seconds"
ExpiresByType application/javascript "access plus 5184000 seconds"
ExpiresByType application/x-javascript "access plus 5184000 seconds"
</ifmodule>
 
# BEGIN Cache-Control Headers
<ifmodule mod_headers.c>
<filesmatch "\\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=5184000, public"
</filesmatch>
<filesmatch "\\.(css)$">
Header set Cache-Control "max-age=5184000, private"
</filesmatch>
<filesmatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesmatch>
</ifmodule>
 
# Turn ETags Off
<ifmodule mod_headers.c>
Header unset ETag
</ifmodule>
FileETag None

Durch diese Maß­nah­men hat sich die Per­for­mance mei­nes Blogs im Ver­gleich zu vor­her deut­lich gesteigert.

Caching ist eine schöne Sache. Die Sei­ten wer­den schnel­ler aus­ge­ge­ben und man muss kür­zer war­ten. Marian hat auf uxzen­trisch beschrie­ben, warum schnelle Web­sites wich­tig sind.

Nur wie soll man dann aktu­elle Daten wie den letz­ten Tweet anzei­gen. Die Lösung ist Java­script und ins­be­son­dere mal wie­der jQuery.

Auf onygo benutze ich das Word­Press Plug-In WP Super Cache um die Word­Press Sei­ten zu cachen. Die gecach­ten Sei­ten wer­den nach 86400 Sekun­den — also einem Tag — gelöscht.

Um die Tweets via jQuery abzu­ru­fen und aus­zu­ge­ben ver­wende ich die Plug-Ins jTwit­ter und Timeago sowie die Date Erwei­te­rung Date.format. Zudem benutze ich das Word­Press Plug-In Twit­ter Tools von Alex King, um Tweets auch ohne Java­script — dann aber nicht den neu­es­ten — anzuzeigen.

Zudem benutze ich eine AJAX–Loader-Grafik von Ajax­load.

Mein HTML besteht aus je einem span für den Tweet und einem für sei­nen Zeits­tem­pel. Zudem wird ein Pre­loa­der für die Lade­zeit eingeblendet.

1
2
3
4
5
6
7

<div id="twitter">
  <span class="status jshide">
    <span id="tweet">Tweettext</span>
    <span id="tweettime">Tweettime</span>
  </span>
  <span class="preloader nojshide"><img src="ajax-loader-white.gif" /></span>
</div>

Die bei­den Ele­mente wer­den wie hier beschrie­ben abhän­gig vom Vor­han­den­sein von Java­script ange­zeigt. Dafür wird fol­gen­des CSS benutzt:

1
2
3

.hide, .hasjavascript .jshide, .hasnojavascript .nojshide {
  display:none;
}

Und natür­lich muss auch noch etwas in die $(document).ready Funk­tion ein­ge­fügt werden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$(document).ready(function(){
  $.jTwitter('TWITTERID', 1, function(posts){
    var text = posts[0].text ;
    text = text.replace(/http:\/\/(\S*)/gi,"<a href=\"http://$1\" class=\"external\">http://$1</a>");
    text = text.replace(/https:\/\/(\S*)/gi,"<a href=\"https://$1\" class=\"external\">https://$1</a>");
    text = text.replace(/@(\w*)/gi, "@<a href=\"http://twitter.com/$1\" class=\"external\">$1</a>");
    text = text.replace(/#(\w*)/gi, "#<a href=\"http://search.twitter.com/search?q=%23$1\" class=\"external\">$1</a>");
 
    if (posts[0].in_reply_to_screen_name) {
        text += ' <a href="http://twitter.com/'+posts[0].in_reply_to_screen_name+'/statuses/'+posts[0].in_reply_to_status_id+'" class="aktt_tweet_reply external">';
        text += 'als Antwort auf '+posts[0].in_reply_to_screen_name+'</a> ';
    }
    $('#tweet').html(text);
 
    var thedate = new Date(posts[0].created_at);
    var thetime;
    var isodate = thedate.format("c");
    thetime = '[<a href="http://twitter.com/'+ posts[0].user.screen_name +'/statuses/'+ posts[0].id +'" class="aktt_tweet_time external timestamp" timestamp="' + isodate + '" title="' + isodate + '">';
    thetime += 'am '+ thedate.format("j. M Y") + ' um ' + thedate.format("H:i");
    thetime += '</a> via ' + '<a href="http://twitter.com/'+ posts[0].user.screen_name +'/" class="external">Twitter</a>]';
 
    $('#tweettime').html(thetime);
    $(".timestamp").timeago();
    $("#twitter .preloader").addClass('hide');
    $("#twitter .status").removeClass('jshide');
  });
});

Mein HTML ist im Java­script fest ein­co­diert und muss ent­spre­chend ange­passt wer­den. Und natür­lich muss die rich­tige Twit­te­rID ange­ge­ben werden.