drunomics GmbH

Eingereicht von:

Projektname:

einfachbacken.de Multisite

Kategorie:

Verlage/Medien

Die Multi-Site einfachbacken.de wurde als Mobile first Projekt konzipiert und mit der Drupal-8-Distribution Thunder umgesetzt. “Einfach backen” war die erste Website in dieser Multi-Site-Instanz, die rasch zum Sprungbrett für weitere Sites wurde. Bei der Entwicklung haben wir das Hauptaugenmerk von Anfang an auf die Performance gelegt. Dies manifestiert sich in Extras wie der Vue.js, SOLR-, Varnish- und Cloudflare-CDN-Integration sowie einer hochentwickelten Test-Suite mit Behat, Sitespeed und VRT.

Hintergrund

Bei „einfach backen dreht sich alles rund um das Herzensthema Backen. Ausgestattet mit einer großen Küche testen die Backprofis Anna-Lena und Siggi regelmäßig neue Kreationen. Für die Veröffentlichung der Rezepte wurde einfachbacke.de als erste Website einer hochperformanten Muli-Site-Instanz erstellt.

Thunder & Drupal bilden die Basis für diese Mobile first optimierte Website, die rasch zum Sprungbrett für weitere Instanzen mit mehreren Websites wurde. Das Backend-Setup (Nodes, Paragraphen, Formularen, Listen, …) wurde dabei auf die Wünsche und Bedürfnisse der Redaktion angepasst, Workflows für Redaktion und Marketing wurden optimiert.

Bei der Entwicklung dieser Multi-Site wurde auch auf eine konsequente SEO Optimierung geachtet. Schematische Metatags von Schema.org und strukturierten Daten von JSON+ld sind zentral für die Site. Benutzerdefinierte Token mit Fallback-Logik wurden so entwickelt, dass die Facebook-Share- und Google-Suchergebnisse immer optimal ausgespielt werden.

Das Frontend bietet ein freundliches Leseerlebnis mit Bildabschnitten, in denen unterschiedliche Bilder für Mobilgeräte und Tablets hochgeladen werden können. Dank Lazy Loading werden diese Inhalte zuerst ausgeliefert.

Ziele

Das Team von einfachbacken.de möchte gelingsichere Rezepte und Wissen teilen, um gemeinsam die Anlaufstelle Nummer eins für Hobbybäcker zu werden. Um dieses Ziel zu erreichen wird eine umfangreiche Sammlung an einfachen und schnellen Rezepten, die jeder nachbacken kann, veröffentlicht. Die Erstellung der Website erfolgt nach der Devise Mobile first, wobei das Hauptaugenmerk auf die Optimierung der Ladezeiten und auf die Performance bei Mobilgeräten gelegt wurde. Aus wirtschaftlicher Sicht ist eine Kostenersparnis durch Umsetzung einer Multi-Site-Installation zu erreichen.

Ergebnisse

Die Website einfachbacken.de wurde von Start weg mit einer großen Zahl an Rezepten gefüllt.

Die hohen Erwartungen im Bereich Performance konnten rasch erfüllt würden. Sitespeed.io-Tests analysieren die Seitenladegeschwindigkeit nach jeder Änderung, sodass die Website kontinuierlich auf Performance optimiert wird.

Die Website wurde wie folgt umgesetzt:
- Vue.js-Frontend statt jQuery!
- Spezifische Caching-Routinen, speziell für das Mega-Menü mit Vorschaubildern.
- Automatisch vorgeschlagene Phrasen (erscheinen nach den ersten 3 Buchstaben im Suchfeld) werden schnell geladen und liefern immer zumindest ein Ergebnis.
- Sinnvolles automatisches Scrollen: z.B. lädt die Suchseite bei einem mobilen Breakpoint automatisch die nächste Seite. In der Desktop-Version ist allerdings noch ein Klick erforderlich.
 

Technische Herausforderungen

- Umsetzung einer effizienten Caching-Strategie mit “vorgewärmten” Caches zur Erreichung kurzer Ladezeiten
- Regelmäßig Analyse der Sitespeed.io-Berichte mit daraus resultierenden Anpassungen für zukünftige Entwicklungen
- Umsetzung eines modernen Frontends mit Vue.js anstelle von jQuery für optimale Frontend-Performance und besserer Usability
- Handling eines Multisite-Setups, bei dem mehrere Instanzen der Webseite betrieben werden können. Pro Multi-Site sind leichte Anpassungen der - - Konfiguration und Anpassungen im Styling zu handeln.

Drupal Community-Beitrag

Das in Wien ansässige Unternehmen drunomics verfügt über langjähriges Know-how, um Drupal-Projekte in allen Dimensionen umzusetzen.

Wir sind sehr daran interessiert, an Open-Source-Projekten wie Drupal und seinen Contrib-Modulen mitzuwirken. Das Multi-Site-Projekt einfachbacken.de enthielt mehrere Patches für Contrib sowie auf Drupal.org veröffentlichte Projekte wie z.B.:

https://www.drupal.org/project/cache_tools
https://www.drupal.org/project/preserve_page_cache
https://www.drupal.org/project/ad_entity/issues/2974510
https://www.drupal.org/project/theme_breakpoints_js/issues/2974508
https://www.drupal.org/project/extlink/issues/2955326

Frontend Komponenten wie
https://github.com/drunomics/vue-lupus-rating
https://github.com/drunomics/vue-lupus-slider

Es gab auch eine Session auf der Drupal Europe zum Thema Entwicklung von High Performance Thunder Websites:
https://www.drupaleurope.org/session/building-high-performance-thunder-sites