Wir basteln eine Webseite...

Nun, jemand der nach 2000 geboren wurde, würde mich vielleicht tatsächlich als "alt" bezeichnen - ich würde eher sagen "erfahren". Aber ja, ich kann mich noch an den "Turbo" Knopf an der Front eines Big-Towers erinnern. Das war wohl zu jener aufregenden Zeit als der 486er noch populär war. Wussten Sie übrigens das der Turboknopf weniger zum Beschleunigen war, sondern vielmehr um das Ding noch langsamer zu machen? Ja, wirklich! Zu jener Zeit nämlich war es noch üblich, dass Spiele zB so programmiert waren das ihre Ablaufgeschwindigkeit tatsächlich vom CPU-Takt abhing. Den 486er gabs von 20 - 100Mhz oder so in dem Bereich, was zur Folge hatte das ein Spiel das für 20Mhz programmiert worden war, auf den neueren Modellen dann unspielbar wurde weil es eben um bis zum Faktor 5 schneller ablief also geplant.

Ja ich weiß - nutzloses Wissen... Aber zumindest - für uns "erfahrene" Menschen - eine nette Anekdote.

Von Html, Java, Css und Core Web Vitals und der Kunst gefunden zu werden.

Offtopic:

Aber kommen wir noch einmal ganz kurz in eine Zeit in der das Internet neu war und sch...langsam. Achja, gute alte Zeit, damals war vieles noch ein wenig einfacher - so auch die Erstellung einer Webseite. Da hat ein wenig HTML gereicht, vielleicht in Verbindung mit einem *.gif das sich bewegt hat.

Das ist definitiv nicht mehr der Fall. Natürlich hab ich am Rande mitgekriegt das es CSS, JS, PHP gibt, auch das man Bootstrap-Templates verwendet - aber damit beschäftigt habe ich mich ewig nicht mehr. Übrigens fand ich das auch ein wenig verwirrend, schließlich taucht dieser Begriff (Bootstrapping) öfter in meinen diversen Berufs-Feldern auf. In der Informatik zum Beispiel bezeichnet das Bootstrapping einen Vorgang in dem ein simples System ein komplexes startet - wie das Booten eines Rechners. In der Elektronik bezeichnet man eine Schaltung in der sich eine Potential-Änderung auf der einen Seite, schlagartig auch auf der anderen auswirkt als Boootstrapping. Im Bezug auf Webdesign ist bei Bootstrapp ein freies Frontend-CSS-Framework gemeint.

"Bootstrap ist ursprünglich aus dem Vorhaben entstanden, die internen Analyse- und Verwaltungswerkzeuge von Twitter weiterzuentwickeln. Zu diesem Zeitpunkt wurden in dem Unternehmen unterschiedlichste Bibliotheken für die Oberflächenentwicklung eingesetzt, was zu Inkonsistenz und hohem Wartungsaufwand führte. Um diesen Herausforderungen zu begegnen, wurde der Schwerpunkt des Projekts erweitert...."

Danke Wikipedia! 2011 jedenfalls hat Twitter Bootstrapp als Open Source veröffentlicht. Danke dafür! Wo wäre das Internet heute ohne den Open Source Gedanken und die Leute die dafür Leben. Heute würde Twitter - entschuldigung - ich meinte natürlich X, sicher nichts mehr verschenken. Wenn X heute auffällt dann höchstens durch Hate, Verschwörungs-Schwurbelei und Aussagen die keinen Faktencheck überstehen. Letzteres zumindest wenn Elon, das Genie (das war Sarkasmus) etwas über sein persönliches SocialMedia verlautbaren lässt, irgendwann zu später Stunde, wenn er durch SpecialK (Umgangssprachlich für Ketamin) wieder im GodModus sich befindet und irgendetwas von extremer Wichtigkeit an uns unwichtige "Avatare" mitzuteilen hat. Falls jemand Aktien von einer seiner Unternehmungen hat - ihr solltet sie los werden. Ja schon klar, es gibt immer noch eine Menge treuer Fans - aber es gibt auch jede Menge Leute die tatsächlich glauben das die Erde eine Scheibe ist. Interessanter Weise sind beide Lager gleich beratungsresistent. Obwohl es klare, belegbare Fakten und/oder Experimente und Möglich....

