WordPress Page Speed Optimierung
10.02.2011 | 
Um Page Speed Optimierungen vorzunehmen braucht man als erstes einen viel aussagenden Test.
Es gibt diverse Webseiten die eine Analyse vornehmen und Vorschläge unterbreiten.
Ich nutze für diesen Beitrag die Webseite http://www.webpagetest.org/.
Damit ich zeigen kann welche Massnahmen möglich sind, musste ich eine Webseite verwenden, die noch nicht zu stark optimiert wurde und dafür hält der Kollege Silvan sein Root1024 Blog hin.
Beim ersten Test verwendete ich Frankfurt DE und IE7 über eine DSL Leitung.
Die Benotungen gehen von A (Am Besten) zu F (Schlecht). Wie man sieht, hat es genügend Verbesserungspotential. Selbstverständlich hat er als erstes eine Kopie vom produktiven Blog erstellt und mir zu Verbesserungszwecken überlassen. Die Bewertung vom Testblog fiel genau gleich aus.
Bei der Ansicht der Details (Zeiten) ist wichtig, das keine roten Zeilen in der Auswertung enthalten sind. Rote Zeilen markieren Dateien die geladen werden sollten, aber nicht verfügbar sind (Fehler 404 siehe rechtes Bild). Dies nennt man Broken Links und wird von Suchmaschinen äusserst negativ bewertet. In meinem Fall ist keine solche Zeile vorhanden.
Auch sieht man schön die CPU Belastung welche stattfindet nachdem die Javascripte von Google Analytics und Piwik geladen wurden.
KeepAlive
Das erste Problem sind KeepAlive Verbindungen. Silvan hat sich für Hoststar als Hoster entschieden, welcher keine KeepAlive Funktionalitäten auf dem Webserver aktiviert hat. Diese Einstellung lässt sich leider nicht per .htaccess ändern. So kann er dies nicht optimieren.
Leverage Cache, No Expire Set
Entweder man setzt hier auf ein Plugin welches einem die komplette Arbeit abnimmt, oder konfiguriert manuell ein wenig nach. Ich nehme hierzu meist W3 Total Cache was gute Dienste leistet.
Damit man diese Probleme beheeben lassen, müssen die beiden Module mod_header, mod_expire und mod_mime aktiviert sein. Da dies wiederum bei Hoststar nicht der Fall ist, kann man eine weitere Optimierung für Silvan jetzt schon abbrechen. Dennoch möchte ich aufzeigen wie man es machen könnte:
Die nachfolgenden Texte sind alle für die .htaccess Datei gedacht, welche in eurem Blogverzeichnis verfügbar sein sollte.
Als erstes fügen wir folgende Zeilen ein:
Dies sorgt dafür das statische Dateien die nicht verfügbar sind, nicht von WordPress gehandelt werden und somit kann man CPU Leistung sparen. Ein kleiner Fix der nach Aussen nicht sichtbar ist, aber dem Server was bringt.
Folgende Einträge setzen die Expire Header auf den Dateien, damit die Clients nicht jedes mal beim Besuch diese neu laden müssen. So spart der User Traffic, der eigene Seitenaufbau wird schneller und als Nebeneffekt der Server wird daher weniger belastet:
ETags Problem
Ans Ende der .htaccess Datei setzen wir noch die ETags für die Dateien, die noch nciht im oberen Teil behandelt wurden:
<ifmodule mod_headers.c>
Header unset ETag
</ifmodule>
Komprimierung
Damit die Daten vom server an den User komrimiet übertragen werden, müssen die Modulem mod_deflate, mod_setenvif und mod_headers zur Verfügung stehen:
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
Damit lässt sich viel Traffic sparen und dadurch wiederum winzige Bruchteile von der Übertragungsgeschwindigkeit optimieren die das Gesamtbild verbessern.
DNS Abfragen minimieren / Weniger Skripte und CSS
Eine Kollegin hatte auf ihrer Webseite diverse fremde Dienste eingebunden. Insgesamt hatte die so von 25 verschiedenen Domains Javascripte geladen. Damit ist die eigene Weseite abhängig, bis diese Skripte geladen sind und wird gegebenenfalls (je nach Einbindung) komplett hängen bleiben, wenn die fremde Seite nicht erreichbar ist. Schlechte Performance von der fremden Webseite belasten demzufolge auch die eigene Webseite.
Bekannte Domains sind von Facebook, Twitter, Tradedoubler, Google-Analytics, twitoaster und gravatars.
Soöötet ihr also eine Meldung erhalten wegen “Minimize DNS Querys” müsst ihr dringenst diese JS auf eueren eigenen Server legen und so einbinden!
Bilder Optimieren
Viele Bilder die man durch den Tag erstellt und hochladet sind nicht optimal gespeichert. So lassen sich diverse JPG oder PNG weiter komprimieren ohne sichtbaren Qualitätsverlust. Erhält man eine Meldung bezüglich “Optimize Images”, sollte man ein Blick reinwerfen. Sicherlicht macht es kein Sinn Bilder zu komprimieren um ein paar Byte zu sparen, sind es jedoch kByte sollte man eine optimierte Version des Bildes hochladen.
Die meisten Analyse Webseiten bieten gleich die optmierte Version zum Download an. Selbstverständlich gibt es dazu auch Programme. Für JPG zum Beispiel jpegtran or jpegoptim (Linux) Für PNG ist OptiPNG oder PNGOUT empfohlen.
Man sollte daran denken, das auch Bilder in den Beiträgen immer optimiert hochgeladen werden sollten!
Minimify
Minimify beschreibt die Technik mit welcher sich ein wenig mehr Trafficsparen lässt. Normalerweise sind CSS, JS und HTML Dateien strukturiert aufgebaut, das man den Inhalt gut lesen kann. Die Dateien werden dann so auch ausgeliefert.
Leerzeichen und Umbrüche verbracuhen aber Platz und wiederum Traffic. Daher minimiert man diese Dateien in dem man diese Dinge und auch Source Kommentare entfernt und liefert diese dann aus.
So kommen die Dateien als 1 Zeiler beim Surfer an.
Entweder man installiert Minimify auf dem eigenen Server oder überlässt diese Arbeit automatisiert einem Plugin wie wiederum W3 Total Cache.
Combine JS / CSS
Dieses Thema werde ich separat in einem späteren Blogeintrag aufgreifen.
Use CDN
CDN heisst Content Delivery Network. Dies hat mehrere gute Eigenschaften. CDN setzt auf mehreren Servern rund um die Welt auf, welche alle über gleichen Content verfügen. So braucht ein User auf Amerika nicht von einem europäischen Server die Daten zu beziehen, sondern wird auf den Server umgeleitet, welcher m Nächsten von ihm liegt.
Zum Anderen gibt es eine Limitierung darin, wie viele Dateien gleichzeitig von einer Domain geladen werden können. So kann man meist nur 6 Dateien parallel laden. Silvan hätte somit 7 Durchgänge bis alle Dateien geladen sind, auch wenn die Bandbreite nicht ausgelastet ist. DN hat mehrere Server und daher würde bei CDN von 7 Servern gleichzeitig die Dateien parallel geladen werden und somit nur 1 Durchgang erforderlich sein. Dies hat natürlich grosse Zeitersparnisse im Seitenaufbau zu folge.
Leider sind professionelle CDN Anbieter wie Amazon S3 relativ teuer und haben schwer durchschaubare Preismodelle und daher unnutzbar für Privatpersonen ohne wirtschaftliche Interessen. Aber dennoch kann man ein wenig mogeln mit sogenannten Fake-CDN.
Dazu richtet man sich Subdomains ein (bjs1, bjs2, bjs3, bimg, bimg2, bimg3 etc) welche in das gleiche Verzeichnis wie der produktive Blog zeigen. Anschliessend installiert man W3 Total Cache und aktiviert CDN (Mirror) und fügt die zuvor erstellten Subdomains in den CDN Einstellungen ein. Ich nutze rund 10 Subdomains und konnte 2 Sekunden Seitenaufbau gut machen. Die Analyse Webseiten werden diese FakeCDN zwar nicht erkennen und weiter motzen, aber der Seitenaufbau hat sich dennoch verbessert.
Damit sind die wichtigsten Aspekte von der Webseitenoptimierung abgedeckt und die Seitenaufbau Geschwindigkeit müsste sich markant verbessert haben!
Fazit
Wie man aber relativ früh gemerkt hat, machte es für mich keinen Sinn für Silvan an seinem Blog Optimierungen vorzunehmen, da der Hoster alle nötigen Möglichkeiten komplett unterbunden hat, weil diese zu ener zusätzlichen Belastung des Servers führen könnten, auch wenn bei richtiger Nutzung eine Minderung der Last erfolgen würde. Viele Massenhoster verzichten auf die Bereitstellung dieser Tools um die Serverauslastung gering zu halten und damit die Kundenzahl zu maximieren. Über das gleiche Problem hab ich bereits bei PHP Sicherheit bei Shared Hosting geschrieben.
Das Fazit ist also das viele Möglichkeiten zu einer optimierten Webseite führen, die nicht all zu aufwändig sind. Vertraut man dem falschen Hoster, wo billige Kosten wichtiger sind als gutes Hosting, kann man sich vieles verspielen. Daher sollte man immer im voraus abklären welcher Hoster welche Module unterstützt.
Ich wünsche Euch damit freudiges optimieren und falls ihr weitere Tipps habt, bin ich sehr daran interessiert!
Veröffentlicht in 
Schlagworte: 11 Kommentare zu „WordPress Page Speed Optimierung“
Kommentieren
 Kontaktdaten |
IT Blögg? Ein männlicher IT Nerd durchstöbert das Web nach speziellen Gadgets, unentbehrlicher Software und Alles was man im IT Sektor nicht verpassen darf. + |
Danke für den Tipp und die ausführliche Analyse. Auf die Schnelle habe ich schon mal ein Bild um 80 % reduiziert. Das andere werde ich mir mal so nach und nach reinziehen…
Danke für die Analyse. Teil Sachen habe ich schon optimiert, aber wie du schreibst, kann ich die meisten Sachen nicht optimieren, weil es vom Hoster nicht unterstützt wird. Ich habe jetzt Hoststar angeschrieben, mal sehen ob sie mich bei der SEO mit den nötigen Modulen unterstützen.
In meinem Artikel WordPress Quick Cache Beschreibung bzw. Tutorial habe ich Quickcache beschrieben, da sollte bei dem obigen beschriebenen Blog eigentlich gehen! Einrichtung ist Kinderleicht! Versuch ist es wert!
Ich selber nutze das Plugin ja auch und konnte etliche Sekunden gewinnen!
Hoi Daniel, auch dein Plugin nutzt wie W3 Total Cache und andere Cache Plugins die selben Apache2 Module wo ich beschrieben habe. Ob man es manuell macht oder per Plugin, ohne die Module geht nichts.
Daher wird ihm auch dein Plugin nichts nützen, da er die Module nicht hat…
Quick Cache sorgt zwar für Cacheing auf der Serverseite, aber macht leider kein Leverage Browser Caching auf Clientseite per htaccess. Das müsste man bei dem Plugin noch nachtragen.
Interessanter Artikel. Ich denke gerade bei WordPress ist viel Optimierungspotential da.
[...] zu schaffen.www.webpagetest.org Eine sehr gute Webseite für die Pageoptimierung. Mehr dazu auf IT-Blögg.www.gidnetwork.com/tools/gzip-test.php Eine Testseite für gzip-komprimierte Webseiten. Wird die [...]
Ich muss dich jetzt mal zu Minimify etwas fragen.
Mein Blog funktioniert soweit so gut jetz ohne Cache-Plugin aber gern würde ich wie du um Quelltext Leerzeilen und Kommentare entfernen. W3TC zu nutzen halte ich für übertrieben. Nichts desto trotz denke ich gibt es da aber eine Lösung das ich die Leerzeilen und Kommentare aus dem Quelltext bekomme oder? Gibts irgende eine Lösung die ich als Dau auch zum laufen bekommen? Oder muss ich wirklich mit einem Plugin anfangen?
Lg aus good old germany
Das muss per Plugin gemacht werden. Einfach ein sehr kleines. Ob es das gibt, gute Frage, sonst selber machen.
Ich habe soeben zu dem noch offenen Punkt (CSS und JS kombinieren) unter http://page-speed.net/tipps/combine-external-css.html eine Anleitung gefunden.
Das W3C Plugin ist sehr komplex, so dass ich einige Probleme bei der Konfiguration hatte. Danke dennoch für den guten Tipp.
Danke für den Tipp, das muss ich wirklich sehr bald ausprobieren, wie einfach dies zu realisieren ist.
[...] Artikel: IT Blögg: WordPress Page Speed Optimierung [...]