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-Tag

In 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:

• Ist das JavaScript unbedingt notwendig für den Besucher?
• Kann ich den Inhalt auch ohne JavaScript konsumieren?
• Ist die Größe des Scriptes gerechtfertigt?

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"><!--mce:0--></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

		<?php if ( is_single() || is_page() ) { ?>
		<script src="<?php bloginfo('template_url'); ?>/js/example.js" type="text/javascript"><!--mce:1--></script>
		<?php } ?>

Alle notwendigen Scripte gehören ansonsten in den head. Allerdings auch diese sind ausgelagert und werden einmalig eingebunden.

Beispiel head

	<script src="<?php bloginfo('template_url'); ?>/js/example.js" type="text/javascript"><!--mce:2--></script>
	<?php if ( is_single() ) { ?>
		<script src="<?php bloginfo('template_url'); ?>/js/example.js" type="text/javascript"><!--mce:3--></script>
	<?php } ?>
	<script type="text/javascript"><!--mce:4--></script>

	<?php wp_head(); ?>

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.

1. Compressor JS und CSS
2. JavaScript Compressor

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.