Sie befinden sich hier:
» 
» 
18.06.2013

jQuery optimieren bzw. individuell anpassen

jQuery als Javascript-Framework ist weit verbreitet. Doch nicht immer sind alle Module für die eigenen Website notwendig. Darum ist es sinnvoll, entsprechend den Erfordernissen, jQuery individuell anzupassen, d.h. zu optimieren.

Fluch und Segen von jQuery

Mit jQuery können relativ komplexe Funktionalitäten sehr einfach browserunabhängig realisiert werden. Es gibt unzählige jQuery Plug-Ins im Internet zur freien Verwendung. Dort leider ist man geneigt, auch vermeintlich einfache Funktionalitäten mit jQuery zu realisieren. So sollte man sich immer die Frage stellen, ob es aus Sicht der Performance immer die optimalste Lösung ist, für jede Kleinigkeit ein komplexes Framework zu verwenden. Auch wenn jQuery sehr einfach in der Anwendung ist, so bedeutet dies immer, dass man einen gewissen Basis-Traffic auf seinen Webseiten erzeugt. Gerade mit Blick auf die Optimierung für mobile Geräte oder der Anwendung von responsive Webdesign, ist es suboptimal, größere Frameworks zu verwenden. Bei dieser Website wird z.B. ca. 1/3 des Übertragungsvolumens durch jQuery erzeugt. Auch wenn die Library gecached wird, finde ich es schon grenzwertig. Spätestens wenn man noch diverse Fallbacks einbaut, um z.B. ältere Browser html5-tauglich zu machen (html5shiv, modernizr) oder um media-queries zu ermöglichen (respond.js) kommt man in Bereiche, in denen die Performance signifikant darunter leidet. Performance ist aber eines der Signale, welches das Ranking der Webseiten beeinflusst.

Alternativen zu jQuery

Sicherlich wäre es eine Möglichkeit, auf jQuery zu verzichten und die Funktionalitäten mit Javascript selbst zu programmieren. Ein paar gute Beispiele finden Sie auf der Seite Native Javascript equivalents of jQuery functions". Um ältere Browser nachzurüsten, könnte man conditional comments verwenden. Es handelt sich sowieso meist nur um ältere Versionen des Internet Explorers, die es zu ertüchtigen gilt. Eine andere Variante wäre es, jQuery zu verschlanken.

Optimierung von jQuery

Auf http://projects.jga.me/jquery-builder/ besteht die Möglichkeit, sich sein eigenes jQuery zusammen zu stellen. Sie haben die Möglichkeit, diverse Module auszuschließen, d.h. wenn Sie auf Ihrer Website z.B. keine AJAX-Funktionalitäten verwenden, so benötigen Sie auch nicht die entsprechenden jQuery-Module. Auf diese Art können Sie einige Module ausschließen und somit die Größe von jQuery signifikant verringern.

Natürlich müssen Sie danach Ihre Webseiten intensiv testen. Besonders wenn Sie externe jQuery Plug-Ins verwenden, müssen Sie sich sicher sein, dass nicht doch der eine oder andere Befehl aus einem ausgeschlossenen Modul zur Anwendung kommt.

Fazit

Sicherlich gibt es viele Möglichkeiten, um Funktionalitäten auch ohne komplexe Frameworks zu realisieren. Nichtsdestotrotz ist die Erzeugung eines angepassten und somit reduzierten jQuery-Frameworks eine Alternative, die man in Erwägung ziehen kann. Hierdurch lässt sich das Übertragungsvolumen reduzieren und somit die Performance der Webseiten steigern.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

64

Kommentare:

23.September2013

Hallo Harry,
das mit der leidenden Performance bzgl. jQuery ist schon ein Problem, wie ich mit diversen Performance-Analysetools immer wieder feststelle. Deinen Tip, sich ein jQuery selbst zusammenzustellen, wäre eine Alternative. Ich werde es mal ausprobieren, danke.
Gruß, Andreas

23.September2013

Wichtig ist das Testen danach, insbesondere wenn man diverse Plug-ins aus dem Internet geladen hat, deren Komplexität nicht immer einfach zu durchschauen ist.