Der Quellcode ist die Grundlage jeder Software oder Website. Er besteht meist aus tausenden von Befehlsfolgen, die ein Entwickler in der entsprechenden Programmiersprache eingibt. Jede Anwendung, die programmiert werden muss, besitzt dementsprechend einen solchen Quelltext.
Der Quellcode einer Website
Alle Webseiten bestehen aus einem HTML-Gerüst, welches sich aus dem Kopfbereich (Head), dem Körper (Body) und dem Fußbereich (Footer) zusammensetzt. Schon allein dieses Grundgerüst stellt einen wesentlichen Teil des Quellcodes einer Website dar. In das HTML-Gerüst werden dann mittels webbasierten Programmiersprachen (HTML, CSS, PHP, JavaScript usw.) weitere Befehle eingetragen. Wollen wir beispielsweise ein Bild auf unserer Website hinzufügen, lautet der zugehörige Programmcode:
<img src=”https://ihrerurl.de/bilder/bild.jpg”></img>
Der Betrachter einer Website, der von Programmiersprachen nicht viel Ahnung hat, kann damit natürlich wenig anfangen. Deswegen wird der Quellcode von der Anwendung in eine für den Menschen lesbare Sprache interpretiert.
In unserem Beispiel navigiert die Anwendung zu der URL, die als Quelle (src) für das Bild (img) angegeben ist. Sie sucht in dem Verzeichnis nach einer Datei mit dem Namen „bild.jpg“ und gibt diese schließlich auf dem Bildschirm des Webseitenbesuchers aus.
Alle Elemente einer Website sind als Programmcode im Quelltext der Seite eingegeben. Dazu gehören auch Schriftgröße (z.B. font-size: 24px;), Schriftfarbe (z.B. color: #ffffff;), Hintergrundfarbe (background-color: #000000;) und so weiter.
Webbasierte Programmiersprachen
Für die Erstellung von Internetseiten kommen folgende Programmiersprachen zum Einsatz:
- ◾ HTML
- ◾ CSS (Style-Sprache)
- ◾ PHP
- ◾ JavaScript
- ◾ Python
- ◾ Ruby
Jede Programmiersprache verfügt über gewisse Standards, die von jedem Entwickler eingehalten werden sollten. Da ein Quellcode oft aus mehreren tausend Zeilen besteht, sollen diese Standards dabei helfen, den Überblick zu behalten. Zudem sind sie hilfreich, wenn mehrere Entwickler an einem Projekt arbeiten, da immer nachvollzogen werden kann, wo sich welche Funktion im Quellcode befindet.
Da bei Webseiten oft verschiedene Sprachen miteinander kombiniert werden, kann es schnell unübersichtlich werden, wenn sich der gesamte Quelltext in einer einzigen Datei befindet. Daher wird der Quelltext einzelner Funktionen in einer eigenen Datei ausgelagert und in der Hauptdatei (HTML) durch eine Verknüpfung beim Laden der Seite importiert und ausgeführt. Auch die Style-Angaben wie Schriftgröße, Schriftfarbe, Abstände usw. befinden sich stets in einer ausgelagerten CSS-Datei (style.css).
Womit kann man einen Quellcode erstellen?
Einen Quellcode kann man mit entsprechender Software erstellen, beispielsweise mit dem kostenlosen Notepad++.
Mit Word oder anderen Schreibprogrammen lässt sich hingegen kein Quellcode erstellen.
Den Quellcode einer Website einsehen
Bei nahezu jeder Website lässt sich der Quellcode einsehen, jedoch natürlich nicht bearbeiten. Um den Quelltext einer Website anzuzeigen, müssen Sie auf der Website einen Rechtsklick ausführen und dann auf „Seitenquelltext anzeigen“ klicken. Schon bekommen Sie den gesamten Quellcode inkl. aller verknüpften Dateien präsentiert.
Quellcode, Performance und SEO
Bei langen Quellcodes, die beim Laden einer Website viele externe Dateien importieren und ausführen, leidet meistens die Performance der Seite darunter. Verwendet man auf einer Website beispielsweise viele Plugins, müssen diese immer zunächst importiert werden, was natürlich Zeit in Anspruch nimmt. Um die Performance einer Website zu verbessern, wird daher oft empfohlen, HTML, CSS und JavaScript Dateien zusammenzufassen und zu komprimieren. So werden beispielsweise auch unnötige Leerzeichen entfernt. Bei tausenden Zeilen Programmcode kann dies durchaus zur Performance-Steigerung beitragen.
Ein schlanker Quellcode ist auch für SEO ein entscheidender Faktor. Ein Crawler, der unsere Website besucht, liest den Quellcode von oben nach unten. Bei jedem Besuch steht dem Crawler dabei nur eine begrenzte Zeit für das Lesen und Auswerten des Codes zur Verfügung (Crawl Budget). Befinden sich im Kopfbereich des Quellcodes bereits jede Menge externe Dateien, die er ebenfalls auswerten muss, wird natürlich schon ein großer Teil des Crawl Budgets verbraucht. In ganz schlimmen, aber zum Glück seltenen Fällen, kann es so beispielsweise passieren, dass das Crawl Budget aufgebraucht ist, bevor der Bot überhaupt auf die wichtigen Textinhalte der Seite stößt.
Auch die Text-to-Code-Ratio ist ein wichtiger Faktor für die Suchmaschinenoptimierung einer Website. Er beschreibt das Verhältnis zwischen dem Textinhalt und dem dahinter liegenden Quellcode und sollte bei mindestens 20-25% liegen.
