Tuesday, December 11, 2012

Making Yootheme Widgetkit load faster

While optimizing a customer's web site today I noticed that resources related to the (otherwise excellent) Yootheme Widgetkit were not cached by Varnish or by clients' browsers. This had a measurable impact on page loading time - it was about 5 scripts fetched on every page load, over and over again.

This happened because on every page load, a different request has been made. For example the media player URL was /media/widgetkit/widgets/mediaplayer/mediaelement/mediaelement-and-player.js?_=1355230620557, then /media/widgetkit/widgets/mediaplayer/mediaelement/mediaelement-and-player.js?_=1355230620586 and so on. Clearly something has been appending a time stamp as a query parameter.

After some investigation, I've found that jQuery was guilty. Its default behavior is to append the time stamp to prevent caching. Fortunately, this behavior is configurable. After adding the following line of code to the beginning of media/widgetkit/js/jquery.plugins.js, the query parameter was gone and the 5 scripts were cached once and for all:

jQuery.ajaxSetup({cache: true});

Yootheme support has been notified, hopefully they will include it or make it configurable in the next release.