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.
Inhaltsverzeichnis
Inhaltsverzeichnis
Seitentitel
Der Titel der Seite sollte den Inhalt wiederspiegeln somit ist ein individueller Titel für jede Seite angebracht.
1 2 3 4 5 6 7 | <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
1 2 3 4 5 | <html> <body> <div style=„font-size:16px;font-weight:bold;color:green“>Überschrift</div> </body> </html> |
auch Schlecht
1 2 3 4 5 | <html> <body> <div class=„Ueberschrift1“>Überschrift</div> </body> </html> |
Besser
1 2 3 4 5 | <html> <body> <h1>Überschrift</h1> </body> </html> |
Der passende Eintrag in der CSS Datei könnte dann so aussehen.
1 2 3 4 5 | h1 { font-size: 16px; font-weight: bold; color: green; } |
Leerzeilen und Leerzeichen
Einige Editoren vorallem WYGIWYS Editoren fügen unnötige Leezeilen 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. Vorallem die Benutzer von Smartphones werden es Ihnen danken.
Bilder
Wie schon im Einleitungstext vermerkt ist, ist der Übergang der OnPage Optimierung zur Quellcode Optimierung 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.
1 2 3 4 5 | <html> <body> <img src=„images/sonnenblume.png“ width=„150“ height=„300“/> </body> </html> |
CSS Styles
CSS Styles welche an HTML Elementen mittels dem Tag “style” gesetzt werden sollten in eine externe CSS Datei ausgelagert werden.
Schlecht
1 2 3 4 5 | <html> <body> <div style=„font-size:bold;color:red;“>Mein besonders formatierter Text.</div> </body> </html> |
Besser
1 2 3 4 5 6 7 8 | <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 ersteinmal 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
1 2 3 4 5 6 7 8 9 10 | <html> <head> <script type=„text/javascript“> function meineFunktion(){} </script> </head> <body> <div>Mein Inhalt</div> </body> </html> |
Besser
<div class="crayon-info" style="min-height: 16 have a peek at this web-site.8px !important; line-height: 16.8px !important;“>
1 2 3 4 5 6 7 8 | <html> <body> <div>Mein Inhalt</div> <script type=„text/javascript“> function meineFunktion(){} </script> </body> </html> |
Antworten