FooBox is a relatively new lightbox plugin for WordPress sites that is responsive and, in my experience so far, works very well across multiple devices. I currently have it installed on a number of websites including this one, and you can see it in action on the single portfolio pages and on a blog post from way back in 2010.
A couple weeks ago I launched the redesign of this site, and as part of that reworking effort I did some experimenting to see if I could speed up my load times by disabling unnecessary scripts and styles. Two blog posts that inspired me in this direction were one by Thomas Griffin on taming Disqus comments and another by Justin Tadlock that covers the topic in general.
Armed with that information I set out to disable scripts and styles on all pages and posts except where I knew for sure they were needed. Along with FooBox, I also worked out solutions for FitVids, JetPack, and VideoPress, but for this post I’m only going to cover FooBox.
FooBox scripts and styles
FooBox is a fairly complex plugin, and it had me scratching my head for a while as I worked out the solution to do this cleanly. In the end I used three different functions that are called at three different hooks which you can see in the code below. Two of the scripts are deregistered at the wp_print_scripts hook, an inline dynamic script is removed at the wp_head hook (which really happens at the wp_print_footer_scripts hook, I suppose), and the style is deregistered at the wp_print_styles hook.
I use a core functionality plugin on all my sites that gets loaded in the mu-plugins directory, and I added the following code to that core plugin.
Here’s the solution I came up with:
Don’t skip this part
The version of FooBox that I’m currently using is 1.3.7, and to disable the inline script that loads in the footer (as set in FooBox options), I had to slightly modify foobox.php by assigning the foobox class to a variable. See the code below:
I made that change based on a recommendation by Otto in an answer he gave on wordpress.stackexchange.com for a related question. I’ve contacted the FooBox developers to see if they’ll make that change in a future version, but for now you’ll have to do it yourself if you want this to work.
I probably won’t be adding this to my client sites because I’m not sure how future-proof this is going to be. It’s possible that my code will need to be modified depending on what the FooBox developers do in the future with script and style names (and handles).
For example, the handle for the foobox style, currently foobox-1-3-1-min, is generated dynamically by the plugin and I’m anticipating that I’ll have to change that in my code at some future point. This would have been easier if they had just used foobox-css for that handle, but I’m going to assume that they had a good reason for doing it that way.
One thing I’ve learned is that everything I add to a website, especially client sites, increases my future maintenance requirements, and so I find myself carefully evaluating whether or not a new feature or plugin is going to be worth the trouble of maintaining it down the road. In this case, is a slightly faster load time worth the trouble of maintaining this code on all my websites? Probably not. Is it worth it for one or two sites, including this one? Yeah, I think it is.