...Schon wieder nutzloses Wissen - ich weiß, entschuldigung.

• Los gehts...
• ... erstmal damit eine Webseite auszusuchen und zu kaufen. Kein Scherz, hab ich wirklich gemacht. Schließlich hatte ich mich zuvor sicher 20 Jahre nicht mehr näher mit Webdesign beschäftig. Also hatte ich die überaus irrige Annahme das ich mir Zeit spare wenn ich ein fertiges Template kaufe und das nach meinen Wünschen umgestalte. Der Grundgedanke dahinter war der Glaube, das ich viel länger brauche um das alles wieder quasi von Null zu lernen, als ich brauche um mich im bereits vorhandenen Code zurecht zu finden. Kurz hat es auch so ausgesehen, als ob ich recht behalten würde. Aber dann kam das Cookie-Banner und danach die Erkenntnis das Google nicht einfach so tausende von Leuten auf meinen (mageren) Content zu lenken gedenkt. Auch irgendwie verständlich.
• Im Endeffekt habe ich bis jetzt soviel Stunden verheizt, das es anders vermutlich schlauer gewesen wäre. Das Preis/Leistungsverhältnis war zwar überaus ok weil 35 Euro hat mich jetzt nicht geschreckt und grundsätzlich hat alles sehr aufgeräumt und ordentlich gewirkt. Aber in den letzten paar Tagen habe ich ein wenig darüber gelernt wie Googles Crawler neue Seiten im Netz finden, rendern, bewerten und dann eben in den Index aufnehmen oder auch nicht. Außerdem wäre ja vor allem angesichts der unglaublichen Mengen an Webseiten, die es mittlerweile gibt, auch nicht so schlecht, wenn man im Ranking zumindest so weit vorne wäre, das wenigstens ab und zu sich jemand auf die Seite verirrt.

Die Basics: Ja tut mir leid, aber wir müssen kurz den Prozess beleuchten der im Browser passiert wenn eine Seite aufgerufen wird.

Wenn eine Seite im Browser geladen wird, analysiert (parst) dieser das HTML-Markup und bastelt sich daraus einen Baum, DOM (Document Object Model) genannt. Dabei stolpert er über die Verweise auf CSS-Files, die ebenfalls geparst werden (CSSOM). Mit JavaScript lässt sich das auch noch beeinflussen. Bevor der Browser das alles rendern kann, müssen erst alle Elemente geladen und geparst werden. Warum diese Tatsache einfluss auf das Ranking in der Google-Suche hat, dazu komme ich später noch. Wichtig ist das wir nun wissen, dass je mehr Elemente in Form von CSS und JavaScript-Files sich in unserem Verzeichnis tummeln desto länger wird in Folge auch die Ladezeit. Früher hat man lediglich die Bilder optimiert und das wars dann so ziemlich - heute ist es ein wenig komplexer. Ich kann jetzt nicht sagen ob das am StiefelRiemen-RahmenGerüst (bootstrapp-framework) liegt - aber ich kann sagen das mein Template, genauso wie alle anderen, die ich mir angesehen habe, viel zu komplex sind. Es ist zwar schön aufgeräumt und strukturiert - aber es enthält dermaßen viele Funktionen und Möglichkeiten in seinen unzähligen Scripts - für die 20 - 40 Seiten die meine Webpräsenz vielleicht irgendwann maximal haben wird ist das kompletter overkill. Wenn ich das kurz illustrieren darf:

Gesehen? Ganze 72 Scripts! (ja plural von Script ist tatsächlich Scripts, hab nachgesehen) Ich kann nicht einmal sagen ob die überhaupt alle geladen werden weil das würde mich noch mehr Zeit kosten, jeden Aufruf zu verfolgen. Dann wären da noch diverse Errors besagter Scripts, auf die ich auch nur zufällig gestoßen bin als ich mit den DevTools die im Chrome integriert sind, (ganz rechts oben, die drei Punkte, dann ganz unten im menu unter "weitere Tools" zu finden) eigentlich nach einem anderen Fehler gesucht habe. Stunden über Stunden..... Wie so oft hat sich die Sache eigentlich völlig anders entwickelt als gedacht.

