Ein bis drei Tage für eine Website-Erstellung? Wie machst du das?

Ich weiß, dass diese Frage aufkommt aus Gründen, die nichts damit zu tun haben, wie ich es tue. Sondern eher aus dem Grund, dass man andere Webdesigner alt aussehen lässt, die Wochen für das gleiche Projekt brauchen. Ich gehe daher jetzt einfach mal darauf ein.

Website programmieren in ein bis drei Tagen?

Nein, mit Programmieren hat das nichts zu tun. Kleine Projekte, One-Pager, Kleinunternehmen, die meisten KMUs brauchen nur eine normale Website und ein paar Seiten. Da reicht simples HTML/CSS oder ein WordPress (Wenn der Kunde selbst später was an der Website ändern will) vollkommen aus. Wenn man ein wenig vorbereitet ist, dann ist das ziemlich fix erledigt. Ich gehe das anhand eines Beispiels einmal durch.

1. WordPress aufsetzen
2. Theme wählen
3. Design anpassen
4. Inhalte integrieren
5. SEO-Plugins installieren und optimieren
6. Speed-Plugins installieren und optimieren
7. Fertig

Klar klingt das wenig, aber alle in der Branche werden mir zustimmen, dass es oft ein massives Gefummel ist, vor Allem wenn der Kunde einen Hoster bevorzugt, der nicht besser als ein USB-Stick mit Internet ist. Aber es gibt immer ein typisches Muster und das sind immer die gleichen SEO-Plugins, Speed-Plugins, Kontaktformular-Plugins und Cookie-Banner-Plugins wie Borlabs.

Wie ich es tue

Ich habe mir ein WordPress komplett fertig für mehrere Szenarien erstellt, optimiert, angepasst mit allen notwendigen Plugins bereits drin und nutze dafür den Duplicator, wie hier bereits ausführlich beschrieben, um das mit einem Klick aufzusetzen. Also Schritt Eins, Zwei, Vier, Fünf und Sechs sind in unter einer Minute erledigt. Was für die restliche SEO noch zu tun ist, wird im Schritt 3, dem Design, direkt mitgemacht. Also von 6 Schritten ist nur einer zu tun.

Selbst wenn man anfangs für das Design ziemlich viel Zeit braucht, wird es mit der Zeit und mit der Erfahrung einfacher und deutlich schneller. Ich habe mit jedem Projekt hinzugelernt und weiß mittlerweile aus dem FF, welche Branche, welche Farben, Formen und optischen Tricks benötigt. Ein Design zu erstellen ist da nichts weiter als bewährte Strukturen zu integrieren, hübsch zu stylen und auf den Kundenwunsch anzupassen. Je nach Art des Kunden sind da verschiedene Dinge wichtig, die man einfach mit der Zeit dazulernt.

Warum brauchen viele Webdesigner Wochen?

Wenn man wirklich nur von einer kleinen Website ausgeht ohne Sonderfunktionen, dann ist da tatsächlich keine Ausrede warum es lange dauert. Die Branche ist einfach kaputt. Webdesigner als Bezeichnung ist nicht geschützt, also jeder kann sich so nennen. Und wenn du einer der 90% Learning-by-Doing Webdesigner bist, weißt du genau wovon ich rede. Als Anfänger muss man selbst erst einmal begreifen, was man tun muss, was der effektivste Weg ist und was der Kunde überhaupt will und wie man das umsetzt. Das wird mit der Zeit und mit mehr Erfahrung besser. Ein großer Grund ist auch der übergroße Teil der Pagebuilder wie Elementor und Co, die es einfach jedem ermöglichen, schöne Websites zu bauen. Sie sind unmöglich auf eine hohe Qualität zu bringen und werden niemals in der ersten Reihe stehen können bei Suchmaschinen. Das Warum erklär ich später. Das hat einfach technische Gründe, die in dem Environment des Builders kaum anders umsetzbar sind.

