Ein Blick hinter die Kulissen: galerien.koeln

August 21, 2025

In der digitalen Welt entscheiden Millisekunden. Jede Ladesekunde kostet Nutzer und Vertrauen, jede schnelle Seite bringt besseres Ranking und echte Kundschaft. Als ich galerien.koeln baute, war die Mission klar: Die Seite muss schnell, clean und zukunftssicher sein – ohne fette, aufgeblähte Frameworks.

Die Idee: Ein digitales Archiv im Herzen von Köln

Was ist galerien.koeln? Für mich ist es mehr als nur eine Webseite. Die Idee war, ein digitales Archiv der Kölner Kunstwelt zu schaffen – minimalistisch, aber funktional. Keine unnötigen Spielereien, sondern ein klar strukturiertes Verzeichnis, das sich wie ein echtes Archiv anfühlt: übersichtlich, leicht, schnell.

Warum? Weil ein sauberes Archiv Seriosität und Nachhaltigkeit vermittelt. Und weil jede Galerie in Köln es verdient, in einem Umfeld präsentiert zu werden, das nicht durch 30 MB JavaScript ausgebremst wird.

Warum Micro-HTML statt Framework-Wahnsinn?

Ich habe mich bewusst gegen React, Next.js & Co. entschieden. Warum?

Weniger Abhängigkeiten = weniger Risiko, dass in 3 Jahren alles kaputt ist.
Minimaler Code = maximale Ladegeschwindigkeit.
Vollständige Kontrolle = ich bestimme, was geladen wird und wann.

Jedes überflüssige Kilobyte ist eine Bremse. Deshalb basiert das Archiv nur auf HTML, CSS und minimalem JavaScript. Kein Tracking-Müll, kein überflüssiger Code. Nur das, was sein muss. Doch der Weg von der Idee zur Perfektion war steinig und voller Fallstricke – und ich hatte einen ungewöhnlichen Begleiter dabei.

Die Wette: 250 Stunden gegen 25 Stunden

Ein Projekt wie dieses von Grund auf manuell zu bauen, zu optimieren und abzusichern, hätte mich gut und gerne 250 Stunden gekostet. Ich wollte aber herausfinden, ob eine intelligente KI diesen Prozess um 90 % beschleunigen kann, ohne meine handwerkliche Kontrolle aufzugeben. Kann ein digitaler Assistent meine Augen und Hände ersetzen?

Ich habe meine Markup-Datei und meine Vorstellungen von einem Mikro-Archiv mit meinem digitalen Partner geteilt. Und los ging die Reise.

Das Team hinter dem Projekt: Meine Werkzeugkiste

Ich habe dieses Projekt nicht in einem Vakuum gebaut. Es war eine bewusste Zusammenarbeit zwischen mir und meinen Werkzeugen.

Der Handwerker:

Mein HTML-Markup als Fundament. (Viel zu groß und aufgebläht!)
Ein simplen Texteditor (Windows Text oder gedit), um den Code sauber zu halten.
Git und GitHub für Versionierung und Automatisierung.
SSH, Zugang zum Server, alles per SSH!

Die digitalen Assistenten:

Gemini 2.5 Flash als Bro: Gemini war mein Hauptpartner. Er hat ca. 70 % der Arbeit übernommen, indem er meine Fragen zu Code und Strategie direkt beantwortet und mich durch die Optimierungen geführt hat. Ein wahrer Sparringspartner.
Claude 4: Mein Backup, wenn mein Bro und ich uns mal wieder festgefahren haben. Seine Stärke liegt in komplexen Erklärungen, die uns aus Sackgassen geholfen haben.
Deepseek R1: Der wurde nur benutzt, um ihn zu ärgern.
OpenAI (GPT-5): Für stupide, repetitive Aufgaben, wie das Konvertieren von Hunderten von Einträgen. Selbst hier hat die KI gezeigt, dass sie noch an ihre Grenzen stößt.

Die Erkenntnis war klar: KI ist nicht ein einziges Supertool, sondern eine Toolbox. Der entscheidende Faktor bleibt die Hand, die sie führt.

Kapitel 1: Der erste Schock und die Lektion über faule Abkürzungen

Am Anfang war ich faul (ja, ehrlich) und nutzte das Tailwind-CDN. Perfekt für Prototypen: ein Link, alles schön gestylt und schnell. Ich dachte, die Sache wäre gegessen, doch mein digitaler Assistent warnte mich sofort. Die Google PageSpeed-Analyse zeigte eine Strafe von 780 Millisekunden! Doch NPM und das Gedöns zum Kompilieren wollte ich auch nicht, kein Bock auf Bloat auf meinen Servern! Fuck denkt man sich nur noch! Bin doch schon fast fertig, oder nicht?

