THE CASE:
einfachbacken.de was designed as a mobile first project and implemented using Thunder, an installation profile for the Drupal 8 content management system (cms). Thunder is a publishing distribution optimized for the media and publishing industries. "Einfach backen" is all about baking. Equipped with a large kitchen, baking pros Anna-Lena and Siggi test new creations. For the publication of the recipes, einfachbacke.de was created as the first website of a high-performance muli-site instance. Using this basis, a total of five websites were implemented:
• einfach backen www.einfachbacken.de
• mein schönes Land www.mein-schoenes-land.de
• slowly veggie www.slowlyveggie.de
• meine Familie & Ich www.meine-familie-und-ich.de
• beebetter www.beebetter.de
We can also announce that the multi-site project einfachbacken.de received the Splash Award 2019 for the category Media in Austria and was presented as best Austrian project of the evening. The chairman of the jury, Rouven Volk, explained that their decision was based on the outstanding technical implementation of the project. For further information about the Splash Awards 2019, see http://www.splashawards.de/2019/Austria
THE CHALLENGE:
The team of einfachbacken.de wants to share delicious recipes and baking knowledge with the goal of becoming the number one website for hobby bakers. The website should be created according to the motto mobile first, with a focus on the optimization of load times and on the performance of mobile devices to achieve better SEO and thus a wider audience. From an economic point of view, cost savings should be achieved by implementing a multi-site installation.
THE SOLUTION:
Thunder & Drupal form the basis for this mobile first optimized website, which quickly became a springboard for multiple websites of this multi-site project. The backend setup (nodes, paragraphs, forms, lists, ...) was adapted to the wishes and needs of the editors. Editorial and marketing workflows were also optimized.
When developing the project, drunomics focused on performance right from the start. This manifests itself in extras such as the integration of Vue.js, SOLR, Varnish, and the Cloudflare CDN. A sophisticated ensemble of Behat, Sitespeed and Visual Regression Test (VRT) test suites guaranteed that the site remained stable and usable to the readers. A pre-fetcher was also introduced so that caches are actively kept warm. Technology decisions could also be based on results from sitespeed testing. As such, the decision was made to remove Jquery from the front end and to use Vue.js. A fast search phrase suggestion mechanism could also be introduced so that searches were more efficient.
Throughout development much attention was also given to SEO optimization. Schematic meta tags from Schema.org and structured data from JSON + ld are also central to the site. Custom tokens with fallback logic were designed to keep the Facebook Share and Google Search results running at their best.
The frontend also provides a user-friendly reading experience with image sections where readers receive different images depending on the size of their mobile, tablet or normal computer device. Thanks to a robust lazy loading set-up, content and items above the fold are delivered first, with the rest of the page loaded in the background.
THE RESULT:
The first website went live in August of 2018 after 8 months of development. Prior to launch, the einfachbacken.de website was filled with a large number of recipes. Due to the extensive testing strategy, the high expectations in the area of performance could be guaranteed. Sitepeed.io tests continue to analyze the page load speed after each code change. With each update, the developer also takes site performance into account.
Due to the high quality expectations and with the support of our client, einfachbacken.de continues to contribute back to the Drupal community in the form of new Contrib modules as well as patching and improving upon the following Drupal.org projects:
• 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
Contributions were also made to frontend components like:
• https://github.com/drunomics/vue-lupus-rating
• https://github.com/drunomics/vue-lupus-slider
Last but not least, a session on developing high performance thunder websites was presented at Drupal Europe in 2018: https://www.drupaleurope.org/session/building-high-performance-thunder-sites
“There are so many nice tweaks, that really work as lighthouse project and what I really like about it, is the fact that it’s running as a multi-site environment. This is something that we really have to highlight. Drupal is such a versatile system, where we can build it once and roll it out to multiple sites, just with minor adjustments and a total new experience. As Burda highlighted at the Splash Awards, they rolled out five sites in five months and I think this is really awesome.”
Rouven Volk, Splash Awards 2019 Jury (Chairman)