Am 24. Juni war wieder WordPress Meetup in Potsdam. Und ich hatte einen kleinen „Un-Vortrag“ zum Thema Performace gehalten. Dabei hatte ich versucht zu erklären, was eine Website schnell macht und wie man das mit WordPress hin bekommt.
tl;dr Die Slides gibt es bei GitHub
„Performance is a feature.“
Meine Motivation für diesen Vortrag war/ist, das Thema Performance bei Entwicklern, Anwendern und v.a. Entscheidern anzubringen. Allgemein versteht und bejaht jeder die Nützlichkeit von performanten Websites. Aber mit der Umsetzung scheitert es dann zu oft in der Praxis. Das kenne ich aus eigenen Projekten zur genüge. Und selbst diese meine eigene Website hat noch Optimierungspotential. Naja, Schusters Kinder… ;-) Die Auftraggeber haben zwar einen Etat für einen Relaunch mit Kommunikation, Grafik und Programmierung. Aber Performance-Optimierung ist eher keine Position. Das wird immer irgendwie impliziert. Am Ende findet keine explizite Performance-Optimierung statt. Wenn sie nicht vorhanden ist, macht das auch nichts. Denn im Büro mit sattem DSL ist Performance eher kein Thema. Aber wehe, wenn man mal versucht irgendwo in einer „Mobilfunk-Wüste“ (oder einfach nur am nächsten Bahnhof) mit sehr wackeliger und dünner Internetverbindung eine 10MB große Website aufzurufen. Das wird eine schöne Übung in Geduld.
Warum performante Websites wichtig sind
Passender Weise hatte ich just ein paar Tage vor dem Vortrag ein einschlägiges Erlebnis zum Thema Performance gemacht: Auf der Suche nach einer Steuerberatung für mich hatte ich gegooglet. Und problemlos etliche Suchergebnisse mit Steuerberatungskanzleien aus dem Prenzlauer Berg erhalten. Die drei bestplatziertesten Ergebnisse hatte ich angeklickt.
Leider war eine Seite davon so langsam beim Laden, dass ich sie – nach dem ich die anderen beiden Seiten kurz gecheckt hatte – ungelesen wieder geschlossen hatte. Diese Steuerberatung hatte – nur weil Ihre Website so- Performance
- Methoden
- WordPress
Ich versuche mal, das wichtigste stichpunktartig festzuhalten.
1. Performance
Hier geht es darum, was Performance in Bezug auf (WordPress-)Websites bedeutet.
Speeeeed
Letztendlich bedeutet Performance bei Websites Geschwindigkeit. Je schneller eine Website ist, desto performanter / besser ist sie. Die Hauptfaktoren dabei sind die Übertragungszeiten (Latenz) vom Server zum Client und die Umsetzungszeit (Rendering) im Browser.
UX
Die Nutzererfahrung wird durch die Performance maßgeblich bestimmt. Wie in meinem obigen Erlebnis sicherlich gut nachzuvollziehen. Führt eine langsame Seite zu hohen Absprungraten.
Google-SEO
Last not least ist die Performance (schon seit Anfang 2010!) ein Ranking-Faktor bei den Google-Suchergebnissen.
2. Methoden
Welche Methoden zur Performance-Steigerung bieten sich an.
Rendering optimieren
Hauptsächlich das Rendering Blocking von CSS und Javascript muss geschickt umgangen bzw. vermindert werden:
- CSS im Header als erstes einbinden
- JS möglichst am Ende des Footers einbinden und asynchron laden
- Kleine CSS- und JS-Schnipsel als inline-Code
- (HIntergrund-)Bilder als Inline-Grafiken oder Sprites
Komprimieren/Minifizieren
Wichtigstes Mittel der Wahl ist natürlich die gzip-Komprimierung. Damit verringert man die Dateigrößen von Dokument, CSS und JS um 50 bis 70%! Beim Minifizieren werden unnötige Leerzeichen, Zeilenumbrüche und Tabs aus dem Code entfernt. Auch Kürzen von z.B. Variablennamen bringt was ein. (uglify)
Kombinieren
Beim Kombinieren geht es v.a. darum, die verschiedenen Script- und Stylesheet-Dateien in jeweils eine Datei zu vereinen. Aber auch mit Bildern geht einiges (siehe Rendering). Das spart Latenz in Form von weniger http-requests.
Caching
Das Vorhalten von Seiten kann auf verschiedenen Weisen erfolgen. Entweder werden statische Dateien der Seiten angelegt oder Datenbankabrufe gespeichert. Manchmal wird erst ein Cache angelegt, wenn jemand zuerst die Seite aufruft und manchmal werden schon vorab Caches angelegt (Priming). Beim Caching ist es wichtig, dass man den richtigen Zeitraum bestimmt, wie lange gecacht werden soll.
usw.usf…. Es gab einige Methoden, auf die ich aus Zeitgründen nicht eingegangen bin. z.B. Bild-Optimierung
3. WordPress
Bisher war der Vortrag eher Theorie-lastig. Aber ohne geht es leider nicht. Im letzen Teil war nun wichtig: Wie kann man das vorher genannte einfach umsetzen?
Wegen der Pragmatik hatte ich mich v.a. auf Pugins bezogen. Die kann man einfach installieren und – meist – optimieren sie schon „out of the box“. Wer allerdings das Letzte aus seiner Seite herausholen möchte, kommt nicht umhin auch mal in der .htaccess zu schreiben oder die Server-Konfiguation aufzupeppen.
Empfehlenswerte Plugins
Caching: W3 Total Cache*, WP Super Cache, Cachify
Kombinieren, Komprimieren: wpCompressor (Ist schon etwas alt, tut aber bisher immer noch seinen Dienst) ,JS & CSS Script Optimizer
Bilder: WP Smush.it
*Dieses Plugin ist zwar sehr mächtig, aber eher für die angebracht, die sich mit Performace Optimierung gut auskennen. Für alle anderen empfehle ich Cachify!
Empfehlenswerte Online-Dienste
Bideroptimierung: Kraken.io (wie Smush.it), TinyPNG
Inline Bilder: Base64 Image Converter
Für den „normalen Hausgebrauch“ ist man damit schon bestens ausgerüstet. Falls ich aber dennoch etwas essentielles Übersehen haben sollte, würde ich mich über Eure Ergänzungen freuen! :-)
Slides Download
Die Slides habe ich auf GitHub abgelegt. Sie sind allerdings noch spärlicher als mein Artikel hier. Es war keine Zeit…. ;-)
https://github.com/HeikoMamerow/wpdm_2014-06-24_unvortrag_performance
Ich verweise mal auf meine Slides zum gleichen Thema beim Meetup in Hamburg:
http://wpmeetup-hamburg.de/geschwindigkeit-optimieren/
Beim nächsten WordCamp machen wir daraus eine Session ;)
Jo, eine Session war mal geplant. Aber der Mut hatte mich verlassen. Hab mir das ganz fest fürs nächste Mal vorgenommen. :-D
Cool! Hab gerade Deine Slides überflogen. Du hast auch den Aspekt der Messungen mit dabei. (fehlt bei mir völlig) Perfekt!!