Abonniere die neusten Artikel via 
JavaScript in HTML einbinden
Das Einbinden von JavaScript in Webseiten ist kein neues Thema mehr, seit der Generation Web 2.0 aber kaum wegzudenken. Immer mehr Seiten bieten kleine Features an, die mit JS realisiert werden. Oft werden dabei die Funktionen in den Vordergrund gestellt und auch im Zeitaltern von DSL und anderen schnellen Datenverbindungen sollte die Webseitengeschwindigkeit nicht vergessen werden. Und in diesem Zusammenhang gibt es einige Überlegungen und Hinweise, welche ich in diesem Artikel auf Wunsch von Stephan erklären möchte.
Dabei kommt natürlich in erster Linie meine Meinung zum Tragen, welche vielleicht eine kleine Diskussion anstößt und wo man Feedback von Webworkern bekommt, die mehr im Thema stecken als ein Hobby-Webworker, wie ich es bin.
Mögliche Formen
Grundlegend kann man JavaScript in drei verschiedenen Formen unterbringen.
head body body-TagIn vielen aktuellen Projekten, werden JavaScript Frameworks eingesetzt, da sind besonders bekannt: Prototype und jQuery. Zu beiden habe ich im Blog schon einige Infos hinterlegt.
Hintergrundüberlegungen und Realisierung
Im Vorfeld sollte man überlegen:
Im weiteren gilt es: JavaScript ist im optimalen Fall ausgelagert, in eine separate Datei, die dann im jeweiligen Abschnitt des HTML eingebunden wird. Der Zugriff auf die Datei sollte nur einmalig erfolgen.
Das Script gehört nur geladen, wenn man es auch benötigt! Gerade beim Einsatz von Plugins für WordPress sieht oft die vielfache Verwendung von JS-Frameworks, da sie per Hook eingebunden werden. Solche Sachen sind besser im Template des Themes aufgehoben und auch dann kann man mit Conditional Tags (auf diese habe ich schon mehrfach hingewiesen!) sehr leicht abfragen, ob man das Script laden muss.
Beispiel
Vielfach wird JS genutzt, um eine Live-Vorschau des Kommentars zu ermöglichen. Dieses Script wird dann aber auch nur benötigt, wenn es die Möglichkeit von Kommentaren gibt, also in der Regel nur auf einem Beitrag oder einer Seite. Diese beiden sind unter WordPress leicht abzufragen.
<?php if ( is_single() || is_page() ) { ?> <script src="<?php bloginfo('template_directory'); ?>/js/example_script.js" type="text/javascript" charset="<?php bloginfo('charset'); ?>" ></script> <?php } ?>
Wohin mit dem Script
Aus meiner persönlichen Sicht plädiere ich dafür, dass Scripte, die nicht unbedingt für den Leser notwendig sind, am Ende einer Seite geladen werden. Damit stelle ich sicher, dass der Besucher den Inhalt, für den er sich in der Regel am meisten interessiert, schnell bekommt. Die meisten Besucher kommen von Suchmaschinen, zumindest sehen das alle Statistiken so, die ich verfolge.
Ist das Script im head eingebunden, dann hat es den Vorteil, dass es beim Laden eingelesen wird und dann im Speicher bereit steht. Nachteilig ist, dass damit der Inhalt warten muss, bis das/ die Scripte geladen sind. Deshalb überlegen, ist es wirklich notwendig.
Im weiteren eine Forderung von mir: Ich möchte, dass Seiten auch ohne aktives JavaScript die Inhalte präsentieren und mir nicht ihren Inhalt verweigern. Mir ist klar, dass ist nicht bei allen Anwendungen möglich, aber für eine Vielzahl von Webseiten wäre es kein Problem, denn JS sind dort nur da, um Spielereien und Mehrwert der Seite zu realisieren.
Beispiel Footer
<p style="display: none !important;">
<?php if ( is_single() || is_page() ) { ?>
<script src="<?php bloginfo('template_url'); ?>/js/example.js" type="text/javascript" charset="<?php bloginfo('charset'); ?>" ></script>
<?php } ?>
</p>
</body>
</html>
Alle notwendigen Scripte gehören ansonsten in den head. Allerdings auch diese sind ausgelagert und werden einmalig eingebunden.
Beispiel head
<head profile="http://gmpg.org/xfn/11"> <script src="<?php bloginfo('template_url'); ?>/js/example.js" type="text/javascript" charset="<?php bloginfo('charset'); ?>" ></script> <?php if ( is_single() ) { ?> <script src="<?php bloginfo('template_url'); ?>/js/example.js" type="text/javascript" charset="<?php bloginfo('charset'); ?>" ></script> <?php } ?> <script type="text/javascript"> <!-- example-code --> </script> <?php wp_head(); ?> </head> <body>
Komprimieren
Auch wenn man die JS-Dateien auslagert und zu einer Datei zusammen fasst, können sie noch eine beachtliche Größe erzielen. Daher kann man als Alternative noch die Komprimierung der Scripte versuchen. Dies ist im übrigen auch mit CSS- und HTML-Dateien möglich, aber das nur am Rande.
Schon das Entfernen von Kommentaren und Leerzeichen bringt Geschwindigkeit. Ebenfalls gilt das für die Verwendung von Variablennamen in PHP, je kürzer, desto schneller. Aber Achtung, ein gesundes Verhältnis sollte gewahrt bleiben, vor allem an Projekten, an den ständig gearbeitet wird. Denn gerade Eindeutigkeit, Übersichtlichkeit und Dokumentation können das Arbeiten enorm erleichtern.
Aber zurück zu JavaScript. Hier bietet sich die Komprimierung an, gerade bei Verwendung von Frameworks, auf die man keinen Einfluss nimmt. Die komprimierte Version wird in der Regel vom Anbieter schon mit angeboten und man muss lediglich diese Version einbinden.
Für das Komprimieren von JavaScript gibt es Online-Tools, die die Arbeit abnehmen und erleichtern. Zwei Beispiele sollen für die Vielzahl an Möglichkeiten genannt werden.
Ein Hinweis, nach der Komprimierung testen - nicht immer ist das Ergebnis befriedigend.
Alternativ kann man die Dateien noch als gzip-komprimiertes File einbinden. Dazu muss mod_rewrite im Webserver aktiv sein und die .htaccess muss folgenden Inhalt haben. Der Syntax geht davon aus, dass die CSS-Datei direkt im Theme-Ordner liegt und die JavaScript-Dateien im Ordner /js/.
RewriteEngine On RewriteBase / RewriteCond %{HTTP:Accept-Encoding} .*gzip.* RewriteRule ^js/(.*)\.js$ /js/$1.js.gz [L] RewriteRule ^/(.*)\.css$ /$1.css.gz [L] AddEncoding x-gzip text.gz
Dazu einen Linktipp auf einen schlüssigen und klaren Artikel zum Thema: gzip-komprimiertes Javascript und CSS effektiv ausliefern.
Fazit
Ich hoffe, dass es verständlich und einleuchtend ist. Nichtsdestotrotz stellt der Artikel lediglich meinen Standpunkt dar. Für Feedback und Hinweise bin ich wie immer dankbar.
Das Weblog wird angetrieben von 
17. Januar 2008 um 10:53
vielen dank für diesen artikel, sehr klar beschrieben. ich sammle derzeit so meine erfahrungen mit dem einbinden mehrerer scripts (menü, gallery-transition, scroller), die aus kundensicht unbedingt notwendig sind. bei meiner recherche und wg validierung kam mir auch das thema 'bodyOnload' vermeiden unter, allerdings funktionierte die alternative einbindung bei mir nicht -- hast du da auch einen tip? es ging dabei um ein scroller script für eine vertikale menüliste, die ohne onload nicht geladen wurde.. falls nicht, trotzdem nochmal danke für deinen beitrag.
17. Januar 2008 um 11:34
17. Januar 2008 um 11:44
Da ich meist mit jQuery arbeite und beim Laden der Seite die Scripte benötige, mache ich die ganz normale Anweisung für jQuery. MIt jQuery kann man einen Scroller erstellen.
$(document).ready(function() {17. Januar 2008 um 14:41
Hallo Frank,
viiielen Dank für das schnelle Aufgreifen meines "Wunsches" und die umfangreiche Darstellung. Dies hat mir schon sehr weiter geholfen.
Gruß Stephan
20. Januar 2008 um 20:42
hallo frank, vielen dank für den hinweis, gruss anne
23. Januar 2008 um 10:26
Ich sage auch danke, nun gibt es auf den meisten Seiten wieder etwas weniger zu laden.
PS: welches Plugin verwendest du für die "Live Kommentar Vorschau"?
23. Januar 2008 um 10:30
OK, schon gefunden!
23. Januar 2008 um 10:37
Keines, aber die Anleitung mit jQuery hast du gefunden?
27. Januar 2008 um 10:54
Das Entfernen von Kommentaren und Leerzeichen z. B. in PHP bringt gar nichts, weil das der Interpreter von PHP schon selbst macht.
Noch sinnvoller finde ich es, das Live-Kommentar-Vorschau-JS nur einzubinden, wenn auch wirklich Kommentare erlaubt sind.
7. Februar 2008 um 10:43