Aber wie kommt man nun zu einem guten Googleranking und was heißt SEO und was bitte sind Core Web Vitals?

SEO meint Suchmaschinenoptimieren. Das finden, indexieren und (hoffentlich) auf einem guten Platz bei Google kommen, ist ein komplett automatisierter Vorgang. Der Google-Algorithmus entscheidet darüber. Vergesst die ganzen Super-Geheim-Tips irgendwelcher Pseudo-Profis auf Youtube und die ganzen Abzock-Seiten im Netz. Ob dem Google eine Seite gefällt, hängt von vielen Faktoren ab und ich vermute das Google selbst nicht mal genau wie das funtkioniert weil dieser Algorithmus mit Sicherheit durch eine KI selbstständig weiterentwickelt wird. Hier eine Aufzählung gewichtiger Faktoren - ohne Anspruch auf Vollständigkeit oder richtiger Reihenfolge:

1.

möglichst keine Fehler - Syntax, Scripts, tote Links, usw - was sich vielleicht selbstverständlich anhören mag, aber tatsächlich gar nicht so einfach ist. Es kann durchaus sein, das die Seite zwar zu funktionieren scheint, im Hintergrund aber Fehler verursacht. Als sehr praktisch haben sich - zumindest für mich - die Entwickler-Tools, die im Chrome Browser enthalten sind erwiesen.

2.

die Meta-Tags, auf jeder Seite muss eine ordentlich Beschreibung des Inhaltes sein (keine Stichwortsammlungen!).

3.

der Seitentitel (den im HTML meine ich) soll passen

4.

unnötigen Scripts-Ballast vermeiden, sonst kann passieren das der Crawler Deine Seite nicht rendern kann

5.

zuviel CSS-Zeug eingebunden - siehe 4.

6.

auch der alt-Tag bei Bildern soll eine tatsächlich Beschreibung davon aufweisen (aber keine Kopie der Bildunterschrift). Das ist zum Einen wichtig für die Bildersuche zB und zum Anderen auch wegen der Barrierefreiheit. Ein Blinder kann mit den Fingern lesen oder sich vom Computer vorlesen lassen, auch im Internet - aber ein Bild kann er sich nur vorlesen lassen wenn der alt-Tag ordentlich ausgefüllt ist.

7.

"unminified" CSS oder JavaScript-Files sind zu vermeiden. Beim Minifying werden alle Kommentare und alle Leerräume weitestgehend besesitigt im File - das zerstört zwar jede Lesbarkeit des Codes, soll aber Ladezeiten verbessern. Wir Menschen brauchen eine gewisse Struktur damit wir Code lesen und verstehen können - die Maschinen nicht. Jegliche Formatierung und die daraus resultierenden Leerzeichen kann man im Prinzip weglassen ohne Probleme für den Webserver. Allerdings gibt es dabei ein paar Dinge zu beachten. Ich bearbeite die Seite mit VisualStudio Code - da gibt es ein cooles Plugin bzw eine Extension Namens vscode-minify, welches man verwenden kann um JavaScript- und CSS-Files zu minifien.

8.

Content, sicher einer der wichtigsten Faktoren überhaupt. Je hochwertiger der Content, desto höher das Ranking. Google muss einen Wert für andere in der Seite sehen. Als hochwertig wird zum Beispiel gesehen, wenn der Inhalt nicht der Selbe wie auf 10000en anderen Seiten ist. Oder anders ausgedrückt, eine Seite bei der irgend ein Teilbereich der Physik thematisch behandelt wird, der sonst nirgend wo im Netz zu finden ist, wird als hochwertiger betrachtet als das Millionste Katzenvideo auf YouTube. Was jetzt nicht heißen soll das ich etwas gegen Katzen habe. Als Beweis kann ich folgendes Bild vorweisen, welches den Autor mit seiner besten Freundin zeigt:

9.

Links und Backlinks. Backlinks sind Verlinkungen auf andere Seiten, die wiederum zurück auf einem selbst gelinkt werden. Je mehr solche Verbindungen ihr im Netz habt, desto gut. Für Google ist das eine Variable für den Nutzen der Seite - neben dem Content natürlich.

