Mit ‘Web 2.0′ haben eine Reihe von JavaScript Frameworks Einzug in die Webentwicklung gehalten. Hier und da wird noch das eine oder andere Plugin dazugeladen und jedes bringt meist eine eigene CSS-Datei mit. Das führt schnell daszu, dass eine große Zahl externer Dateien geladen werden, was den Seitenaufbau spürbar verlangsamen kann, selbst mit einer DSL-Leitung.

Markup

Über semantisches Markup ist wirklich schon genug geschrieben worden (z.B. bei A-List-Apart) , als dass ich darauf im Ganzen noch eingehen müsste. Nur soviel: Wer Strutktur(HTML), Aussehen (CSS) und Verhalten(Javascript) auf seiner Webseite bisher nicht getrennt hat, sollte dies tun, denn es reduziert u.a. die Größe des Quellcodes ganz erheblich. Hier liegt nach wie vor großes Optimierungspotential für viele Webseiten.

• HTML
  Wer valides Marhup schreibt und auf Semantik achtet (nicht einfach Tabellenwüsten durch DIV-Wüsten ersetzen), macht eigentlich alles richtig. Ich habe nur einen Punkt, der mich zunehmend ärgert: Es ist meiner Meinung nach eine Unsitte geworden, mehrere Inhalte in eine Seite zu laden und die nicht benötigten dann auszublenden. Solche Dinge sollten meines Erachtens asynchron nachgeladen werden, denn auch wenn die Elemente nicht angezeigt werden, so werden sie doch bei vielen Browsern sofort geladen und verlangsamen den Seitenaufbau.
  Wem es auf jedes KB ankommt, der kann vor dem Veröffentlichen seiner Seiten auch noch die HTML-Kommentare entfernen.
• CSS
  CSS Dateien lassen sich relativ gut verkleinern: Wo es geht, sollte man Kurz-Schreibweise verwenden, also z.B. #FFF anstatt #FFFFFF; margin: 0; anstatt margin-top: 0px; margin-bottom: 0px… Außerdem bin ich dazu übergegangen, CSS-Deklarationen pro Definition immer in eine Zeile zu schreiben. Ein nützliches Tool zum Verleinern von CSS-Files ist der CSS Formatter and Optimizer (je nach CSS-Stil kann das Tool schon mal 50% Ersparnis rausholen) .

• PHP Code um die Ladezeit einer Seite ermitteln

  Ladezeit einer Seite ermitteln und anzeigen.

  // Am Anfang der Seite
  <?php
  $startzeit = explode(" ", microtime());
  $startzeit = $startzeit[0]+$startzeit[1];
  ?>… INHALT …
  // Am Ende der Seite
  <?php
  $endzeit=explode(” “, microtime());
  $endzeit=$endzeit[0]+$endzeit[1];
  echo “Diese Seite wurde in “.round($endzeit - $startzeit,6).” Sekunden geladen”;
  ?>