🍪 Privacy & Transparency

We and our partners use cookies to Store and/or access information on a device. We and our partners use data for Personalised ads and content, ad and content measurement, audience insights and product development. An example of data being processed may be a unique identifier stored in a cookie. Some of our partners may process your data as a part of their legitimate business interest without asking for consent. To view the purposes they believe they have legitimate interest for, or to object to this data processing use the vendor list link below. The consent submitted will only be used for data processing originating from this website. If you would like to change your settings or withdraw consent at any time, the link to do so is in our privacy policy accessible from our home page..

Vendor List | Privacy Policy
Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry PI

Menu
  • Projekte
    • LED’s
    • Servo & Schrittmotoren
    • Sound
    • LCD’s
    • Kommunikation
    • Sicherheit
    • Weekend Project
  • Arduino
    • Tutorials
    • ProMini
      • Anschließen & Programmieren
    • Nano
      • Arduino Nano – Übersicht
    • UNO
      • Übersicht
    • MEGA 2560
      • Übersicht
    • Leonardo
      • Übersicht
    • NodeMCU
      • NodeMCU – “Einer für (fast) Alles!”
    • Lilypad
      • Arduino: Lilypad “Jetzt Geht’s Rund!”
    • WEMOS
      • WEMOS D1 – Arduino UNO kompatibles Board mit ESP8266 Chip
      • WEMOS D1 Mini – Übersicht
      • Wemos D1 mini Shields
    • STM32x
      • STM32F103C8T6 – Übersicht
    • Maker UNO
      • Maker UNO – Überblick und Test
    • ATTiny85
      • Mini Arduino mit ATTiny85 Chip
      • ATtiny85 mit dem Arduino UNO beschreiben
  • Android
  • Über mich
  • DeutschDeutsch
  • EnglishEnglish
Menu

SEO: Quellcode Optimierung

Posted on 17. Mai 20152. Mai 2023 by Stefan Draeger

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
  • Überschriften
  • Leerzeilen und Leerzeichen
  • Bilder
  • CSS Style
  • JavaScript
  • Validität prüfen

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.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Kategorien

Tools

  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator
  • Widerstandsrechner
  • Rechner für Strom & Widerstände
  • ASCII Tabelle

Meta

  • Videothek
  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Kontakt
  • Cookie-Richtlinie (EU)

Links

Blogverzeichnis Bloggerei.de Blogverzeichnis TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com
©2023 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb