TPOnlineMedia.com
Ich habe das gesamte digitale Fundament für TPOnlineMedia gebaut: die Website auf Dänisch, Englisch und Deutsch, ein Admin-Panel und einen automatischen Website-Check, der zeigt, was an einer Website nicht stimmt, so geschrieben, dass jeder ihn versteht.
Die Herausforderung
Die Seite sollte ohne einen Server auskommen, der betrieben und gewartet werden muss. Gleichzeitig sollte sie schnell, barrierefrei und in drei Sprachen von Suchmaschinen auffindbar sein.
Die Website
Die Website ist ein statischer Export ohne eigenes Backend. Anfragen gehen direkt vom Browser an Supabase, wo der öffentliche Schlüssel nur Daten einfügen, aber nie Kundendaten auslesen kann.
Im September habe ich die Seite in einem dunklen Design mit einer einzigen Schrift durchgehend neu gebaut.
Der Website-Check
Man gibt eine Adresse ein und erhält einen Bericht mit Messungen aus fünf Kategorien: SEO, Geschwindigkeit, Sicherheit, Technik und Konversion, so geschrieben, dass er ohne Programmierkenntnisse verständlich ist. Der Bericht zeigt selbst, was zuerst behoben werden sollte.
So läuft ein Check ab7 Schritte · dieselbe Engine wie die Validierung
- Adresse und E-Mail werden validiert, und ein verstecktes Feld fängt Bots ab, ohne ihnen einen Bericht zu geben
- Der Versuch wird zuerst in der Datenbank reserviert — 4 pro E-Mail und Stunde, 8 pro IP, 10 pro Domain, 150 insgesamt, sonst wird er sofort abgelehnt
- Die Seite wird sicher geladen, zuerst https und http nur, wenn https fehlschlägt; Bot-Schutz von Vercel oder Cloudflare wird erkannt und ans Team weitergegeben, statt als Fehler zu zählen
- Robots.txt, Sitemap, Favicon, https-Umleitung und Komprimierung werden parallel zur eigentlichen Seite abgerufen
- Die Messung wird umgerechnet pro Check in bestanden/teilweise/fehlgeschlagen, und in einen Score für jede der fünf Kategorien
- Der Bericht wird gespeichert, und Googles PageSpeed-Messung wird im Hintergrund abgerufen, ohne dass der Besucher darauf wartet
- Der Bericht wird verschickt in der Sprache des Kunden, und gleichzeitig geht eine englische Notiz ans Team
Dieselbe Engine läuft, wenn der Kunde die Seite nutzt, und wenn die Validierung den Check gegen eine unabhängige Messung hält.
Bevor der Check live ging, wurde er mit einer unabhängigen Browsermessung von 22 echten Websites abgeglichen. Im letzten Durchlauf stimmten 548 von 550 Messungen überein. Die beiden Abweichungen gingen auf eine Seite zurück, die ihren Sicherheits-Header von Mal zu Mal unterschiedlich sendet.
Das Admin-Panel
Das Panel bündelt Anfragen aus allen drei Sprachversionen, Pipeline, Kalender und Traffic, cookielos gemessen. Antworten werden aus dem Panel verschickt, und die Rückantwort des Kunden landet im selben Verlauf.
Das Lead-Werkzeug für Deutschland ist eine Anrufliste, kein Mail-Werkzeug. Kalte B2B-E-Mail setzt nach UWG §7 eine vorherige Einwilligung voraus, während Anrufe bei Unternehmen bei mutmaßlicher Einwilligung zulässig sind.
Ergebnisse
Die Startseite schrumpfte von 11,3 MB auf 1,9 MB, indem 13 Screenshots in gleicher Größe von PNG auf WebP umgestellt wurden, ohne sichtbaren Unterschied.
Der Kontrast wird automatisch auf allen 28 Seiten und über 7.000 Textfeldern gemessen, keines liegt unter der Anforderung. Alle Seiten wurden mit einem automatischen Barrierefreiheits-Werkzeug in Desktop- und Telefonbreite ohne Fehler getestet.
Die Sicherheitsregel der Seite dafür, von welchen Domains Inhalte geladen werden dürfen, blockiert jetzt alles andere, nachdem 33 Seiten über alle drei Sprachen hinweg im Browser geprüft wurden, ohne eine einzige Verletzung.
0/ 550
Messungen stimmten mit einer unabhängigen Browsermessung von 22 echten Websites überein
0
Barrierefreiheitsverstöße gefunden mit axe auf allen 28 Seiten, bei 1440 und 390 px
0
CSP-Verstöße auf 33 Seiten über alle drei Sprachen hinweg, geprüft in WebKit