I’m having some issues with photos not loading/rendering correctly on my site. The theme admins believe it might have something to do with Jquery being deferred. The only info I could find on this issue was here and it wasn’t very helpful. The part I find confusing is how it got deferred in the first place, I don’t remember doing this. Is it a default setting within DO droplets?
The contents of the post @ KadenceThemes, other than the OP, is restricted to members only, so we can’t see what others have said :-).
That said, since this seems to be a WordPress installation (please correct me if I’m wrong), do you by chance have a caching plugin installed (such as W3 Total Cache, WP Super Cache etc)?
If yes, jQuery is often minified / compressed and if not by default (as per your theme configuration), the plugin will often place .js files in the footer. An async or defer tag could be added to the call as well in an attempt to speed up page loads.
If you see:
<script defer src="...."></script>
or
<script async src="...."></script>
… in your HTML source code / output (when viewing the page source), chances are this is where the issue is.
Adding to the stack, WordPress also prioritizes their own packaged version of jQuery over yours (if you’ve defined a custom version without using a plugin that auto-replaces the instance for you). This means that you’ll often have to use another identifier when calling jQuery functions.
What I mean by this is that you may run in to issues using $ when calling jQuery functions. Instead, you’d need to use something such as:
jQuery( document ).ready( function() {
....
});
instead of:
$( document ).ready( function() {
....
});
–
While I do like WordPress, they do things a little differently than you’d expect in some cases; this is one of them.
–
That said, even with the DigitalOcean WordPress image (if that’s what you’re using), you’re running a stock installation on a Droplet (VPS) that is configured specifically to run WordPress, with nothing more (and nothing less, of course :-)). The Droplet, OS and stock installation would not contribute to this sort of an issue.
Thank you very much @jtittle for the in depth and detailed response.
You are correct in assuming it is a WordPress installation (to be exact it is the Ubuntu 14.0.4, Apache, MySQL, WP prefab’d by DO) and I am running the W3 Total Cache plugin. I was also using Speed Booster Pack (SBP) too. However, that plugin hadn’t been updated in 10 months and the settings page looked pretty wonky so I deactivated it (SBP not W3TC). The SBP plugin was deferring scripts but the interface was all messed up (most likely due to it not having been updated in 10 months) and so I couldn’t tell which scripts it was deferring.
As you suggested I looked at the source code (after deactivating SBP) and didn’t see
<script defer src="...."></script>
or
<script async src="...."></script>
Perhaps deactivating SBP fixed the issue of deferring Jquery?
On a side note I’ve noticed that W3TC is minifying CSS, HTML, & Javascript. I’ve asked the admins @KadenceThemes if I should change that to not include minifying Javascript (it is too bad that only members can see the forum). When I hear back from them I will post here so that others may have a possible solution if they run into this problem.
I’d start by simply disabling auto-minification, if enabled in W3TC, and then selectively choosing what it minified through the options panel. This would allow you to pick and choose which files are and are not minified, deferred, etc. By default, IIRC, W3TC will attempt to “source” each file location for you, so as long as the path it loads when you’re selectively choosing the files is correct, you shouldn’t run in to any issues.
The biggest thing to keep in mind is, even though W3TC flushes the cache when modifications are made, you should still flush it on your own (ideally, flush it all). Caching can be a life-saver and a nightmare at the same time, especially when all of a sudden none of your JS or CSS files are loading because the plugin didn’t fully wipe the cache.
That said, depending on your needs, W3TC may be overkill (it’s a pretty hefty plugin). I’d take a look at the comparisons made at the URI below. WP Super Cache is a major contender and it’s constantly right there beside W3TC.
Link: http://wpdevshed.com/best-wordpress-cache-plugin/
–
Beyond a plugin, I’d take a look at CloudFlare. They’ve updated their free plan to include numerous features that were previously only in the paid plans (SSL being one of them). You’d need to switch your DNS over to theirs, though through their service, they would handle minifying, optimizing and compressing your content for you, thus you could use a caching plugin as a base and their service for everything else.
There’s even a CloudFlare Plugin that’ll ease basic management once you’ve made the changes they ask you to make (it only it takes 5-10 minutes to setup from start to finish).