WordPress & Webwork

5 einfache Maßnahmen um die Performance von WordPress-Websites zu verbessern

Performance, Icon von www.webiconset.com Im folgenden gibt es ein paar Tipps mit denen man die Performance seiner WordPress-Website verbessern kann. Klar, dass sind einige und nicht alle Tipps. Aber auch hier gilt die 80:20-Regel: mit 20% der Maßnahmen erreicht man 80% der Effekte. In diesem Artikel geht es mir um die Maßnahmen, die auch ein weniger erfahrene Nutzer umsetzen kann und die dennoch eine hohe Wirkung entfalten können.

1. Bilder und Videos im Inhalt

Logisch, ein guter Blog-Artikel beinhaltet nach Möglichkeit aussagekräftige Bilder und falls vorhanden auch Videos bzw. Screencasts. Das hilft dem Leser und wird auch von den Suchmaschinen honoriert. Hierbei verbirgt sich ein hohes Optimierungspotential und hier kann auch ein Nutzer der keine Admin-Rechte hat mithelfen.

Im Artikel "Die großen Performance-Bremsen im Frontend 2" habe ich ausführlich erklärt, wie man die Bilder in Artikeln optimieren kann und worauf man achten sollte. Im Prinzip sollte man das passende Format wählen, in der Regel PNG vs. JPG, abwägen zwischen einer verkleinerten Gesamtgrafik oder einem Ausschnitt und auf einen vernünftigen Bildoptimierer zurückgreifen. Es muss nicht immer Photoshop sein. Auch Freeware wie IrfanView & Co. liefern sehr gute Ergebnisse.

Vorschau-Bild anstatt Video-iframe

Vorschau-Bild anstatt Video-iframe

Videos kann man auf zwei Wegen sparsamer einbinden. Entweder in dem man auf das Plugin WP YouTube Lyte zurückgreift – hier wird ein Vorschaubild eingebunden und erst auf den zweiten Klick das Video abgespielt – oder in dem man manuell ein Screenshot des abspielenden Videos erstellt und im Artikel einbindet und auf das Video verlinkt. So habe ich das in der Abbildung oberhalb dieses Absatzes gemacht.

2. Template-Dateien ausmisten

Auch im Theme und bei den einzelnen Template-Dateien kann man einiges erreichen. Als erstes sollte man schauen, dass man auf die CSS-Datei per link und nicht per @import verweist. Die link-Lösung ist performanter.

Nicht mehr benötigte CSS-Regeln sollte man entfernen. Hierbei kann das Tool CSS Usage helfen. Darüber hinaus sollte man schauen ob man die Regeln in Kurzschreibweise notieren kann. Aus…

.inhalt {
    font-weight: bold;
    font-size: 1.2em;
    font-family: verdana, arial, sans-serif;
    margin-top: 10px;
    margin-right: 12px;
    margin-bottom: 15px;
    margin-left: 5px;
    color: #333333;
}

… wird dann folgendes…

.inhalt {
    font: bold 1.2em verdana, arial, sans-serif;
    margin: 10px 12px 15px 5px;
    color: #333;
}

Man kann auch die gleichen Deklarationen zusammenfassen. Aus…

.sidebar {
    padding: 1em;
    margin-top: 2em;
    font-size: 14px;
}

.zusatz-sidebar {
    padding: 1em;
    margin-top: 2em;
    font-size: 14px;
}

… wird dann…

.sidebar, .zusatz-sidebar {
    padding: 1em;
    margin-top: 2em;
    font-size: 14px;
}

Gibt es in der functions.php und der .htaccess Anweisungen die nicht mehr notwendig sind? Dann raus damit … evtl. in eine Textdatei, die dir als Archiv für schon mal benutze Code-Fragmente dient.

3. Vernünftiger Umgang mit Plugins und Social-Dingens

Generell sollte man bei der Einbindung von Plugins sparsam vorgehen und sich kritisch hinterfragen: Brauch ich das Plugin und gibt es sparsamere Alternativen?

Manche Plugins, wie das Get Recent Comments cachen die ausgabe und davon sollte man auf jeden Fall Gebrauch machen. Im Artikel "Welches Plugin bremst die Seite aus?" habe ich P3 (Plugin Performance Profiler) vorgestellt. Dieses Plugin zeigt auf welche Plugins, die meisten Ressourcen beanspruchen.

Performance Optimierung: dynamische vs. statische Social-Buttons

In den beiden Artikeln "Performance Optimierung: dynamische vs. statische Buttons, was sagt Google dazu?" und "Facebok: Like-Box entfernen & Website beschleunigen" habe ich gezeigt, wie sich die Einbindung von den sozialen Netzwerken bzw. Social-Buttons auf die Performance der Website auswirken kann.

Durch die Einbindung von zusätzlichen Javascripten, CSS, Grafiken und iframes haben diese Dienste ein hohes Potential um die Website auszbremsen. Hier muss jeder Webmaster für sich selber entscheiden: ist ihm die Performance oder die zusätzliche soziale Reichweite wichtiger.

4. Komprimieren und besser Cachen

Läuft auf deinem Server Apache 2 und du hast Zugriff auf die .htaccess? Dann einfach folgendes in die Datei eintragen:

# mod_deflate (gzip) aktivieren
<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

# ExpiresHeader: verhindert bedingte GET-Anfragen
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 35 days"
</IfModule>

Der erste Block aktiviert auf dem Apachen 2 die Komprimierung (gzip) und es werden alle relevanten Textdateien komprimiert. Grafiken muss man hier nicht aufnehmen, da du diese mit dem vernünftigen Grafikprogramm eh schon komprimiert hast … das würde nur unnötig den Server belasten.

Der zweite Block verpasst den Dateien im Cache eine zusätzliche Information, so dass der Server die Dateien aus dem Cache direkt lädt ohne noch einmal mit dem Server zu kommunizieren. Siehe auch "WordPress-Websites beschleunigen 4: ein Zwischenergebnis".

5. Helfende Plugins

Nach dem du die oberen Maßnahmen schon umgesetzt hast, dann kann man eines der vielen Caching-Plugins installieren. Ich persönlich bevorzuge Hyper Cache für meine Projekte und finde das neue Cachify von Sergej Müller empfehlenswert. Beide sind recht schlank gehalten im Gegensatz zu so Optionsmonstern wie es W3-Cache oder WP-Super-Cache sind.

6. Zu guter Letzt

Sicherlich, es gibt noch einige weitere Maßnahmen, die man dem Server oder der Datenbank durchführen kann. Viele haben aber hierbei kaum Einfluss, da nur wenige einen eigenen Server haben und vor allem eignen sich diese Maßnahmen nur für sehr erfahrene Nutzer.

Es gibt eine Reihe hilfreicher Tools, die einem hilfreich zu Seite stehen. Einige davon habe ich vorgestellt: GTmetrix, Page Speed Online, Firebug, YSlow und Pingdom. Die zeigen dir nur nicht nur die werte sondern geben, wie z. B. YSlow und Page Speed, auch nützliche Tipps.

Allerdings muss du bei diesen Tipps ebenfalls Augenmaß behalten und schauen welche Tipps für einen persönlich sinnvoll sind und welche du leicht umsetzen kannst. Diese Tools meckern häufig über nicht gezippte oder schlecht gecachte Javascripte … handelt es sich um Scripte von externen Diensten, dann hat man eben keinen Einfluss darauf.

Ebenfalls wird recht schnell empfohlen, dass man die statischen Komponenten, wie z. B. Grafiken und CSs auf einen sog. CDN auslagert, damit so viele Komponenten wie möglich parallel geladen werden. Diese Auslagerung lohnt sich auf jeden Fall für sehr große Seiten, wie es Amazon, Spiegel,de & Co. sind.

Ich habe drei Versuche unternommen und habe Komponenten von unseren Projekten auf eine andere Domain ausgelagert und die Performance-Gewinne waren minimal und standen in keinem Verhältnis zu der zusätzlichen Verwaltung.

Icon von www.webiconset.com

12 Reaktion(en)

  1. Pingback: metafakten // metalinks am 21. März 2012

  2. Stephan Gröschler

    Danke für den Tipp mit CSS Usage – es hat sich richtig gelohnt. Die style.css wurde (ich traue es mich gar nicht sagen) 30% kleiner *schäm*
    Das lag an den ganzen Sachen, die ich in zwei Jahren ausprobiert hatte, aber dort drinnen stehen gelassen habe.

    Nächster Punkt ist -und davor graust mir richtig!- die Kurzschreibweisen bei CSS.

    Grüße,
    Stephan

  3. shogun

    Zur Grafik aus Punkt 3.: Soweit ich das nach Jahren testen konnte, fließen in die Webseitengeschwindigkeitsbewertung (was für ein Wortmonster) die Werte aus dem Google-Plugin PageSpeed (als Addon zu FireBug) ein. PageSpeed liefert auch viele und richtige Tipps, was noch an der Webseite verbessert werden kann. Einige von den Tipps sind dabei nur von Selbshostern durchsetzbar, aber z.B. optimierte Grafiken werden von dem Plugin gleich zum Download angeboten.

  4. lioman

    Bei mir hat es sich gelohnt die deutsche Sprachdatei zu deaktivieren. Diese verbraucht viel zu viele Ressourcen und sichtbar ist es eigentlich hauptsächlich im Backend.

  5. Viktor

    Cachify mit der Option HDD Caching ist bei korrekter Installation der Hammer schlechthin. Die PHP Verarbeitung findet dann gar nicht mehr statt (im festgelegten Zeitfenster). Es wird lediglich nur noch das gecachte HTML file ausgegeben. Hat mein Blog von ~5s auf ~1.5s runtergebracht!!

  6. Pingback: 7 Tipps zum Beschleunigen einer Website » GeldimWWW.de

  7. Pingback: WordPress: meine Top-15-Plugins » WordPress & Webwork

  8. Pingback: In den Bildern liegt eines der größten Potentiale bei der Optimierung der Frontend-Performance » WordPress & Webwork

  9. Pingback: WordPress: 10 Plugins die du unbedingt brauchst | perun.net

  10. Pingback: WordPress: 11 Plugins, die das Leben eines Admins erleichtern | WordPress

Die Kommentare in diesem Beitrag sind geschlossen.