10.

SocialMedia. Traurig aber wahr. Es bringt auch Plus-Punkte wenn man mit den jeweilig zur Zeit populären SocialMedia zu tun hat. Selbst meine Wenigkeit wird in Kürze das erste YouTube-Video auf seinen Kanal stellen.

11.

Core Web Vitals. Zitat Google: "Core Web Vitals is a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page." Menschen wollen unterhalten werden - lange Ladezeiten zum Beispiel sind NICHT unterhaltsam und damit kommen wir wieder auf die früher im Artikel gelernte Arbeitsweise des Browsers zurück. Zur Erinnerung: der Browser rendert erst wenn alles dazu nötige geparst wurde. Aber auch große Bilder oder Videos oder was auch immer im Content längere Ladezeiten als nötig verursacht, sollte vermieden werden. Eben wegen besagter Verzögerungen die den heutigen Surfer schnell mal zum wegklicken der Seite veranlassen aber auch natürlich wegend des Traffics den man verursacht. Man sollte schließlich nicht vergessen das dies alles Energie kostet. Wenn ein Bild statt 250kB optimiert bei kaum oder keinen optischen Nachteilen nur mehr 70kB sozusagen auf die Waage bringt, reden wir hier zwar von einer lächerlichen Datenmenge von 180kB, rechnet man diese lächerliche Menge mal 10000, ist das gar nicht mehr so lächerlich. Gut, bei den meisten Webseiten wird das zwar kaum Einfluß auf die Klimaerwärmung haben, aber dennoch gehört es zumindest erwähnt, wie ich finde. Die Core Web Vitals werden übrigens in Googles Search Console angezeigt.

12.

Keyword-Recherche. Manche Schlüsselwörter locken mehr Menschen an als andere. Bei besagter Recherche überprüft man ob die Schlüsselwörter, die man in den Meta-Tags verwendet (und natürlich den Inhalt und Zweck der Seite beschreiben sollen), gut sind, oder ob es eventuell andere Wörter gibt, die das selbe Aussagen, aber im Ranking besser da stehen. Die Unterschiede sind teils wirklich eklatant. "Maschinen" wurde heute bei Bing (Google hat so ein Tool nur in Verbindung mit gekaufter Werbung) in Österreich zum Beispiel 10 mal als Suchwort verwendet - "Maschine" hingegen 21 mal. Ein Buchstabe weniger verursacht über 100% Unterschied - ich denke das zeigt deutlich das auch dieser 12. Punkt nicht zu vernachlässigen ist.

Fazit und ein paar Zahlenspiele

Wer jetzt glaubt mit seiner neuen Webseite gleich tausende Klicks zu generieren.... Ja, das ist theoretisch natürlich möglich, aber... Die Anzahl der Websites lag 2024 bei 1,1 Milliarden - wovon allerdings "nur" rund 200 Millionen aktiv sind (Quelle: Statista.com). Also man muss sich schon bewusst sein, das man vermutlich nicht der erste ist, der mit egal welcher Idee um die Ecke kommt. Demensprechend schaut es auch mit den typischen visits aus. Hier noch ein paar mehr Zahlen, die mir im Netz untergekommen sind: März 2025, Google = 142,24 Billionen Aufrufe, Desktopanteil 27%, 73% entfallen demnach auf mobiles. Youtube 77,53 Billionen Aufrufe, Desktopanteil knapp 30%. Dann kommt mal lange nichts, gefolgt (leider) von Facebook mit 12 Billionen, Desktopanteil fast 50%. Danach kommen Instagram und Wikipedia (Wikipedia ist super, anm. des Autors) mit rund 7 Billionen. Also ich weiß nicht - die Daten sind zwar von der de-Version von semrush.com, aber ich glaube das sind trotzdem amerikanische Billions - also Milliarden für uns. Vielleicht auch interessant, Pornhub 5,5 Billionen (Milliarden), hat einen Desktopanteil von nur 5%, man schaut also hauptsächlich am Handy Filme für Erwachsene - wer hätte das gedacht.

