Performance der Seite messen und dann?

Erstellt von Nico Martin

Slides: http://slides.com/nicomartin/webperformance-wpbern/

Wenn wir in diesem Kontext von „Performance“ sprechen, geht es um die Ladezeit der Seite vom Absenden der URL bis zur kompletten Ansicht der Webseite. Ein weiterer Aspekt der Performance wäre die Verarbeitung von Animationen im Browser. Dieser war jedoch nicht Teil dieses Treffens.

Grundsätzlich folgt ein Ladeprozess einer dynamischen HTML-Webseite immer demselben Schema:

  1. Der Browser (Client) startet eine Anfrage / schickt Daten an einen Server
  2. Der Server verarbeitet diese Daten und stellt eine Antwort zusammen
  3. Der Server schickt die Antwort als HTML DOM zurück
  4. Der Client liest das Dokument und startet je nach Inhalt weitere Anfragen für zusätzliche Dateien (Assets).

Im oben beschriebenen Ablauf gibt es zwei „Nadelöhre“, die wir nun genauer anschauen.

Verarbeitung auf dem Server

Je nach Komplexität der Anwendung und Leistung des Servers kann diese Verarbeitung sehr lange dauern. Da werden z. B. Inhalte aus einer Datenbank z. T. sogar von anderen URLs geladen. Der einfachste Schritt wäre dabei, bereits gemachte Prozesse zu speichern (Server-Caching). Hier hilft zum Beispiel WP Super Cache, W3 Total Cache oder Cachify.

Viel wichtiger wäre jedoch ein schneller Server, der z. B. auch php7 unterstützt.

Assets

Assets sind in dem Sinne zusätzliche Dateien, die der Browser lädt, um die Seite darzustellen. Das sind in der Regel Bilder, JavaScript- und CSS-Dateien:

JavaScript / CSS

Die erste Frage, die sich ein Entwickler immer stellen sollte, ist: „Brauche ich das?“

Wenn man die Features, die diese Datei bietet, nicht nutzt, dann muss sie auch nicht eingebunden werden. Das ist i. d. R. schon der erste Punkt, an dem viele WP-Themes scheitern. Sie beinhalten zu viele ungenutzte Features.

