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.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.