Website-Relaunch für einen Prüftechnik-Hersteller

Die Herausforderung

Stadler Prüfpumpen aus Deutschland stellt Vakuumprüfpumpen her. Mit den Pumpen prüfen Verlader, Werkspforten und Tankwagenspeditionen in unter 30 Sekunden, ob Bodenventil und Auslaufschieber eines Tankwagens dicht sind, von Hand und ohne Strom oder Druckluft. Die Kundschaft kommt vor allem aus der Chemie, auch aus dem Ausland.

Die Website stammte von 2007 und lag auf dem Server einer Werbeagentur: Startseite plus fünf PHP-Seiten, Tabellenlayout mit fester Breite von 806 px, kein Viewport. Auf dem Handy erschien nur die verkleinerte Desktop-Seite. Dazu nur Deutsch, zwei Produktseiten mit demselben Text und auf der Startseite zwei Sätze neben einem Pumpenfoto mit 76 × 221 px. Seitentitel und Meta-Angaben waren seit 2007 unverändert, in der Beschreibung stand statt „ü“ inzwischen ein kaputtes Zeichen.

Der Auftrag: eine neue Website nach einem Entwurfsbild, mehrere Varianten zur Auswahl, auf Deutsch, Englisch und Französisch. Eine Bedingung zeigte sich erst nach dem Umzug: Der Agentur-Server lieferte nicht nur die Website aus, er nahm auch die Mails an. Darunter eine info@-Adresse, die der Kunde selbst nicht nutzte, an die aber Großkunden seit Jahren schreiben. Nach dem Umzug schien der Server überflüssig, eine Kündigung hätte genau diese Adresse abgeschaltet.

Die Umsetzung

• Vier Entwürfe an einem Nachmittag. Eine Variante nah am Entwurfsbild, dazu „Nachtblau“, „Technik“ im Look eines Zeichnungsblatts und „Dynamik“ mit Diagonalen. Der Kunde wählte am nächsten Tag, drei Tage nach der ersten Anfrage lief die neue Seite auf der Domain.
• Statisch statt WordPress. Reines HTML, CSS und JavaScript, ohne CMS, Datenbank, Login oder Plugins. Scans nach WordPress-Logins und Konfigurationsdateien laufen ins Leere, Plugin-Updates gibt es nicht. Dazu HTTPS mit TLS 1.3, Security-Header von HSTS bis Content-Security-Policy und eine security.txt nach RFC 9116. Gehostet wird als Cloudflare Worker im kostenlosen Tarif, jeder Push auf GitHub baut die Seite neu.
• Drei Sprachen als eigene Seitenbäume. Deutsch, Englisch und Französisch mit übersetzten Adressen und hreflang auf jeder Seite, statt einer Übersetzung per Skript zur Laufzeit. Suchmaschinen sehen jede Sprachfassung als eigene Seite, und alles funktioniert auch ohne JavaScript. Der Sprachumschalter führt auf dieselbe Seite in der anderen Sprache und behält die Lesestelle.
• Anfrageformular mit eigenem Backend. Statisches Hosting nimmt keine Formulare an. Ein zweiter, kleiner Cloudflare Worker prüft jede Anfrage auf dem Server noch einmal und stellt sie per Mail ins bestehende Postfach des Kunden zu, „Antworten“ geht direkt an den Anfragenden. Kein Drittanbieter, keine Datenbank. Für Kunden im Ausland: 243 Länder und Regionen mit Vorwahl, Ländernamen in der Seitensprache und eine freie Postleitzahl, weil viele Länder Buchstaben verwenden (SW1A 1AA, 1012 AB).
• Spam-Schutz ohne Bilderrätsel. Cloudflare Turnstile statt klassischem Captcha, geladen erst beim Öffnen des Formulars, dazu ein unsichtbares Fangfeld, Herkunftsprüfung und Längenbegrenzung. Wer am Formular vorbei direkt an die Schnittstelle sendet, kommt ohne gültige Eingaben und gültiges Captcha-Token nicht durch. Bekannte Bots bremst der Bot-Schutz von Cloudflare schon vor der Seite aus.
• Jede alte Adresse weitergeleitet. Die Liste der alten Adressen kam aus dem Web-Archiv: fünf PHP-Seiten, jede leitet per 301 auf die passende neue Seite. Zwei weitere Domains führen mit Pfad und Parametern auf die Hauptdomain, http:// per 301 auf https://.
• E-Mail vom Agentur-Server gelöst. Noch am Tag, an dem der Kunde die info@-Adresse meldete: Nameserver, MX-Einträge und Mail-Annahme des alten Servers analysiert, die zweite Domain von der Agentur weg übertragen und auf beiden alten Domains Cloudflare Email Routing eingerichtet, mit einer Regel für info@ und einer Sammeladresse für alles andere. Zugestellt wird ins bestehende Postfach, der Agentur-Server wird dafür nicht mehr gebraucht.
• Datenschutz durch Weglassen. Keine externen Schriften, kein Analytics, kein Tracking, keine eingebettete Karte, die Adresse öffnet Google Maps nur als Link. Das Produktvideo lädt erst beim Klick über youtube-nocookie.com, vorher zeigt die Seite ein selbst gehostetes Vorschaubild. Beim Seitenaufruf gehen nur Anfragen an die eigene Domain.
• Produktfotos freigestellt, jedes Bild lizenzgeprüft. Die Fotos des Kunden waren teils winzig (140 × 250 px), eines war ein abfotografierter Prospekt. Ein Python-Skript stellt die Pumpen mit dem KI-Modell BiRefNet frei, gleicht Edelstahl und Messing farblich an, setzt einen Bodenschatten und schreibt WebP in zwei Größen: Aus einem JPEG mit 346 KB werden 34 KB. Hintergrundbilder nur mit geprüfter Lizenz, Icons selbst gezeichnet oder unter offener Lizenz, das Logo als SVG nachgezeichnet.
• SEO von Grund auf. Seitentitel und Beschreibung für jede Seite aus den Produkttexten, canonical, hreflang mit x-default, eine Sitemap mit allen Sprachfassungen, strukturierte Daten (Organization, WebSite, BreadcrumbList), Vorschaubilder für geteilte Links und eine echte 404-Seite in drei Sprachen. Für KI-Suchen liegt eine llms.txt bereit, KI-Crawler sind nicht gesperrt.

