Grundlagen: Webprogrammierung
Effiziente Webseiten mit HTML und CSS erstellen
Fortsetzung des Artikels von Teil 3
CSS und JavaScript
Weitere Einträge im <head>-Bereich einer HTML-Datei dienen dazu, CSS sowie JavaScripts einzubinden. Früher waren dazu umständliche Code-Konstrukte nötig, um Browser nicht aus dem Tritt zu bringen, die JavaScript und CSS nicht interpretieren konnten. Das kann man sich inzwischen sparen, denn Browser, die kein JavaScript oder CSS interpretieren können, gibt es quasi nicht mehr. Ein JavaScript binden Sie daher ganz einfach wie folgt ein:
<script type="text/javascript" src=
"http://www.domain.com/script.js">
</script>
Eine externe CSS-Datei mit:
<link rel="stylesheet" type="text/
css" href="http://www.domain.com/
cssdaten.css" media="screen"/>
Generell sollten Sie sowohl JavaScript als auch CSS in externen Dateien speichern und über die gezeigten Aufrufe im Browser hinzuladen, statt die CSS-Anweisungen und JavaScripts selbst mit in die HTML-Datei zu packen. Dieses Vorgehen beschleunigt das Laden der Seite, weil das CSS parallel zu HTML heruntergeladen wird.
Achten Sie aber andererseits auch darauf, dass möglichst wenige externe CSS-Dateien geladen werden müssen, sonst kehrt sich der Effekt um.
JavaScript sollten Sie, soweit das bei der jeweiligen Programmfunktionalität möglich ist, nicht im <head>-Bereich laden, sondern möglichst am Ende der HTML-Datei. Denn solange eine JavaScript- Datei lädt, muss der Browser warten und kann die Seite nicht weiter rendern. Eine Ausnahme ist beispielsweise der aktuelle Google-Analytics-Code, der selbst dafür sorgt, dass die Seite nicht verzögert dargestellt wird.
- Effiziente Webseiten mit HTML und CSS erstellen
- Content Type und Kurzbeschreibung
- Robots und Canonical URL/Tag
- CSS und JavaScript
- Doctype
- HTML und CSS fehlerfrei