Dann gibt es Leute (die gibt es wirklich), die diese kostenlosen Website-Builder nutzen wie Wix. Ernsthaft? Die sind für Endkunden gedacht. Nicht dafür, dass sich einer Webdesigner schimpft und mit einem solchen Baukasten ein bisschen Lego spielt, bis irgendwas zu sehen ist. Unmöglich zu optimieren oder zu skalieren, der Müll. Das mag reichen für jemanden, der weder gefunden, noch gesucht werden will, aber was ist dann der Grund für eine Website? Das ist kompletter Mumpitz.

Dann gibt es die ausgebildeten Informatiker, Fachinformatiker, Mediengestalter und Co., bei denen es auch gigantische Unterschiede gibt. Ob Mediengestalter, Fachinformatiker oder Quereinsteiger – am Ende entscheidet nicht das Zeugnis, sondern ob jemand verstanden hat, wie Browser und Server wirklich ticken. Den meisten fehlt genau dieses eine Puzzlestück.

Je nach dem welchen Background man hat, ist man schneller, effektiver oder einfach schlauer in der Herangehensweise. Wer weiß, wo die Limits je System sind, wählt von Anfang an den korrekten Ansatz und spart dadurch jeglichen Neuanfang oder komplizierte Einstellungen, die man in Pagebuildern machen muss, um eine einzige Zeile CSS nachzubilden, die ein Profi an die richtige Stelle setzt.

Wie erkenne ich einen guten Webdesigner?

Das Obige soll nicht heißen, dass es keine fähigen Webdesigner gibt ohne Ausbildung. Es ist durchaus einfach, ein guter Programmierer zu werden, wenn man die richtigen Dinge lernt. Und das wird mit Baukästen niemals passieren. Punkt. Ich sehe so unfassbar viele „Agenturen“ und Leute, die sich Webdesigner schimpfen, die noch nie im Leben auch nur eine Zeile Code geschrieben zu haben scheinen. Erst gestern hatte ich in einer WordPress-Facebook-Gruppe gefragt, ob jemand eine Idee hat, wie man ein WordPress auf unter 300ms LCP bringt. Dominiert wurde der Thread von einem Kerl, der sich sofort präsentiert hat mit „Ich mach das seit Jahren immer, sowas liefere ich immer, ist doch normal“. Nach kurzen Check seiner Website, einer scheinbaren Agentur mit unendlich Schnörkeleien und Animationen, die den INP extrem anheben, brachte einen LCP von 2 Sekunden zum Vorschein. Auch wurde dieser Jemand von seinen Kunden in den Himmel gelobt in den Kommentaren alá „Kann ich bestätigen“, von einer Dame, deren Website einen LCP von 4.5 Sekunden hatte.

Als Beispiel nehmen wir mal die Website dieser Agentur

Deren Pagespeed zeigte schöne 97/100/100/100 an, und die Screenshots davon teilten sie gerne zum prahlen. Das mag für Nichtwissende gut aussehen, aber diese Zahlen sind nur eine Wertung anhand der reinen und unverfälschten Crawler-Metriken; NICHT der von Google genutzten Metriken.

Tolle Pagespeed-Wertung

Das ist der Klassiker bei Elementor + GeneratePress + Autoptimize. Der PageSpeed-Test sieht nur die erste HTML-Antwort und ein paar optimierte Assets → hohe Punktzahl.
Sobald aber Fonts, Elementor-JS, Animate-Plugins, Cookie-Banner usw. im echten Browser-Cache und auf realer Verbindung laufen, brechen LCP, CLS und INP komplett ein. In Kurz:

Schaut auf dem ersten Blick gut aus und sagt dem Kunden, der keine Ahnung hat, dass das toll ist. Aber schauen wir mal an, was direkt darunter steht:

Pagespeed Wertung Details

Uff, da geht einiges Schief. Und wir gehen da jetzt mal ganz unbefangen durch. Wir ignorieren die Bilder einfach mal, da jeder weiß, dass Pagespeed da immer meckert. 89KiB ist nichts Wildes, kann man so lassen.