Wenn man die Datei doch benötigt, dann empfiehlt sich ein minify (z. B. https://jscompress.com/ oder noch besser automatisch beim Entwickeln). Bei einer grossen Bibliothek wie jQuery 3.1.1 spare ich dadurch über 65% an Daten!

Ein weiterer wichtiger Punkt ist der Ladeprozess. Dateien, die in den <head> der Seite eingebunden werden, blockieren das Rendern der Seite. Deshalb macht es Sinn, JavaScript Dateien immer ganz am Ende der Seite einzubinden.

Autoptimize bringt viele Features mit, sollte jedoch nur eingesetzt werden, wenn man sich der Sache sicher ist.

Bilder

Der wichtigste Punkt im ganzen Performance-Prozess ist jedoch die Bildoptimierung.

  • Bildgrösse an die effektive Grösse auf der     Webseite anpassen (responsive Images)
  • So weit wie möglich verlustlos komprimieren
  • jpeg anstelle von png verwenden
  • progressive JPEG anstelle von Standard     (baseline) JPEG verwenden

Hierbei kann ich z. B. den EWWW Image Optimizer empfehlen.

progressive JPEG

Während ein baseline JPEG von oben nach unten geladen wird, lädt progressive JPEG Layer für Layer. Das heisst, als Erstes wird eine sehr schlechte Version des Bildes geladen und erst nach und nach kommen neue Layer hinzu. Das hat den Vorteil, dass der User nach wenigen Millisekunden bereits ein Bild sieht und erst später die Qualität nachgeladen wird. Ich habe das hier kurz demonstriert:

baseline JPEG: https://performancedemo.vir2al.ch/

progressive JPEG: https://performancedemo.vir2al.ch/?type=progressive

PageSpeed Insights

Zuguter Letzt gibt es einen einfachen Weg, die Performance einer Seite zu messen (oder zumindest eine Vorstellung zu bekommen). Da die Performance nicht zuletzt auch SEO-relevant ist, stellt Google ein Tool zur Verfügung:

https://developers.google.com/speed/pagespeed/insights/

Dieses kann eine Hilfe sein, sollte aber nicht als einziger Massstab angesehen werden. Denn wie es Paul Bakaus selber sagt: „Nobody cares about how fast your site is, only how fast it feels“. (https://fronteers.nl/congres/2016-spring/sessions/the-illusion-of-speed-by-paul-bakaus)

Und der arbeitet immerhin für Google an deren Chrome Browser.

Interessante Links

https://fronteers.nl/congres/2016-spring/sessions/save-the-day-with-http2-image-loading-by-tobias-baldauf

https://www.youtube.com/watch?v=G3WGjDk4-Ic

Backup und Restore mit WordPress

Überlegungen:

Beim Webhosting werden durch den Hoster regelmässig Backups durchgeführt. Jedoch hat man darauf wenig Einfluss wann und wie gesichert wird und die Wiedereinspielung ist meist teuer.

Backups sind wichtig, falls es Updates gibt oder neue Plugins ist die Installation beschädigt haben, d.h. Backup. Sicherheitsgefühl ist für jeden anders, Änderungen sollten erhalten bleiben.

Auch im Falle eines Angriffs sind Backups wichtig, um die letzte saubere Installation zurück zusichern.

Strategie:

Die Backup Strategie, d.h. wie oft gesichert wird und wo die Backups gelagert werden, hängt von den Anforderungen ab (Änderungen, Sicherheitsgefühl). Es ist zu überlegen, die Sicherung nicht auf auf den gleichen Server abzulegen. Backups auch löschen, zwei gute Backups genügen.

WordPress besteht aus zwei Teilen, die SQL Datenbank mit allen Inhalten und Dateien.

Plugins:

Es kann direkt auf den Server ein Backup mit Cronjobs organisiert werden, einfacher sind Plugins. Man sollte darauf achten, ob automatische zeitplangesteuerte Backups möglich sind und das Zurücksichern ebenfalls einfach möglich ist.

Gratisversionen:

BackWPup  (sehr verbreitet, viele Funktionen, Zeitpläne möglich, Restore nicht optimal (FTP Upload, PHP Admin)
BackupWordpress (Zeitpläne möglich, Restore nicht optimal (FTP Upload, PHP Admin)
Duplicator (eignet sich nur für manuelle Backups und sehr gut zum Umziehen einer WP Installationen auf eine andere Test-Domain)

Bezahlversionen

Hiermit sind automatisch zeitgesteuerte Backups in der Regel auf verschiedenen Medien und cloudbasierten Speicherorten möglich. Die Firmen bieten meistens auch Speicherplatz an.

Vaultpress $99/Jahr für eine Domain
BackupBuddy $80/Jahr für eine Domain, $100 für 10 Domains
(bietet zusätzliche laufende Sicherung mit Stash)
Duplicator Pro $39/Jahr für 3 Domains

Plugins zur Verwaltung von mehreren Seiten

Die Lösungen haben in der Regel auch Backupmöglichkeiten integriert

CMSCommander
InfiniteWP
MainWP

 

Artikel geschrieben von Stephan Zurfluh, Überarbeitung Gerd Zimmermann

Unser WP-Bern Projekt: Schritte zu einer WordPress-Installation

Bei einem der letzten Treffen haben wir einen Vorschlag für die Gestaltung unserer Treffen diskutiert. Wir wollen nach und nach alle Schritte bei der Entwicklung einer Seite mit WordPress besprechen und auch live gemeinsam bearbeiten. Hier als möglicher Fahrplan die einzelnen Schritte:

  1. Aufsetzen einer WordPress-Installation
    (eigener Server / online Server etc.). Besprochen am 24.09.15.
  2. Die ersten Grundeinstellungen einer WordPress-Installation Besprochen am 22.10.15.
  3. Besprechen der einzelnen Elemente einer WordPress-Seite (was sind Beiträge, Seiten, Kommentare / was für Nutzer gibt es und können sie tun / was für Medien werden unterstützt und wie bindet man sie ein. Besprochen am 26.11.15.
  4. Was sind Plugins? Erfahrungsaustausch zu unseren Lieblings-Plugins. Besprochen am 28.01.16.
  5. Sicherheit in WordPress (auf was ist zu achten / Wie sichere ich meine WordPress Seite ab). Besprochen am 24.02.2016.
  6. Die Wahl des „richtigen“ Themes (Was soll die Seite „können“ / Responsive etc.). Besprochen am 24.03.2016.
  7. SEO (Umsetzung in WordPress) besprochen am 26.05.2016
  8. Backup und Restore der Webseite und der Datenbank geplant für 30.06.2016
  9. Eigene Themes (bzw. mas man mit Child-Themes machen kann) (Vorschlag)
  10. Hooks and Actions (Vorschlag: Vortrag von Ulrich)

Zukünftige Gestaltung der WP-Bern-Treffen

Nach einer anspruchsvollen Präsentation von Ulrich haben wir beim letzten Treffen engagiert und anregend diskutiert, wie wir die Gestaltung unserer Treffen verbessern können. Die Quintessenz war, dass wir zukünftig vermehrt auf den Austausch unter den Teilnehmern und weniger auf Präsentationen setzen möchten. Präsentationen sollen eher die Ausnahme und „etwas Besonderes“ sein. Stattdessen möchten wir für jedes Treffen ein Thema festlegen zu dem wir uns austauschen und diskutieren möchten. Hierzu haben wir eine Themensammlung gestartet, die wir hier immer wieder ergänzen möchten. Dabei sind folgende Themen zusammengekommen:

  • Wie kann man WordPress-Installationen sichern?
  • Wie kann man WordPress optimieren?
  • Was sind meine „Lieblings“-Plugins?
  • Wie kann man sinnvoll Suchmaschinenoptimierung (SEO) betreiben?
  • Wie wählt man ein passendes Theme aus?

Für das nächste Treffen haben wir uns für das Thema Sicherheit von WordPress entschieden. Alle Teilnehmer sind eingeladen, sich unter dem Motto „Wie sichert Ihr Eure WordPress-Installationen ab?“ auszutauschen.

Gerd