The Need For Speed – Warum wir statische Seiten nutzen

Über 40% aller Websites nutzen WordPress [1]. Auch wir nutzen WordPress bei vielen einfachen und auch komplexeren Seiten. Doch gerade bei einfachen Seiten lohnt sich der Overhead nicht. Deshalb nutzen wir eine hybride Lösung.

Speed

TL;DR

(Too long; didn’t read)

Wir nutzen das Simply Static Plugin um statische Seiten aus WordPress zu erzeugen. Diese nutzen dann unser selbstentwickeltes OpenSource Tool „ImFlowMail“ um Kontaktformulare verschicken zu können.

Warum ?

Viele der Websites die wir erstellen gern WordPress-Seiten, da Pagebuilder wie z.B. Elementor eine schnelle Entwicklung ermöglichen. Auch bieten diese Systeme die Möglichkeit, dass der Kunde – wenn gewünscht – selbst Änderungen an seiner Seite vornehmen kann.

Leider haben diese Systeme den Nachteil, dass sie – trotz Cache – nicht so schnell sind wie eine statische Seite.

Hier einmal die Vor- und Nachteile einer statischen Seite zusammengefasst:

Pro statische Seite

  • Schnellere Seiten
  • Keine Cookies
  • Einfachere Production Server

Contra statische Seite

  • (eigentlich) keine Kontaktformulare
  • etwas komplexeres Setup
  • ein Klick mehr

Doch wie kann man die Vorteile des WordPress Systems mit der Geschwindigkeit einer statischen Seite kombinieren? Dazu haben wir einen Workflow eine eine Open Source Software entwickelt.

Wie?

Um unsere einfachen WordPress-Seiten zu statischen Seiten zu machen nutzen wir das Plugin Simply Static. Mit diesem Plugin lässt sich die Seite einfach in statische HTML Dateien konvertieren.  Diese können dann von jedem beliebigen Webserver verteilt werden.

Das Setup

Wir setzten normalerweise ein Subdomain für die Entwicklungsseite auf. Diese bekommt ein entsprechendes Präfix, z.B. „dev.example.com“. Auf dieser Seite ist WordPress installiert und wird bearbeitet. Möchte man nun seine Änderungen an der Seite publizieren nutzt man das Simply Static Plugin. Dieses Plugin stellen wir so ein, dass es alle Dateien in einen Ordner exportiert, welcher vom Webserver der Hauptdomain „example.com“ bedient wird. Jetzt werden die Änderungen automatisch mit jedem Aufruf des Plugins verteilt… Fertig! fast…

Das Problem 😫

In diesem Setup ist eine Funktion, die auf fast keiner Website fehlen darf quasi nicht zu realisieren: Das Kontaktformular.

Ohne eine Anbindung an ein Serverbackend wie WordPress eine dynamische Sprache wie PHP ist ein Kontaktformular beinahe unmöglich.

Die Lösung 🤓

Um dieses Problem zu umgehen haben wir die Open Source Software „ImFlowMail“  entwickelt, welche auf Github zu finden ist. Mit ihrer Hilfe ist es möglich für uns als Agentur mit nur einem Server die Kontaktformulare aller unserer Kunden auf statischen Websites zu bedienen. #

Um das Anbinden unserer Software noch einfacher zu machen haben ein WordPress Plugin entwickelt, welches genau auf den beschriebenen Workflow hin optimiert ist. Außerdem ist in dem Repository Beispielcode hinterlegt, der für vue.js oder nuxt.js verwendet werden kann.

Der Effekt

Wir haben den Effekt einmal an einer ganz einfachen Seite gemessen. Hier die Messung der WordPress-Seite:

Slow Website
Die Messung der WordPress-Seite
Fast Website
Die Messung der statischen Seite

Gerade in den Kategorien „First Contentful Paint“ und „Speed Index“ haben durch unseren Workflow eine deutliche Verbesserung erzielen können.

 

[1] https://barn2.com/wordpress-market-share/

Menü