Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

WordPress schneller machen – Optimierung mit Google PageSpeed

WordPress schneller machenWordPress ist nicht nur ein Blog-System, sondern wird auch für deutlich mehr Zwecke eingesetzt. Kein Wunder, schließlich lässt sich das System durch Plugins und Themes fast beliebig erweitern, ausbauen und individuell auf verschiedene Bedürfnisse anpassen. Doch WordPress ist bekanntlich nicht das schnellste System und wird auch mit der Zeit immer langsamer: Plugins und Datenbankeinträge machen dem System zu schaffen. Alles benötigt Ressourcen, die oftmals aber ausbleiben. Mit einigen Handgriffen lässt sich WordPress in der Geschwindigkeit deutlich steigern und seine Seite deutlich schneller machen. Das kommt nicht nur den Besuchern zugute, sondern auch dem Google-Ranking.

Viele Stellschrauben für die WordPress-Power

Ehrlich gesagt gibt es viele verschiedene Stellschrauben die gedreht werden müssen, um WordPress performanter zu machen. Das bedeutet, dass einige Klicks und viel Zeit nötig ist.

Doch es geht nicht nur um die WordPress-Power, sondern auch um die Power des Servers, die durch solche Stellschrauben geschont werden kann. Wie man WordPress schneller machen kann und dabei noch den Server schont, beschreibe ich in diesem Artikel.

Das Theme als Basis

Wer WordPress für seine Webseite nutzt, wird auch ein Theme installiert haben oder zumindest das Standard-Theme nutzen. Jedes Theme hat entsprechende Optionen und lässt sich aus dem Backend heraus anpassen. Das Problem: Dadurch entstehen Datenbankabfragen, die den Server belasten. Außerdem benötigt jede Serveranfrage ein wenig Zeit.

Also ist mein erster Tipp: Serveranfragen im Theme reduzieren. Überflüssige Anfragen rauslöschen. Doch Vorsicht: Ich empfehle jedem, vorher ein Backup des Themes zu machen, damit im Falle eines Falles alles wieder auf Anfang gestellt werden kann, bzw. alles wiederhergestellt werden kann, als alles Funktioniert hat.

Wer im Quellcode vom Theme hantiert, sollte schon etwas Ahnung von dem haben, was er macht. Aber: Alles kann man lernen, auch das WordPress-System und der entsprechende Aufbau von Themes.

Plugins ausmisten

Mehrere Millionen tausende Plugins ermöglichen die einfache Individualisierung von WordPress und können das sonst sehr einfach ausgestattete System einfach und schnell an alle Bedürfnisse eines Webmasters anpassen. Das Problem: Jedes Plugin braucht Ressourcen wie Speicherplatz und Arbeitsspeicher. Und somit belastet es den Server noch mehr als er sowieso schon ist. Im Laufe der Zeit kommen immer mehr Plugins hinzu, denn ein Webprojekt – egal welcher Art – ist niemals fertig und wird ständig ausgebaut, erweitert und vergrößert.

Um den Server nicht unnötig zu belasten und WordPress zu beschleunigen, empfiehlt es sich so weit wie möglich auf Plugins zu verzichten. Egal wie einfach ein solches Plugin sein mag: Es macht WordPress mit der Zeit deutlich langsamer.

Einfache Dinge sollte man im besten Falle von Hand lösen, also selbst in den WordPress-Code einbauen. Dazu muss man nicht unbedingt programmieren können, sondern nur wissen, was man tut. Denn Code-Schnipsel findet man im Internet (z.B. wpsnippets) mehr als genügend.

Basics nutzen

Es gibt bestimmte Basics, die man im Webdesign bzw. in der Programmierung beachten sollte. Diese werden von den Theme-Designern und Programmierern aber nicht immer eingehalten und umgesetzt. Wichtig ist hier, dass man selber Hand anlegt und sich um die Basics kümmert. Dazu zählen verschiedene Dinge wie zum Beispiel:

  • Die HTML- & CSS-Dateien so schlank wie möglich halten
  • Falls mehrere CSS-Dateien vorhanden sind diese zu einer zusammenfassen
  • JavaScript am Ende parsen lassen
  • Browsercache aktivieren und nutzen
  • CSS Dateien und JavaScript Datien komprimieren (Gzip)
  • und vieles mehr…

Wichtig ist, dass man diese Basics nutzt, um eine solide Basis zu schaffen. Ein positiver Nebeneffekt ist die Steigerung des PageSpeed-Scores, welcher von Google ja offiziell als Ranking-Faktor vorgestellt wurde.

Basics 1: HTML und CSS so schlank wie möglich halten

Je schlanker (also kleiner) die HTML und CSS Dateien sind, desto schneller können sie geladen werden. Und desto schneller werden sie auch angezeigt. Es ist wichtig, dass die Dateien klein gehalten werden, auch wenn das ganze nichts mit WordPress sofort zu tun hat. Natürlich sollten die Dateien auch bei anderen Systemen kleingehalten werden.

Bei WordPress ist die Verkleinerung solcher Dateien recht einfach: Über das Menü Design » Editor kann man die einzelnen Dateien des WordPress-Themes bearbeiten. Da einfach mal schauen, welche Inhalte alles entfernt werden können.

Beispiel: Zu viele Leerzeilen sind zum Beispiel ein Punkt, den man Ändern könnte. Oder HTML-Kommentare. Aber auch div-Blöcke von Inhalten, die man im Theme nicht mehr braucht können unter Umständen entfernt werden.

Wenn man auf bestimmte Dinge im Theme verzichten kann, gehören sie entfernt. Dazu muss man alle Dateien die man für das Webprojekt verwendet, durchgehen und bearbeiten.

Das gleiche gilt auch für die CSS-Dateien. Sie sollten auch so wenige Leerzeilen wie möglich enthalten. Auch Kommentare im CSS sollten entfernt werden. Natürlich dienen Sie der Übersichtlichkeit, aber letztlich brauchen sie Speicherplatz. Noch ein wichtiger Tipp: Ungenutzte CSS-Klassen und IDs können auch entfernt werden. Wenn man das Theme nicht komplett benötigt, sollte man auch nur das in der CSS haben, was auch wirklich benötigt wird. Alles andere wäre Platzverschwendung und sorgt dafür, dass die CSS länger zu laden benötigt.

Basics 2: CSS-Dateien zusammenfassen

Wer kennt die Situation nicht: Im Header einer Webseite werden die verschiedensten Stylesheets aufgerufen und eingebunden. Da wird mal eben eine “button.css”, “fonts.css” und “portfolio.css” neben der hauptsächlichen “style.css” angelegt. Ein Fehler, denn jede einzelne CSS-Datei muss geladen werden. Diese sollte man zu einer einzigen CSS-Datei zusammenfassen und dann in das Theme einbinden.

Merke: Lieber eine größere Datei als viele kleine Dateien laden lassen!

Basic 3: JavaScript am Ende laden lassen

Viele Themes lassen direkt zu Anfang der Seite das JavaScript einer Seite laden. Warum, kann ich auch nicht sagen. Allerdings rät Google und viele Internet-Experten dazu, das JavaScript am Ende der Seite zu platzieren, so dass es am Ende geladen wird.

Der Grund: So kann sich die Seite schon im Browser aufbauen und dem Nutzer etwas zeigen. Erst dann wird das JavaScript geladen. Andersherum würde erst das JavaScript geladen werden, bis dem Nutzer etwas angezeigt wird. Und je nach Größe kann dass schon sehr lange dauern. Dass wollen wir nicht. Zudem wir mit dem verschieben der JavaScript-Dateien ans Ende Webseite auch unseren PageSpeed verbessern.

Basic 4: Browsercache nutzen

Ein weiterer Tipp aus dem Hause Google zur Verbesserung des PageSpeeds ist die Aktivierung des Bowsercachings. Dabei werden beim Aufruf einer Seite die statischen Dateien wie Bilder, CSS-Dateien und JavaScript-Dateien lokal gespeichert und beim nächsten Aufruf der Seite nicht mehr vom Server geladen.

Das macht bei WordPress viel Sinn, schließlich bestehen die Unterseiten alle aus dem gleichen Theme und somit auch aus dem gleichen externen statischen Inhalten. Also: Browsercaching aktivieren!

Basic 5: Dateien komprimieren

Dank der Komprimierung von Gzip kann man Dateien wie CSS- & JavaScript-Dateien noch deutlich verkleinern und somit schneller machen. Die komprimierten Dateien können deutlich schneller geladen und aufgerufen werden, was zur Folge hat, dass WordPress schneller wird.

Um Dateien via gzip zu komprimieren, muss einfach folgender Code in die .htaccess eures WordPress-Ordners:

[text]<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>[/text]

Wenn die Komprimierung aktiviert ist, wird nicht nur der Blog ein ticken schneller, sondern steigt auch der PageSpeed der Seite. Google wird es euch danken.

Basic 6: Bilder in den passenden Größen bereitstellen

Viele Webmaster laden Bilder noch immer in den Originalgrößen auf den Server und stellen die Bilder dann im Content bereit, verkleinern die Bilder dann aber nur via Width und Height-Angaben im IMG-Tag.

Auch wenn WordPress Bilder automatisch skaliert, diese runterrechnet und als neues Bild in den gewünschten Maße abspeichert, so sind diese nicht optimiert, also von der Dateigröße noch zu groß bei der vorhandenen Qualität und Auflösung. Deswegen empfehle ich immer, die Bilder von Hand zu optimieren. Man kann ja gerne den WordPress Medien-Manager nutzen, sollte trotzdem aber immer schauen, ob Google PageSpeed etwas zu meckern hat.

Aber zurück zu den Bildermaßen: Es ist wichtig, das Bilder in der richtigen Größe bereitgestellt werden. Also wenn ein Bild von 300×300 Pixeln in den Content eingebunden werden soll, sollte das Bild auch in 300×300 Pixel auf dem Server liegen und nicht in 1000×1000 Pixeln und dann via height und width-Angabe skalieren. Dann wird das Bild in seiner vollen Größe geladen, was dazu führt, dass die Ladezeit deutlich länger wird als sie sein könnte.

Einfach mal nach PageSpeed arbeiten

Google bietet mit PageSpeed ein Tool an, mit dem man die Ladezeit der Seite verschnellern kann. Das Tool kommt nicht nur von Google, sondern gibt genaue Hinweise darauf, wo die Performance-Bremsen liegen. Das bedeutet, dass man nur stumpf nach dem Tool arbeiten muss, um zu einem entsprechenden Ergebnis zu kommen. Auch wenn Google PageSpeed nicht gleich Ladezeit ist, sondern eher Ladezeit der Seite je nach Inhalten, kann man ganz gut mit dem Tool die Ladezeit verschnellern.

PageSpeed ist übrigens auch ein Rankingfaktor. Je besser der Score deiner Webseite, desto besser für dich und deine Nutzer: Besucher brauchen nicht lange warten, dass eine Webseite geladen wird und du hast wieder einen wichtigen Onpage-Faktor, der dir in deinem SEO-Ranking hilft. Das Tool findest du im Chrome als Plugin wenn du einen Rechtsklick in die Webseite machst und anschließend “Element untersuchen” anklickst. Dann musst du nur noch den Reiter “PageSpeed” anklicken und kannst eine Analyse des PageSpeeds durchführen.

Das ganze lässt sich auch über den Browser ausführen. Dazu einfach auf die Seite von PageSpeed Insights surfen, URL eingeben und los gehts.

Wer eine PageSpeed Analyse durchführt, bekommt zwei verschiedene Scores ausgegeben:

google-pagespeed

Einmal den für die mobile Version der Seite und einmal den für die Desktop-Version. Nun kann man – je nachdem für welche Version man seine Seite optimieren möchte – einfach die vorgeschlagenen Punkte abarbeiten und kommt so zu einem besseren PageSpeed-Score.

Zwar gibt es viele Plugins, mit dem sich der PageSpeed verbessern lässt, jedoch rate ich von der Nutzung von zu vielen Plugins ab. Wie ich oben schon geschrieben habe, drückt jedes Plugin ein Stück auf die Bremse und verlangsamt WordPress und Server. Hier heißt es: Lieber in den Code eingreifen und selber Hand anlegen, statt alles auf die bequeme Art zu lösen. Folgend mal einige Tipps wie man den PageSpeed-Score verbessern kann.

PageSpeed-Optimierung: gzip aktivieren

Google PageSpeed gibt oft vor, dass man die gzip-Komprimierung aktivieren soll. Um dies zu tun, brauchen wir nur einen Eintrag in der .htaccess unseres WordPress-Ordner einfügen:

[text]
<FilesMatch "\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
[/text]

PageSpeed-Optimierung: Bilder optimieren

PageSpeed von Google sagt euch auch, ob ihr Bilder auf eurer Webseite habt, die ihr optimieren könnt. Optimieren bedeutet: Qualitätsverlustfrei in der Dateigröße reduzieren und dem Nutzer so das Laden des Bilders schneller möglich machen, bei gleichbleibender Qualität. Der Vorteil: Ihr müsst das ganze nicht selber machen. Das PageSpeed-Addon im Browser gibt euch die optimierten Versionen aus.

PageSpeed-Optimierung: CSS- & HTML-Dateien verkleinern

Darüber habe ich schon weiter oben in dem Artikel geschrieben. Eine Wiederholung hier wäre glaube ich nicht nötig.

Pagespeed-Optimierung: Browsercaching aktivieren

Auch das Browsercaching soll laut PageSpeed aktiviert werden. Hier gibt es verschiedene Möglichkeiten das ganze zu lösen. Eines ist: Ein WordPress Plugin. Eher nicht empfehlenswert. Ich empfehle einen simplen Code in der .htaccess:

[text]<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 300 seconds"
ExpiresByType image/gif "access plus 1 month 1 hour"
ExpiresByType image/jpg "access plus 1 month 1 hour"
ExpiresByType image/jpeg "access plus 1 month 1 hour"
ExpiresByType image/png "access plus 1 month 1 hour"
ExpiresByType application/x-shockwave-flash "access plus 1 day 1 hour"
</IfModule>[/text]

PageSpeed-Optimierung: Cache-Validierer angeben

Auch die Meldung Cache-Validierer angeben kann man mit einem einfachen Code in der .htaccess abhaken und schnell die nächsten Punkte für einen besseren PageSpeed von Google abarbeiten. Fügt dazu einfach folgenden Code in die .htaccess eures WordPress Root-Verzeichnisses ein:

[text]<pre>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 year"
</IfModule>[/text]

PageSpeed-Optimierung: Header des Typs „Vary: Accept-Encoding“ angeben

Ein weiterer Eintrag in die htaccess eurer Seite bringt euch weitere Punkte für euren PageSpeed-Score. Um den Header des Typs “Vary: Accept-Encoding” anzugeben, braucht ihr nur folgenden Code in die htaccess werfen:

[text]<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>[/text]

Seite für Seite optimieren

Der Google PageSpeed bezieht sich immer nur eine Seite, ist also nicht Übergreifend für alle Seiten einer Domains. Klar: Wenn man an der htaccess einer Domain etwas ändert, gilt das natürlich für alle Unterseiten. Auch bei manchen anderen Aktionen und Änderungen ist die ganze Seite betroffen sofern man mit einem CMS wie WordPress arbeitet.

Doch die Optimierung von Bildern zum Beispiel geschieht ja nur auf einer einzigen Seite. Daher ist es wichtig, dass jede einzelne Seite getestet und optimiert wird. So lässt sich Domainweit das beste Ergebnis erzielen und jede Seite bekommt einen guten PageSpeed Score.

Fazit

WordPress hat viel Optimierungspotenzial und braucht einige Kniffe, um schnell laufen zu können. Doch die Arbeit lohnt sich: Nicht nur Google wird euch die Optimierung danken, sondern auch die Nutzer, die eine schnellere Webseite vorfinden und nicht lange auf Inhalte warten müssen.

Christian Süllhöfer ist Online Marketing Manager von RankSider und Selbständiger Affiliate.

WordPress Affiliate ThemeAnzeige

9 Kommentare

Avatar von Carsten Todt

Carsten Todt 20. Oktober 2013 um 0:40

Gut für die Pagespeed ist, nur zu verwenden, was auch wirklich sein muss. Etliche Bilder müssen nicht sein. Farbliche Kunstwerke im Hintergrund müssen ebenfalls nicht sein. Der Grundkern ist der Text. Wenn der Leser auch bloß nach diesem sucht, sollte das genügen. Dann läuft die Website auch schnell.

Antworten
Avatar von Artur

Artur 1. Dezember 2013 um 12:34

Die Besucher lieben Bilder und Modernes Design und deswegen denke ich man sollte auf Bilder nicht verzichten. Nur Text auf weißem Hintergrund ist nicht mehr aktuell aber durch diese Tipps hier muss man auf Bilder auch gar nicht verzichten.

Antworten
Avatar von Frank

Frank 1. Februar 2014 um 0:44

Ist gar nicht so einfach umsetzbar, habe mal das Plugin w3total cache ausprobiert, dies macht einiges richtig aber brachte neue fehlerquellen bei google page speed.

selbst dieser blog hier kommt nur auf 65/100 desktop

Antworten
Avatar von André Köbel

André Köbel 5. Februar 2014 um 15:53

Hey Frank,

wpsnippets.de ist 0,garnicht optimiert. Weder SEO, noch Page Speed o.Ä. – da wpsnippets anfangs nur ein privates Archive für Snippets sein sollte und wir nicht mit so einer Entwicklung gerechnet haben, wurde an der Seite auch nichts optimiert. Wir befinden ins aktuell in der Entwicklung des Relaunchs und die neue Seite wird da schon etwas besser aussehen. ;)

Gruß
André

Antworten
Avatar von Maik

Maik 20. Februar 2014 um 14:53

Super Anleitung. Danke.
Nur eine Frage. Hier werden zwei Methoden für die Einbidung für gzip erwähnt. Die zweite ist wesentlich kürzer als die erste.
Welche ist jetzt richtig?

Was ja in Verbindung mit Pagespeed auch noch oft erwähnt wird ist ein CDN.
Lässt sich sowas problemlos einbinden?

Antworten
Avatar von Christian Lang

Christian Lang 21. Februar 2014 um 7:56

Hallo Maik,

bau dir möglichst beide Varianten ein, prüfe die Unterschiede. Das ist meistens von Server zu Server etwas unterschiedlich.

Ein CDN ist natürlich eine feine Sache. Viele Caching Plugins wie W3 Total Cache bieten eine solche Möglichkeit. Bilder, Javascript- oder auch CSS-Dateien werden somit auf einem externen Server (oder unter einer Subdomain auf dem gleichen Server) abgelegt. Dadurch werden die Requests auf mehrere Adressen verteilt und somit lädt die Seite u.U. etwas schneller.

Das ist aber erst „nötig“ wenn du wirklich viele Ressourcen auf deiner Seite lädst.

Viele Grüße
Christian Lang

Antworten
Avatar von Dirk

Dirk 16. April 2014 um 8:38

Was mich ja noch interessieren würde ist, wie man dann bei nem Theme welches dann 10 oder mehr css Dateien hat diese zu einer zusammenfast. Ist es immer anders oder gibt es da vorgaben, wie man die css dateien läd. Dann wäre es ja nicht so schwer. Weil ich habe es bis heute zum Beispiel nicht geschaft die standard .js aus dem header zu bekommen.

Antworten
Avatar von Roby

Roby 19. September 2014 um 17:56

CSS manuell zusammenzufassen lohnt sich bei WordPress nicht. Dann müsste mann bei jedem Update eines Plugins wieder manuell eingreifen. Das W3 Total Cache Plugin bietet eine Funktion zum Zusammenfassen von CSS Dateien an. Ich nutze es nicht, da danach manche Designfunktionalität verloren geht…zum Beispiel verschiendet meine mobile Navigation. Aber es ist von Theme zu Theme verschieden. Einfach ausprobieren.
Grüße
Roby

Antworten
Avatar von Davis Brown

Davis Brown 19. Mai 2015 um 6:03

Thanks, currently I use this tool template toaster to make WordPress website faster and responsive.

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*