Neue Website von Brandeis Consulting

Veröffentlicht am 26. April 2022 von

Jörg Brandeis

Zum 26. April 2022 haben wir die Website von Brandeis Consulting komplett neu aufgesetzt. Die Inhalte sollten weitgehend die gleichen sein, aber im Backend hat sich alles vollständig verändert. Von Wordpress (WP), dem mit 65% Marktanteil weltweit am meisten genutzten CMS sind wir auf GatsbyJs gewechselt. Aus guten Gründen.

Was steckt dahinter

Gatsbyjs ist ein Server Side Rendering (SSR) Framework. Das bedeutet: Die komlette Website wird vorab auf dem Server generiert. Zur Laufzeit werden einfach nur die fertigen Seiten ausgeliefert. Das hat viele Vorteile gegenüber Wordpress. Der wichtigste Punkt ist die Performance. Gatsbyjs ist pfeilschnell, weil nur noch die Seite übertragen werden muss. Auf dem Server passiert ansonsten nix mehr.

Warum der Umstieg

Eigentlich spricht alles für Wordpress: Es ist kostenlos, hat einen überragenden Marktanteil und lässt sich durch viele tausende Plug-Ins beliebig erweitern. Aber da fängt das Problem an. Man kann Wordpress nicht ohne ein duzend PlugIns laufen lassen. Bei mir waren beispielsweise trotz regelmäßigem Aufräumen am Ende 38 PlugIns im Einsatz. Da ich kein PHP Entwickler bin, konnte ich nicht genau sagen, was da am Ende passiert. Solange jedes PlugIn das gemacht hat, was es soll, war alles in Ordnung. Aber leider war das nicht immer der Fall. Gerade bei der Eventverwaltung und der Buchung von Schulungen ging immer wieder etwas schief. Neue Schulungstermine waren sehr aufwändig einzustellen. Und danach musste gründlich gestet werden. Und trotzdem kamen E-Mails mit der Info: Eure Anmeldung funktioniert nicht richtig. Die WP-Lösung des Problems wäre: Versuche es mit einem anderen Plug-In. Evaluierung 1-2 Tage, Implementierung 1-2 Tage. Danach hat man aber keine Garantie, dass es wirklich langfristig läuft. Andere Baustellen bei meiner WP-Installation:

• Sprachumschaltung Deutsch vs. Englisch mit WPML und automatischen Übersetzungen. Teilweise genial einfach und alles läuft perfekt. Aber Teilweise auch stundenlanges suchen nach banalen Problemen.
• Cookie-Banner korrekt einzustellen
• Eigene Beitrags-Typen für meine Schulungstermine
• Schema Generieriung für Schema.org
• Wiederverwendbarkeit von Blöcken. Weder Gutenberg noch zusätzliche Plug-Ins haben hier eine stabile Lösung.
• Performance ist immer ein Thema. Bei jeder Änderung. Ich habe im letzten Jahr alles von Elementor auf Gutenberg umgestellt. Das hat eine enorme Verbesserung der Performance mit sich gebracht. Aber es war ein riesen Aufwand. Und Gutenberg ist noch immer nicht ausgereift. Und 100 Punkte bei Google Speed Insights erreicht man trotz aller Bemühungen nicht.

In Summe hat mich Wordpress sehr viel Zeit gekostet. Irgend wann habe ich gesagt: Das ist alles Zeitverschwendung ohne einer echte Lösung der Probleme. Weiterhin technische Schulden einzugehen möchte ich nicht. Trotz vieler (teilweise kostenpflichtiger) PlugIns habe ich aber nie das Gefühl gehabt: Ich habe das alles 100% im Griff, verstehe was da passiert und kann jederzeit alles so einstellen wie ich möchte. Also habe ich in den sauren Apfel gebissen und mich zu einem Redesign entschlossen.

Was hat sich verbessert

Auf Platz eins der Verbesserungen war zunächst die Laufzeit. Mehr als 90 Punkte bei Google Speed Insights für Mobilgeräte ist natürlich ein Traum. Das ist mit WP einfach unrealistisch, aber mit Gatsbyjs sind solche Bewertungen quasi Standard.

Auch jenseits der Messungen: Die Website fühlt sich einfach viel schneller an und macht viel mehr Spaß. Man muss nicht lange nachdenken über jeden Klick, weil das alles super schnell geht.

Das Design wird nicht mehr durch PlugIns erzwungen, sondern kann frei bestimmt werden. Als Softwareentwickler bin ich natürlich ein Freund der Wiederverwendbarkeit und von Modularisierung. Entsprechend ist das Design nach einem durchgängigen Schema entstanden.

Objekte auf der Website sind beispielsweise:

• Blog-Artikel
• Schulungsthemen
• Kurstermine
• Blog-Kategorien
• Trainer

Diese Objekte haben alle die gleichen Eigenschaften. Wir brauchen jeweils unterschiedliche Sichten darauf:

• Die einzelnen Instanz. Ein Artikel. Ein Kurstermin etc. Diese einzel-Ansichten haben immer eine Seitenleiste, wo auf passende andere Obejkte referenziert wird. Also andere Schulungen, Links etc.
• Eine Liste von Objekten
• Eine Tabelle bzw. ein Grid
• Die einzelne Instanz als Kachel

Mit Gatsbyjs lässt sich das sehr elegant implementieren. Und wenn man mal ein Problem hat, dann ist der Fehler schnell gefunden. Das ist mir bei Wordpress nie gelungen. Im Gegenteil - hier habe ich gerade bei der Verwaltung von Events sehr viel Zeit investiert, weil nach jeder Änderung immer wieder alles getestet wurde.

Neue Features ohne Plugins

Ein aktuelles Beispiel: Das Kontaktformular hat zu viel Spam angezogen. Genau wie auf der alten Seite mit Wordpress. Aber anstatt einem Captcha, das ein weiteres PlugIn (oder das bestehende Formular kostenpflichtig macht), bei dem man dann alle Fahrräder oder Ampeln erkennen muss, kann ich das bei Gatsbyjs selber implementieren. Die Lösung für die Anforderung ist einfach, da 100% der Spam-Einträge eine URL enthalten und 100% der sinnvollen Anfragen eben keine URL enthalten. Mit JavaScript ist das in 2 Zeilen rausgefiltert:

export function containsLinks(text){
  const regex = new RegExp('(https?:\/\/[^\s]+)');
    return regex.test(text);    
}

Nebenbei habe ich auch jede Menge über NodeJS und JavaScript gelernt.

Fazit der neuen Seite mit Gatsbyjs

Alles in allem ist der Umzug jetzt durch. Wie in jedem IT-Projekt wurde der Umfang zunächst unterschätzt. Der Teufel liegt bekanntlich im Detail. Alles in allem ist hier vor allem die Mehrsprachigkeit eine echte Herausforderung gewesen. Zunächst hatte ich das mit ein paar Plugins lösen wollen, aber am Ende muss man doch vieles von Hand implementieren.

Und natürlich stehen noch ein paar Änderungen an der Website an. Dazu gehören auch ein paar neue Artikel, denn die sind in der letzten Zeit leider zu kurz gekommen. Über Feedback und auch die Meldung von Fehlern freue ich mich.

Aber am Ende hat sich der Aufwand gelohnt. Die Seite ist super schnell und funktioniert genau so, wie ich mir das wünsche.

Vielen Dank an Christian Drumm, der mich mit seinem Artikel Why I Created My Own Website inspiriert hat und mich vor allem auf die Idee mit GatsbyJS gebracht hat.