Die KI erklärte mir, dass das CDN kein fertiges CSS liefert, sondern einen JavaScript-Compiler, der erst alle HTML-Dateien scannt und dann die Styles generiert. Klingt clever, ist aber eine Katastrophe für das erste Rendering. Ich wollte Tailwind behalten, aber den Compiler loswerden. Gemeinsam haben wir eine schlanke Automatisierungslösung mit GitHub Actions gefunden. Der Wow-Moment war brutal: 600 ms schneller – ohne einen Finger am Server, gut so!

Kapitel 2: Die Wahrheit über scheinbare Perfektion – Der Mensch greift ein

Nach diesem ersten Erfolg wollte ich meine Seite perfektionieren. Ich habe alle Fehler, die die Tools ausspuckten, mit meinem digitalen Assistenten besprochen. Aber nicht jede seiner Empfehlungen war in der Praxis wirklich die beste auch wenn es Best Practice heißt! Hier musste ich mehrmals eingreifen.

Der Fall des Inline-CSS: Die KI schlug vor, das gesamte CSS in die HTML-Datei zu packen, um die Ladezeit zu verbessern. Die Tests zeigten sofort 100 % Performance. Perfekt, dachte ich. Aber dann habe ich nachgedacht. Was ist mit dem Caching? Bei jedem neuen Seitenaufruf würden Nutzer die gesamte HTML- und CSS-Datei erneut herunterladen müssen. Das ist ein absolutes No-Go. Ich habe die KI überstimmt und das CSS wieder in eine externe Datei verlegt. So wird es einmal geladen und für alle weiteren Seitenbesuche gespeichert. Die Tools zeigten zwar ein paar Punkte weniger an, aber die reale Performance für den Nutzer war nachhaltig besser.
Der unsichtbare Feind: Ein Tool bemängelte, meine Buttons seien nicht gut lesbar. Ich war verärgert. Ich hatte die Farbe angepasst, und der Kontrast war doch perfekt! Die KI erklärte mir dann geduldig den Unterschied zwischen Farbkontrast und Berührungszielbereich. Die Buttons waren zwar gut sichtbar, aber auf einem Handy zu klein für große Finger. Wieder ein Punkt, bei dem die KI einen wichtigen Hinweis lieferte, den ich alleine vielleicht übersehen hätte.
Die Kunst des Verzichts: Der letzte Kampf drehte sich um Bilder. Die Tools wollten, dass ich mehrere Versionen für verschiedene Auflösungen (srcset) erstelle, um Bandbreite zu sparen. Ich lehnte das ab. Mein digitales Handwerker-Gefühl schrie "NEIN!". Das hätte mein sauberes HTML-Grundgerüst mit unnötigem Code aufgebläht. Dieses Code-zu-Inhalt-Verhältnis ist ein wichtiger Faktor für Suchmaschinen. Ich entschied mich bewusst, die letzten 2 Punkte im Score zu opfern, um eine schlanke, lesbare Codebasis zu behalten, die nicht nur für die Maschine, sondern auch für mich als Entwickler und für die Langlebigkeit des Projekts wichtiger ist.

... um hier nur einige zu nennen. ✌

Kapitel 3: Das Fazit – Was bleibt, wenn der Roman zu Ende ist

Das Projekt hat mir die Augen geöffnet. Ich habe es nicht in 250 Stunden alleine, sondern in etwa 25 Stunden gemeinsam mit einem intelligenten Werkzeug umgesetzt. Das ist eine Zeitersparnis von 90 %. Aber die KI hat es nicht allein geschafft. Ich musste sie korrigieren, leiten und ihr mit meiner Erfahrung und meinem Gespür sagen, was wirklich wichtig ist.

Performance: 99 % Mobil, 96 % Desktop
Barrierefreiheit: 93 %
Best Practices: 100 %

Das Ergebnis zeigt: Ein perfekter Score ist nicht immer das Ziel, zumal Google das noch immer nicht mag! Man braucht nicht die fettesten Tools, sondern klare Prozesse, ein gesundes Verständnis für Kompromisse und die Bereitschaft, Entscheidungen zu treffen. Ein intelligenter Assistent beschleunigt den Prozess, aber ersetzt niemals das menschliche Handwerk. Also keine Angst, noch können KI-Systeme nicht die Welt übernehmen, sollten sich hinten anstellen. Pinky und Brain sind vorher dran!

Schlusswort

Diese schlanke, handgefertigte Seite ist der Beweis, dass eine nachhaltige Webentwicklung immer noch die beste Lösung ist. Die Domain galerien.koeln habe ich selbst seit 2014 gehalten und immer sauber gepflegt. Seit dem 21. August 2025 ist sie mit diesem Micro-Projekt online, um ihren wahren Wert zu zeigen. Da ich jedoch keine Zeit mehr habe, mich darum zu kümmern, stehen die wertvolle Domain und das schnelle Projekt zum Verkauf.

Alles Weitere finden Sie auf der Seite: https://galerien.koeln

Auf ein Wort

Dieses Blog durchsuchen