Previously, I wrote about my periodic obsession with improving the page speed loading times of my other website, the Underground Film Journal.
First, I’m very happy to report that the obsession has paid off! The site, knock on wood, is the zippiest it has ever been, which has had the effect of improving the Journal’s search engine traffic, but also more importantly, visitors click on more pages once they land on the site.
So, yay!
Second, though, I want to write about another process that I have focused on recently that has greatly improved the Journal’s page speed: Asynchronous Javascript Loading.
The loading of javascript files seems to have increased exponentially since the social networking side of the web dictated that webmasters must stick sharing buttons on nearly every page of their website. Hey, not complaining! Those Like, Tweet and Plus-age buttons have really helped increase the Journal’s notoriety as the most unique indie film website out there. And it certainly does get out there sometimes!
These days most of the social sharing buttons now have Asynchronous Javascript Loading already built into their code, so for the most part, a webmaster doesn’t have to think about this concept.
But, if you want to think about it, the basic concept of loading external scripts, whether they be hosted on Facebook, Twitter, Google or wherever, in an asynchronous fashion is so that all the internal code, you know, all the important “content” stuff you’ve worked so hard to craft, loads first before the external scripts. This way, site visitors can start reading that content while all the fancy buttons load in the background, which provides a better visitor experience. Or, “user experience” as the official jargon goes.
The problem occurs, though, when not all external javascript providers write their code to be loaded asynchronously. But, there are solutions and I’m going to tell you about one of them. I don’t know if this is the best solution, but it’s worked for me and, as far as implementing little code hacks goes, Chris Coyier of CSS-Tricks has never let me down.
On this CSS-Tricks page, Coyier offers a few solutions to asynchronously loading javascript. The only tricky part is to properly fuse the asynchronous javascript with the javascript that the third party provider has given.
On the Underground Film Journal, movie review pages come with a visitor-generated star rating system produced by the third party provider PollDaddy, a WordPress company. An example of one of these reviews with a rating would be for the hilarious comedy Pictures of Superheroes, directed by Don Swaynos, which is, by the way, available for streaming.
The PollDaddy code to generate the stars on that page has a line that looks like the following to access PollDaddy’s external javascript file:
<script type="text/javascript" src="http://i0.poll.fm/js/rating/rating.js"></script>
Now, if the PollDaddy server goes down or is flooded with requests at the time a visitor to the Journal tries to read my review, that review may not fully load if that particular script won’t. To prevent that from happening, I copy out the PollDaddy javascript link, which is this part:
http://i0.poll.fm/js/rating/rating.js
And encase that link in this javascript “wrapper” that I copied from CSS-Tricks:
<script>
var resource = document.createElement('script');
resource.src = "http://i0.poll.fm/js/rating/rating.js";
var script = document.getElementsByTagName('script')[0];
script.parentNode.insertBefore(resource, script);
</script>
That replacement will prevent that javascript file from loading until after all the movie review content loads.
What this also does is score the Journal some points with Google’s Page Speed Tool, so the site can rank higher in search results. So, I get more readers and those more readers will get the full page loading for them: A winning situation all around.
