perun.net – WordPress & Webwork



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

Von am 19. 03. 2012 um 14:25

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.

[adrotate group="6"]

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

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

 — 


12 Kommentare

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

    Pingback vom 21.03.2012 um 17:02

    [...] 5 einfache Maßnahmen um die Performance von WordPress-Websites zu verbessern | WordPress & Webw… – Von Vladimir auf WordPress & Webwork. [...]

  2. 2.Stephan Gröschler

    Kommentar vom 27.03.2012 um 19:40

    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. 3.shogun

    Kommentar vom 11.04.2012 um 22:50

    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. 4.Frank

    Kommentar vom 02.05.2012 um 15:52

    Ich bedanke mich auch herzlich für den Tipp mit dem gZip über den Apache Server. Konnte 80% sparen! Super Sache!

  5. 5.lioman

    Kommentar vom 24.05.2012 um 16:46

    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.

  6. 6.Viktor

    Kommentar vom 24.05.2012 um 17:04

    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!!

  7. 7.7 Tipps zum Beschleunigen einer Website » GeldimWWW.de

    Pingback vom 17.07.2012 um 13:56

    [...] Zwei Beispiele (in Anlehnung an die von Vladimir, der ähnliche Tipps für WordPress-Nutzer gibt): [...]

  8. 8.WordPress: meine Top-15-Plugins » WordPress & Webwork

    Pingback vom 23.01.2013 um 16:25

    [...] Allerdings ist ein Caching-Plugin nur eines von mehreren Maßnahmen: 5 einfache Maßnahmen um die Performance von WordPress-Websites zu verbessern. [...]

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

    Pingback vom 25.02.2013 um 19:31

    [...] Ein weiterer Artikel zum Thema Performance-Optimierung wäre dieser hier: 5 einfache Maßnahmen um die Performance von WordPress-Websites zu verbessern. [...]

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

    Pingback vom 10.06.2013 um 15:19

    [...] Allerdings ist der Einsatz eines solchen Plugins nur eines von mehreren Maßnahmen: 5 einfache Maßnahmen um die Performance von WordPress-Websites zu verbessern. [...]

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

    Pingback vom 14.06.2013 um 15:28

    [...] dem Besucher die Website schneller zu präsentieren, empfiehlt es sich, nach dem man vorher die grundlegenden Schritte der Performance-Optimierung durchgeführt hat, eines der Caching-Plugins zu [...]

  12. 12.Ungeheuler

    Kommentar vom 16.08.2013 um 10:45

    Interessant das mit der CSS Datei. Vielleicht auch für mich als unbedarften eine Möglichkeit die Performance zu erhöhen…

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.