Aber ich schweife schon wieder ab vom Thema... Mit welchen Besucherzahlen haben jetzt kleine Website-Betreiber wie du und ich zu rechnen? Also nicht mit viel, wenn man die Zahlen von SimilarWeb betrachtet. Demnach hat man mit 1000 Besuchern pro Monat bereits rund 93% der Webseiten abgehängt. Mit 500 Besuchern gehört man gerade noch zu den Top-10% der Webseiten-Betreibern. Auf der Seite von Johannes Strommer habe ich folgende Aussage gefunden: "Prinzipiell sollte jede Unterseite einer Website ein Jahr nach dem Bestehen mindestens 1 Besucher am Tag haben, also im Monat ca. 30. Eine typische Firmen-Homepage, die aus 5 Unterseiten besteht (Impressum, Datenschutz und dgl. nicht mitgezählt), sollte daher etwa 150 Besucher im Monat besitzen: 1*5*30 = 150. Liegt der Wert weit darunter, stimmt meist etwas nicht. Durchschnittlich mehr als 10 Besucher pro Tag je Unterseite sind dagegen schon eher ungewöhnlich." Aber kommen wir zu meinen eigenen Erfahrungen. Ich habe jetzt 2 Wochen und 2 Tage hauptsächlich mit dem erstellen dieser Webseite, dem lösen des Cookie-Banner Problems, sowie der Suchmaschinenoptimierung verbracht. Das Ergebnis ist ein Platz auf Seite 1 bei Google wenn man "Mechatroniker Wels Umgebung" zum Beispiel sucht. Das funktioniert erst seit gestern und heute (Montag) hatte ich damit 18 aktive Benutzer und 185 Aufrufe laut Google Analytics. Außerdem muss ich noch anmerken das ich, wenn jemand mein Cookie-Banner ablehnt - dann sende ich wirklich 0 Daten an Google - diese Besucher sind dann also unsichtbar für mich. Mein Business-Profil auf Google hab ich auch noch gar nicht fertig upgedatet - da fehlen noch wichtige Dinge wie Logo usw. Natürlich ist das mehr als ungenau, aber wenn ich diesen ersten Tag jetzt mal hoch rechne, dann komme ich auf ca 500 Besucher im Monat. Gemini sagt das - als ganz groben Richtwert - ca 1% der Besucher auch zum Telefon greifen wird. Möchte man also einen interessierten Anrufer/Tag, dann bräuchte man demnach 100 Besucher am Tag, oder 2200/Monat, wenn man von Werktagen ausgeht - was in meinem Falle ja ok ist, bei einem Onlineshop wäre das natürlich was anderes.

Welche Software verwende ich? An der Seite geschraubt wird wie schon erwähnt mit VisualStudio Code. Das mag ich deswegen weil man damit so ziemlich alles programmieren kann. Im übrigen kann es sich jeder einfach von winzigweich (Microsoft) herunterladen, kostet nichts. Außerdem hat es viele praktische Features und unzählige Extensions. Bilder bearbeite mit Gimp (Linuxfreunden unter euch wird der Name sicher bekannt sein). Würde ich noch einmal ein Template bei TemplateMonster bestellen? Kommt drauf an... Bezahlvorgang, Lieferung - alles Top. Geht schnell, unkompliziert. Aber was mich bei meinem Template jetzt eigentlich total nervt ist die Tatsache das ich 70 dateien im Schlepptau habe, von denen 10 CSS- und 14 JavaScript-Files bei jeder einzelnen Seite mitgeladen werden - und da rede ich noch gar nicht von Bildern, Icons, usw. Das auf Google-Schriften zugegriffen wird ist auch total überflüssig und kostet nur Ladezeit. Jetzt genau zu verfolgen was aus den 72 Files genau gebraucht wird und überflüssiges heraus löschen ist ein Megaaufwand. Weil wie es scheint, hat der Macher des Templates einfach ein Basic Set, was alles enthält was man aktuell so an Effekten verwenden kann und zimmert daraus eben seine Templates und verwendet hald was ihm gerade einfällt und der Rest bleibt natürlich trotzdem drinn. Aber vielleicht ist das ja bei anderen Templates anders. Wie gesagt, Bezahlvorgang und Lieferung waren supereasy und auch superschnell, da kann man nicht meckern.