Engineering Highlights & Qualitätssicherung

Eine statische Seite hat wenig, das kaputtgehen kann. Was bleibt, prüft der Build vor jedem Deploy, nicht erst ein Besucher:

• Kein Deploy ohne grüne Prüfung. Ein Prüfskript mit 1.091 Zeilen kontrolliert Sprachbäume, hreflang, interne Links, Sitemap samt lastmod, JSON-LD, CSP-Hashes, Header- und Umleitungsdateien und das Ablaufdatum der security.txt. Schlägt eine Prüfung fehl, bleibt die alte Version online. Dasselbe Skript läuft als GitHub-Check.
• Nur freigegebene Dateien gehen online. Der Build kopiert ausschließlich Dateien von einer Freigabeliste in den Ausgabeordner und bricht ab, sobald Git-, Python- oder Markdown-Dateien darin landen. Ohne diese Konfiguration veröffentlicht das Deploy-Werkzeug den kompletten Projektordner, samt Entwürfen, Skripten und Git-Daten.
• Gleich große Boxen in allen Sprachen. Französisch läuft oft deutlich länger als Deutsch oder Englisch. Damit Menü und Boxen beim Sprachwechsel nicht springen, trägt jedes Textelement die beiden anderen Übersetzungen als unsichtbare Platzhalter, die Box richtet sich nach der längsten. Gemessen: 0 px Höhenunterschied in Chromium über 201 Fensterbreiten, in Firefox und WebKit über je 101.
• 25 automatische Tests für das Formular. Telefonprüfung, Turnstile, Postleitzahlen mit Buchstaben. Ob Website und Formular dieselben Vorwahlen und Danke-Seiten kennen, prüft der Build gleich mit.
• Sitemap ohne Scheinaktualität. lastmod ändert sich nur, wenn sich Titel, Beschreibung oder Inhalt einer Seite wirklich ändern (Hash-Vergleich), nicht bei jedem Build.
• Header-Zucken behoben. Knapp unter dem Seitenanfang schaltete der Header rund 30-mal pro Sekunde zwischen groß und klein. Ursache war die Scroll-Verankerung des Browsers, behoben mit einem Schwellenbereich (Hysterese).

Das Ergebnis

• Drei Sprachen statt einer, 21 Seiten statt sechs. Je Sprache drei Produktseiten statt zwei Seiten mit demselben Text, dazu Rechtsseiten, Danke-Seite und eine eigene 404-Seite.
• Jede alte Adresse führt ans Ziel. 5 von 5 alten Seiten per 301 weitergeleitet, drei Domains auf eine zusammengeführt, live geprüft am 09.10.2026.
• Die info@-Adresse der Großkunden läuft weiter, jetzt über Cloudflare Email Routing statt über den Server der Agentur.
• 13,95 € laufende Kosten im Jahr. Bezahlt werden nur die drei Domains. Website, Formular und E-Mail-Weiterleitung laufen im kostenlosen Cloudflare-Tarif.
• Drei Tage bis zur neuen Seite auf der Domain. Erster Entwurf am 21.09., neue Seite live am 24.09., für Suchmaschinen freigegeben am 26.09.2026.
• Lighthouse 98 mobil, 100 auf dem Desktop. SEO 100 auf allen gemessenen Seiten, keine Layout-Verschiebung (CLS 0), größtes Element nach 2,3 s mobil und 0,6 s am Desktop (Startseite, gemessen am 09.10.2026). Best Practices steht bei 81, der Abzug kommt allein vom Bot-Schutz-Skript von Cloudflare, nicht vom eigenen Code.