I Am One Man

My freelance website, http://codebymonkey.com, was a little slow on loading, so I decided to make it faster some how. It’s a little JS heavy so I embarked on ways to reduce what the browser had to do when the page was first opened.

$(window).bind("load",function(){/* code to run */}); was the key.

Let me explain

When the page loads, you want the execute all the JS that’s crucial to how the page looks and works, so in my case, I want the logo/tagline to be centered as soon as it’s visible, so that executes on page load. The same goes for fading in the page as it’s loaded and setting the problem & solution blocks to have the same height.

Less important things like setting the Code by Monkey logo at the top to be an internal back-to-top link, smooth internal scrolling, diagonal background scrolling, contact form validation & lazy loading of ‘Work’ images are all run after the page has stopped loading and spinning the browser loading indicator.

$(function(){
	// On page load
});

$(window).bind("load",function(){
	// When all elements have loaded
});

Results

Prerequisite; although the page rendering as a whole took .07 seconds longer, the page visibly loads twice as fast, which the JS which the results to show. The testing was done in Chrome for anyone who cares.

Before:

After: