Get Adobe Flash player

WordPress Page Speed Optimierung

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:

Fehler Handling von WordPress bei statischen Dateien

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !(robots\.txt|sitemap\.xml(\.gz)?)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} \.(css|js|html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|asf|asx|wax|wmv|
wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|
mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|
odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|
wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$ [NC]
RewriteRule .* – [L]
</IfModule>


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:

Caching

<IfModule mod_mime.c>
AddType text/css .css
AddType application/x-javascript .js
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A7200
ExpiresByType application/x-javascript A7200
ExpiresByType text/html A7200
ExpiresByType text/richtext A7200
ExpiresByType image/svg+xml A7200
ExpiresByType text/plain A7200
ExpiresByType text/xsd A7200
ExpiresByType text/xsl A7200
ExpiresByType text/xml A7200
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<FilesMatch “\.(css|js)$”>
<IfModule mod_headers.c>
Header set Pragma “public”
Header set Cache-Control “public, must-revalidate, proxy-revalidate”
</IfModule>
FileETag MTime Size
</FilesMatch>
<FilesMatch “\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$”>
<IfModule mod_headers.c>
Header set Pragma “public”
Header set Cache-Control “public, must-revalidate, proxy-revalidate”
</IfModule>
FileETag MTime Size
</FilesMatch>
<FilesMatch “\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|
gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|
mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|
tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$”>
<IfModule mod_headers.c>
Header set Pragma “public”
Header set Cache-Control “public, must-revalidate, proxy-revalidate”
</IfModule>
FileETag MTime Size
</FilesMatch>
<ifmodule mod_headers.c>
<filesmatch “\\.(ico|jpe?g|png|gif|swf)$”>
Header set Cache-Control “max-age=5184000, public”
</filesmatch>
<filesmatch “\\.(css|js)$”>
Header set Cache-Control “max-age=5184000, private”
</filesmatch>
</ifmodule>

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!

Weitere interessante Beiträge:

11 Kommentare zu „WordPress Page Speed Optimierung“

  • 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…

  • avatar Silvan:

    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.

  • avatar Gregi:

    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 [...]

  • avatar Daniel:

    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

  • avatar Stefan:

    Das muss per Plugin gemacht werden. Einfach ein sehr kleines. Ob es das gibt, gute Frage, sonst selber machen.

  • avatar Rene:

    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.

  • avatar Stefan:

    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 [...]

Kommentieren

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

eMail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.