WordPress Meetup Potsdam: Un-Vortrag zu Performance

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.“

google-performance-is-a-feature

Screenshot von Web Fundamentals

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.

625px-Grapevinesnail_01

Manche Websites sind lahm wie eine Schnecke :-) (Bildquelle: von Jürgen Schoner [GFDL oder CC-BY-SA-3.0], via Wikimedia Commons)

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 lahm unperformant war – einen potentiellen Mandanten verloren. So spielt das Leben… Aber davon mal abgesehen, ist für mich natürlich der Erfahrungsaustausch mit anderen Entwicklern und Anwendern sehr wichtig. Nur so kann ich meine WP-Fähigkeiten verbessern. Mein Un-Vortrag hatte drei Teile:

  1. Performance
  2. Methoden
  3. 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

This entry was posted on by .

Heiko Mamerow

Buddhist, Vater, Freund, Internetseitenbauer, Sportler, Musikliebhaber & Verkehrsteilnehmer ;-)

3 Gedanken zu „WordPress Meetup Potsdam: Un-Vortrag zu Performance

    1. Heiko Mamerow Beitragsautor

      Jo, eine Session war mal geplant. Aber der Mut hatte mich verlassen. Hab mir das ganz fest fürs nächste Mal vorgenommen. :-D

    2. Heiko Mamerow Beitragsautor

      Cool! Hab gerade Deine Slides überflogen. Du hast auch den Aspekt der Messungen mit dabei. (fehlt bei mir völlig) Perfekt!!

Kommentare sind geschlossen.