Javascript

JavaScript-Turbo: Head.js verkürzt die Ladezeiten eingebundener Scripte

18. Oktober 2012
von

Komplexe Websites kommen kaum noch ohne JavaScript aus. Oft werden mehrere Scripte in ein HTML-Dokument eingebunden. Head.js ist ein JavaScript-Tool, das von sich selbst behauptet, es sei das einzig notwendige Script im Head eines Dokumentes. Tatsächlich bietet es eine Reihe nützlicher Features und sorgt zudem dafür, dass Dokumente mit mehreren JavaScript-Dateien schneller geladen werden.


Head.js

Head.js einbinden und nutzen

Zunächst müssen Sie Head.js im HTML-Head einbinden. Über die Variable head_conf können Sie verschiedene Einstellungen (mehr dazu später) vornehmen, die unter anderem für spezielle Features notwendig sind:

1
2
3
4
5
<script>
  var head_conf = { ... }
</script>
 
<script src="/js/head.min.js"></script>

Mit Head.js mehrere JavaScript-Dateien auf einmal laden

Eine der Hauptfunktionen von Head.js ist die Möglichkeit, mehrere Script-Dateien in einem Schwung zu laden. Statt die Dateien jeweils separat über das SCRIPT-Element zu holen, übernimmt Head.js diese Aufgabe:

1
head.js("datei1.js", "datei2.js", datei3.js");

Während Dateien per SCRIPT-Element nacheinander geladen werden und dabei das Laden weiterer Inhalte blockieren, sorgt Head.js für das parallele Laden der Dateien. Das heißt, weitere Inhalte wie Stylesheets und Grafiken sind schneller verfügbar und die Seite somit schneller aufgebaut.

Browser- und Feature-Detektor für CSS

Gerade beim Einsatz von CSS3 ist Vorsicht geboten; denn nicht alle Browser unterstützen die CSS3-Eigenschaften. Head.js bietet spezielle Klassen, mit denen Styles für einzelne Browser definiert werden können:

1
2
3
.webkit p {
  color: red;
}

Das Beispiel zeigt den Text aller P-Elemente rot an, insofern man mit einem Webkit-Browser unterwegs ist. Es lassen sich auch explizit Styles definieren für Browser, die bestimmte CSS3-Eigenschaften unterstützen beziehungsweise nicht unterstützen:

1
2
3
4
5
6
7
.borderimage div {
  border-image: url("rahmen.png") 25% repeat;
}
 
-no-borderimage div {
  border: 1px solid green;
}

Bei allen Browsern, welche die Eigenschaft border-image unterstützen (.borderimage), werden DIV-Elemente mit dieser Eigenschaft ausgestattet. Bei allen anderen Browsern wird den DIV-Elementen (.no-borderimage) ein einfacher grüner Rahmen hinzugefügt.

Für alle CSS3-Eigenschaften stellt Head.js entsprechende Klassen zur Verfügung.

Browsergröße erkennen und für CSS nutzen

Ein weiteres Feature, ist die Möglichkeit, Stylesheets für spezielle Browsergrößen zu definieren. Zwar geht das auch per Media-Queries, soll aber dennoch erwähnt werden:

1
2
3
.lt-1024 p {
  font-size: 10px;
}

Bei einer Auflösung von weniger als 1024 Pixel wird im Beispiel die Schriftgröße auf 10 Punkt gesetzt. Welche Auflösungen berücksichtigt werden sollen, wird über die Konfigurationsvariable head_conf definiert:

1
var head_conf = { screens: [800, 1024] };

Diese muss, wie weiter oben bereits erwähnt, vor dem Aufruf von Head.js im HTML-Head angegeben werden.

HTML5 für ältere Internet Explorer

Ältere Browser – vor allem ältere Versionen des Internet Explorers – ignorieren HTML5-Elemente wie SECTION, ARTICLE etc. Head.js sorgt jedoch dafür, dass die Elemente auch von diesen Browsern dargestellt werden.

Da die Elemente – abgesehen von der Semantik – einfache Container-Elemente wie das DIV-Element sind, muss den Browsern nur „beigebracht“ werden, diese entsprechend zu interpretieren. Head.js übernimmt diese Aufgabe.

Fazit: Ein Blick auf Head.js lohnt sich. Es gibt zudem weitere Features zu entdecken.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

6 Kommentare zu „JavaScript-Turbo: Head.js verkürzt die Ladezeiten eingebundener Scripte
  1. Thomas am 18. Oktober 2012 um 17:31

    Hallo,
    das klingt nach einem interessanten Ansatz. Hat es schon jemand ausprobiert und die Seitenladezeit mit einem Speedtest verglichen?

    • Jonathan am 18. Oktober 2012 um 22:22

      Hi Thomas, ich habe vor längerer Zeit intesive Tests gemacht. Die Ladezeiten verkürzich sind deutlich. Jedoch sollte berücksichtigt werden, dass Funktionen anderer Plugins teilweise bis garnicht mehr ausgeführt werden. Also vorher testen und gegebenfalls Anpassungen tätigen.

  2. Robbyn am 19. Oktober 2012 um 12:12

    Habe es mal bei einem größeren Projekt getestet, woe ungefair 25-30 Javascripts Dateien aufeinmal geladen werden.

    Bei normalen Laden, ohne irgendwelche Plugins, dauert es zwischen 3-4 Sekunden bis es komplett geladen wurde.

    Beim head.js dauert es nur noch 1-2 Sekunde, also schon deutlich besser.

    Meine dritte Methode ist es per Javascript zu laden, da dauert es nur 0.5-1 Sekunde, also da kommt auch head.js nicht ran.

    Aber trotzdem geiler Code ^^

    • Robbyn am 19. Oktober 2012 um 14:12

      Sorry nicht Javascript sonder PHP war ein Tippfehler/Denkfehler von mir ^^

  3. OnPage SEO Blog Review » miZine am 21. Oktober 2012 um 21:38

    [...] gibt viel verstreutes JavaScript. Fasse nach Möglichkeit so viel wie möglich zusammen! Head.js könnte hierzu nützlich sein. /* */ Gefällt Dir der Artikel? Dann würde ich mich sehr [...]

  4. [...] nach Möglichkeit alle JavaScripte mit head.js laden lassen [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!