Anfragen zum Blockieren des Renderings

Anfragen zum Blockieren des Renderings

Oha, da ist eine Menge drin. Wieso stört das? Der Browser liest das HTML von oben nach unten. Sobald er auf eine CSS-Datei stößt, macht er Pause und muss erstmal die CSS-Datei lesen, interpretieren, da CSS die gesamte Optik ändern kann. Das tut er hier in diesem Fall 8 mal. Der Browser pausiert also das Rendern der Website 8 mal nur hier. Allein das Laden der Dateien (ohne das Lesen selbiger) hat über 3 Sekunden gedauert.

Erzwungener dynamischer Umbruch

Erzwungener dynamischer Umbruch

Das ist nochmal was ganz grausames: Die Seite hat erst ganz zum Schluss (nachdem schon alles geladen ist) plötzlich ihre gesamte Aufteilung geändert – Texte sind plötzlich woanders hingerrutscht, Buttons haben sich verschoben, Bilder sind gesprungen usw. Das nennt Google „erzwungener dynamischer Umbruch“ (engl. Forced Layout Shift oder genauer Cumulative Layout Shift mit hohem Impact).

Beispiel, das jeder kennt:

Du fängst an zu lesen → plötzlich schiebt sich oben ein Werbebanner oder ein Cookie-Hinweis rein → der ganze Text rutscht 100 Pixel nach unten → du verlierst deine Lesestelle.
Genau DAS ist ein „erzwungener dynamischer Umbruch“. Nervt tierisch.

Typische Übeltäter:

• Bilder oder Videos ohne angegebene Größe (height/width)
• Werbung, die nachträglich geladen wird
• Schriften, die erst später wechseln (Web-Fonts)
• Elemente, die erst nach JavaScript sichtbar werden

Im Fall dieser „Agentur“ ist es von einem Menu-Plus-Plugin, welches Sie verwenden, da es wohl zu schwierig ist, ein Menü selbst zu erstellen, zumal deren Menü nur aus 2 Buttons besteht. ähm… ok. Eine Agentur die kein stinknormales Menü hinbekommt und dafür ein extra Plugin installieren muss? what the…

simples Menü. Da es eh das einzige Nav element ist, brauch es nicht einmal Klassen. Einfach nav{}, ul.nav{}, li.nav{} und a.nav{} zum stylen verwenden. Easy.

Stattdessen Fertigmüll aus einem Plugin oder Pagebuilder:

Holy Shit mehr Klassen und Attribute, als Elemente auf der ganzen Seite existieren

Ich bin wohl etwas abgeschweift 😀 Naja. Man kann sich schon denken, dass das den Browser ein kleines Bisschen aufhält beim Rendern der Website, wenn da statt 3 Zeilen, einfach mal 3 Dutzend stehen und jeweils Kilometerlang sind und Klassen aus verschiedenen CSS-Dateien anwenden.

Die beiden anderen Scripte sind BEIDE IDENTISCH und werden getrennt voneinander erneut eingebunden. Wieso? ELE-fucking-MENTOR oder ähnliche Pagebuilder. Das Schlimmste, was man einem Frontend antun kann. Bloat ohne Ende. Es versucht zwar dynamisch zu selektieren und nur das zu laden, was man braucht, wie in diesem Fall das Javascript für ein floating Element, aber nutzt man mehrere davon, wird eben auch das Javascript mehrfach eingebunden.

Netzwerkabhängigkeitsbaum

Netzwerkabhängigkeitsbaum mit 23 Abhängigkeiten

Was sagt uns das? Um die Website anzuzeigen, müssen all diese Dateien vollständig ohne Fehler heruntergeladen und verarbeitet werden. Der Baum zeigt in diesem Fall in welcher Reihenfolge das geschieht.

Info zur Website:
Ich zähle im Quelltext genau folgende 21 unterschiedlichen Elemente:

1. <a>
2. <article>
3. <aside>
4. <body>
5. <button>
6. <div>
7. <footer>
8. <h1>
9. <h2>
10. <h3>
11. <header>
12. <html>
13. <img>
14. <li>
15. <main>
    
16. <p>
17. <section>
18. <span>
19. <svg>
20. <ul>
21. <nav>

Dazu 170 unterschiedliche Klassen im Inhaltsbereich (body), aber 9 CSS-Dateien, 11 JS-Dateien?

170 Klassen, selbst wenn man sie doppelt deklariert für mobil und desktop und es wirklich übertreibt, macht es maximal 500 Zeilen CSS. Da bräuchte man nicht einmal eine CSS-Datei sondern einen inline Style-Tag im Head und fertig. Das Javascript sind nur unnütze Animationen. Mouseovers, Icons, die Einblenden, wenn man irgendwas klickt, komplett unnötiger Krams. Kann alles weg. Ein Script-Tag würde reichen, um die beiden wichtigen JS-Funktionen zu integrieren und auch das kann inline sein.

Also es ist wirklich eine winzig kleine Website. Ein Programmierer hätte dafür in EXAKT identischer Optik in purem HTML, CSS und Javascipt eine Website gemacht in unter 2 Stunden, die gar keine Ladezeiten, keine Abhängigkeiten und nur minimalstes CSS hätte. Stattdessen hat die Seite einen massiven Bloat und einen Speed-Index von 4 Sekunden. Klar ist das für einen Baukasten nicht schlecht, ebenso wie es toll ist, dass ein Kleinkind mit Stützrädern nicht umfällt in der ersten Kurve. Deswegen muss es sich aber nicht so Präsentieren, als hätte es die Tour-De-France mehrmals gewonnen.

DAS ist was bremst. Amateure ohne jeglichen Skill, die mit fertigen Baukästen etwas an Kunden verkaufen. Und weil es eben mit diesen Baukästen so schrecklich lange dauert das erstmal zusammenzufriemeln, muss man dann noch irgendwie optimieren, damit einen der Load nicht auf eine Stunde Ladezeit bringt. Also Generate Press drüber laufen lassen und das Beste hoffen. Pagespeed schaut auf den ersten Blick toll aus, Kunde happy, wird aber niemals eine Rolle in Suchmaschinen spielen. Es ist: Müll. Und der Betreiber wird sich noch die Zähne ausbeißen bei dem Versuch die Website irgendwie schneller zu kriegen. Bis er endlich schnallt, dass es mit einem solchen Baukasten und null Ahnung eben nicht geht.

Natürlich gibt’s auch Leute, die mit Elementor vernünftige Sachen bauen – aber die kämpfen dann jedes Mal gegen das Werkzeug statt mit ihm.

Vergleich: Die Website, auf der du dich jetzt gerade befindest ist ein WordPress. Von mir. Kein einziges Plugin ist installiert. Nur ein Theme und eine Stunde meiner Zeit. Teste gern mal im Pagespeed oder GTMetrix. Nicht einer der o.g. Punkte tauchen auf. Auf einer Website, die schneller, besser und sauberer ist und keine 2 Stunden zum Erstellen gebraucht hat.

Echte, professionelle Agenturen

Bei denen läuft es anders. Die echten Profis wissen was sie tun und was sie dem Kunden geben können und wie man es optimiert (hoffe ich jedenfalls). Bei seriösen Agenturen dauert eine kleine Website selten drei Wochen wegen der Technik – meistens wegen voller Auftragsbücher oder weil der Kunde zehn Korrekturrunden will. Das ist okay, solange der Kunde weiß, wofür er bezahlt.

Bei großen Projekten muss es oftmals lange dauern, wenn man jedes Detail beleuchtet, aber in diesem Beitrag ging es nur um kleine Websites, wie es für KMUs typisch ist und die simple Antwort auf die Frage „Ein bis drei Tage für eine Website-Erstellung? Wie machst du das?“ ist: Ich bin Profi, gut vorbereitet und brauche keine Stützräder.