Der Bereich der Quellcode Optimierung befasst sich mit dem Aufbau sowie dem Einsatz von HTML, CSS, und JavaScript. Bei der Quellcode Optimierung ist es von Vorteil, wenn Kenntnisse in dem Umgang mit HTML, CSS und JavaScript Elementen vorhanden ist.
Seitentitel
Der Titel der Seite sollte den Inhalt widerspiegeln somit ist ein individueller Titel für jede Seite angebracht.
<html> <head> <title>Mein Seitentitel</title> </head> <body> </body> </html>
Überschriften
Die Überschriften sind ein zentrales Element einer Seite, sie trennen einzelne Bereiche für den Betrachter sichtbar und werden von Suchmaschinen interpretiert.
Jedoch wird nach einem <h1> ,<h2>,… Tag gesucht, ein einfaches <div> oder <span> Element mit einer CSS Klasse, welche eine Überschrift definiert wird, hier nicht als „echte“ Überschrift interpretiert und somit von der Suchmaschine nicht gefunden.
Schlecht
<html> <body> <div style="font-size:16px;font-weight:bold;color:green">Überschrift</div> </body> </html>
auch Schlecht
<html> <body> <div class="Ueberschrift1">Überschrift</div> </body> </html>
Besser
<html> <body> <h1>Überschrift</h1> </body> </html>
Der passende Eintrag in der CSS Datei könnte dann so aussehen.
h1 {
font-size: 16px;
font-weight: bold;
color: green;
}
Leerzeilen und Leerzeichen
Einige Editoren, vor allem WYSIWYG Editoren fügen unnötige Leerzeilen und auch Leerzeichen ein, diese blähen den Quellcode unnötig auf. Deshalb ist es von Vorteil auch, wenn man diese einfache Art der „Entwicklung“ einer Webseite betreibt, mal hinter die Kulissen zu schauen. Vor allem die Benutzer von Smartphones werden es Ihnen danken.
Bilder
Wie schon im Einleitungstext vermerkt ist, ist der Übergang der OnPage Optimierung zur Quellcodeoptimierung fließend und das merkt man verstärkt beim Bereich Bilder.
Wenn Sie Bilder auf Ihrer Seite darstellen wollen, sollten Sie den Platz, welcher für das Bild benötigt wird „reservieren“ das machen Sie, indem Sie, indem Sie dem <img> Tag die Höhe und die Breite geben.
<html> <body> <img src="images/sonnenblume.png" width="150" height="300"/> </body> </html>
CSS Style
CSS Styles welche an HTML Elementen mittels dem Tag „style“ gesetzt werden sollten in eine externe CSS Datei ausgelagert werden.
Schlecht
<html> <body> <div style="font-size:bold;color:red;">Mein besonders formatierter Text.</div> </body> </html>
Besser
<html> <head> <link rel="stylesheet" type="text/css" href="css/styles.css"></link> </head> <body> <div class="formatedText">Mein besonders formatierter Text</div> </body> </html>
Ein nicht zu verachtender Vorteil dieser Methode ist das schoneinmal definierte Styles verwendet werden können, somit wird der Gedanke des CI umgesetzt und man hat nur eine Anlaufstelle um es gleich an „n“ anderen Stellen zu bereinigen. Jedoch können auch Seiteneffekte auftauchen, wenn man nicht vorsichtig ist und Klassennamen doppelt in einer CSS Datei oder sogar in mehreren CSS Dateien vergibt. Hier hilft zum Beispiel das Mozilla FireFox Plugin FireBug weiter, in diesem Plugin werden nicht nur die verwendeten Styles zu dem HTML Element angezeigt, sondern auch aus welcher CSS Datei diese bezogen wurden.
JavaScript
Das Ausführen von JavaScript Befehlen kann unter Umständen sehr lange dauern, auch wenn JavaScript auf dem Client und nicht auf dem Server ausgeführt wird ist der Browser erst einmal damit beschäftigt die Methoden abzuarbeiten. Somit wird der Seitenaufbau angehalten bzw. verlangsamt, dieses kann umgehen werden, indem man JavaScript zum Schluss der HTML Datei ausführt.
Schlecht
<html>
<head>
<script type="text/javascript">
function meineFunktion(){}
</script>
</head>
<body>
<div>Mein Inhalt</div>
</body>
</html>
Besser
<html>
<body>
<div>Mein Inhalt</div>
<script type="text/javascript">
function meineFunktion(){}
</script>
</body>
</html>
Jedoch noch besser wäre es, das JavaScript in eine Externe Datei auszulagern, welches hier nur am Rande genannt wird.
<html> <body> <div>Mein Inhalt</div> <script type="text/javascript" src="meinscript.js"></script> </body> </html>
Unter Umständen kann man auch den zu verarbeitenden JavaScript Block als Thread ausführen, das würde bedeuten das, weiterer JavaScript Code ausgeführt wird, während der andere Quellcode ausgeführt wird.
Das funktioniert so lange wie der Code nicht voneinander abhängig ist.
Zur besseren Verdeutlichung hier nun ein kleines Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<input onclick="runThread()" type="button" value="Klick mich!"/>
<script type="text/javascript">
function runThread(){
var meinThread = setTimeout("ersteFunktion()", 1);
andereFunktion();
}
function ersteFunktion(){alert("Test");}
function andereFunktion(){alert("Hallo Welt!");}
</script>
</body>
</html>
Validität prüfen
Prüfen Sie Ihren Quellcode auf W3C Kompatibilität, das hat den Vorteil, dass Fehler bei der späteren Darstellung so gut wie ausgeschlossen oder jedenfalls minimiert werden können. Sie können auf der Seite des Word Wide Web Consortiums (W3C) kostenlos Ihre Seite prüfen lassen.
Auf das Ranking hat ein W3C Valider Code keinen Einfluss.