Artikelformat

Quelltext optimieren: So eine gute Quellcode Optimierung durchführen!

XOVI Banner

Viele angehenden Webmaster vergessen bei der Projektplanung die Berücksichtigung eines flexiblen, strukturierten und einen auf Änderungen abgestimmten Quellcode beziehungsweise Quelltext. Meist beginnt man mit dem Entwurf der Startseite, worauf dann alle weiteren Unterseiten aufbauen. Fleißige Website-Betreiber produzieren schnell zahlreiche Projektseiten, welche in der Menge jenseits der 100 liegen. Doch jedes Projekt bedarf einer Generalüberholung. Nach zwei bis drei Jahren ist man unzufrieden mit dem Webdesign oder die Gestaltung entspricht nicht mehr dem Zeitgeist. Ein neues Layout muss her.

Gerade dieses Redesign bereitet einigen Webmastern mächtig Probleme. Sind die Seiten individuell angefertigt, ist die Umstellung eine echte Herausforderung. Benutzt man Standard-Designs und ließt die Texte aus Datenbanken, ist der Aufwand in der Regel geringer, aber dennoch mit einer zeitintensiven Umstellung verbunden. Und die damit einhergehenden Arbeiten sind zudem sehr mühselig und bremsen den eigentlichen Entwicklungsprozess einer Website unnötig.

Um dies zu vermeiden und um einen Relaunch ressourcenminimierend zu starten, musst du deine Websitestrukturen, insbesondere den Quelltext, flexibel gestalten. Wenn du mit HTML und PHP arbeitest, findest du nachstehend einen Vorschlag für das Design des Quellcodes. Andere Programmier- bzw. Seitenbeschreibungssprachen sind dann mit den entsprechenden äquivalenten, sprachspezifischen Befehlen umzusetzen. Die hier unterbreiteten Leitlinien sind unter Einbezug der Suchmaschinenoptimierung (SEO) aufgestellt.

Generelle Regeln für einen flexiblen Quellcode

  • Lager alles aus was nicht zum eigentlichen Quellcode/ Quelltext gehört (CSS, Javascript, etc.)
  • Konzipiere deine Website bei der Projektplanung mit wiederholenden Elementen (gleiche Platzierung von Header (sichtbarer!), Navigation, Überschriften, Footer) und erstelle hierfür eine extra Datei
  • Denk dir eine generelle Grundstruktur im Seitenaufbau für alle Unterseiten aus bzw. für Teilbereiche
  • Vereinheitliche nach den Gesetzen des Webdesigns so viele stilistische Elemente wie möglich ohne monoton zu wirken
  • Kürze selbst zu definierende Bezeichnungen (z. B. Klassennamen) auf ein Minimum
  • Beziehe einen möglichen Ausbau bereits in die Projektplanung deiner Website mit ein und verwende Pufferdateien als Platzhalter für zukünftige Erweiterungen

Auslagerung von sekundären Quellcode

Ein schlanker Quellcode hat zwei entscheidende Vorteile. Zum einen hilft er im Bereich der Suchmaschinenoptimierung die OnPage-Faktoren besser zu erfassen und auszurichten und zweitens spart er Zeit bei Wartungsarbeiten aufgrund des übersichtlichen Charakters. CSS und Javascript können in eine extra Datei (.css oder .js) gepackt und im Head-Bereich (Quellcode) darauf verwiesen werden. Wie das für CSS genau funktioniert, erfährst du in meinem Artikel CSS – Wie richtig einbinden?. Für Javascript gibt es hier den passenden Beitrag zum Einbinden in den Quelltext.

AAWP

Bestes Amazon Affiliate Plugin: AAWP

AAWP Funktionen
  • Sehr schöne Vergleichstabellen
  • Mehr Provisionen
  • Geringer Aufwand
AAWP Button

Gruppierung wiederkehrender Elemente

Versuche ein Grundschema des Seitenaufbaus für deine Start- und Unterseiten zu entwerfen. Je mehr wiederkehrende Elemente du integrierst, desto einheitlicher der Webauftritt und umso weniger Aufwand für Abänderungen der jeweiligen Website. Klassische Elemente der Wiederholung sind der sichtbare Kopfbereich einer Seite, die Navigation und der Footer. Gleiche Inhalte speicherst du in einer externen Datei ab.

Beispiel für PHP-Quellcode

Ursprünglich:

Optimierter Quellcode für PHP:

Der Quelltext der Navigation wird dann in einer Datei navigation.php eingefügt:

Beispiel für HTML-Quellcode

Ursprünglich:

Optimierter Quellcode für HTML:

Der Quelltext der Navigation wird dann in einer Datei navigation.htm eingefügt:

Diese Methodik kannst du für alle wiederkehrenden Elemente anwenden. Wenn du jetzt eine Änderung in der Navigation durchführen willst, um beispielsweise einen weiteren Menüpunkt hinzuzufügen, nimmst du die Modifikation nur einmal in der dafür vorgesehenen Navigations-Datei vor und die Auswirkungen gelten für alle HTML-/PHP-Dokumente, welche den object / include-Befehl im Quellcode eingebunden haben. Der Object-Tag eignet sich übrigens auch sehr gut für andere Objekte, wie Flash-Inhalte, Videos, Bilder usw. Mehr über den Befehl Object findest du unter dem SELFHTML-Tutorial Objekte einbinden.

Nutze den include- /object-Befehl im Quelltext auch als Platzhalter für mögliche, zukünftige Inhalte. Plane diese vorsorglich, aber mit Bedacht ein. Leerdateien sollten sich auf die Suchmaschinenoptimierung (SEO) nicht nachteilig auswirken und sind im schlimmsten Fall redundanter Quellcode. Nutze beispielsweise den Platz unter der Navigation als Vorhaltefläche für Werbeanzeigen. Diese kannst du dann nachträglich in der dafür vorgesehenen, leeren Datei bequem einfügen und bearbeiten. Der Nachbesserungsaufwand ist somit minimal.

Ergänzend sei anzumerken, dass du eine globale und für alle HTML- / PHP-Dokumente gültige CSS-Datei anlegen solltest. Modifikationen können dann ebenfalls in nur einem Arbeitsschritt vorgenommen werden.

SeedingUp

Digital Content Marketing Plattform: SeedingUp

SeedingUp Funktionen
  • Website & Produkte bekannt machen
  • Hochwertige Backlinks kaufen und verkaufen
  • Schnell und effizient
SeedingUp Button
Bewerte diesen Artikel
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

30 Bewertung(en), durchschnittlich: 5,00 von 5

Loading...

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.