Artikelformat

Wie bindet man jQuery sinnvoll ein? CDN Host & Fallback

Lange ist der letzte Artikel her. Das sollte eigentlich nicht sein ging aber leider nicht anders. Es geht aber weiter :)

Heute möchte ich mal einen Ansatz zeigen wie man jQuery sinnvoll einbindet.
Und zwar die Einbindung über eine CDN gehostete Kopie von jQuery – z.B. bei Google mit einer Fallback Variante.
Was ist aber der Vorteil an der Methode?
Der Browser cached bekanntlicher weise die ganzen Dateien. Kommt also ein Besucher zum ersten mal auf die Seite, muss der Browser erst einmal alle Files Cachen. Bindest du nun jQuery über ein CDN ein, hat dein Browser die Datei schon gecached, da viele andere Webseiten dies auch nutzen.
Ist das CDN nicht erreichbar greift natürlich der Fallback auf die jQuery Datei auf eurem Server:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

Wie bindet Ihr eure Libarys ein? Findet Ihr dieses Vorgehen sinnvoll?

Autor: Rene Kreupl

Bloggt über WebEntwicklung und Fotografie

4 Kommentare

  1. Ich habe leider bei Verwendung des CDN schon öfter Probleme in Form von langen Ladezeiten und deswegen verzögertem Seitenaufbau gehabt. Deswegen verwende ich meistens eine lokale Version.

    Gruß
    Wolfgang

  2. Es wäre auch nett gewesen, wenn du erwähnt hättest, woher du das kopiert hast ;) In der HTML5 Boilerplate wird das so verwendet. Meist setzte ich das auch so á la Copy-Paste ein. Ein Vorteil ist, dass du dann auch ohne Internetverbindung jQuery laden/ausführen kannst. In modernen Browsern bringt das Laden vom Google-CDN allerdings nicht oft einen Vorteil, da der zusätzliche DNS-Request (wie Wolfgang schon bemerkte) manchmal länger dauert. Zudem sind die Caching-Zeiten beim Google-DNS nicht so optimal eingestellt, dass man den Effekt des “hab ich bereits auch ner anderen Website geladen” bekommt. Letztlich ist es immer zu prüfen, also ein Performance-Benchmark zu machen, ob es wirklich eine Verbesserung darstellt.

  3. Da hast du natürlich recht. Der Schnipsel wird so auch in der Boilerplate eingesetzt. Auch mit der Performance Prüfung geb ich dir recht.

  4. CDN ist natürlich eine nette Sache und kann auch Performance-Vorteile bringen. Aber ich bin der Überzeugung, dass man die Einbindung dem Umfeld anpassen muss.

    Im Fronted kann man es via Google, Microsoft & Co einbinden. Wenn man aber einen Adminbereich gestaltet, kann man gerne die Daten lokal hosten. Durch entsprechende Cache-Settings (htaccess) und ein gutes komprimieren (Gzip, Minify) der Daten, erreicht man auch dort sehr gute Ladezeiten.

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.