Call me!
cell: 612-730-9540

JavaScript Deferring Script

Project Winter 2014:

Utilize A JavaScript Deferring Script

Google's PageSpeed Insights tool says I have three elements in the head of my document that are causing a delay in the page loading quicker. Two are CSS files (which I will look into later) and the one is the CDN file for jQuery API. Google Developer's Product document for Remove Render-Blocking JavaScripts suggest I use a script to make the jQuery load after the page loads.

Typically this fix is implemented for scripts that react to user actions on the page - like mousing over an element that triggers a script or when clicking a button that triggers a script. Google suggests a JavaScript deferring script is also valid for jQuery API CDN files. I just want to see if it really makes a difference, or if it breaks something on this page.

The Code Reveal:

Here: The Script


<script type="text/javascript">

	// Add a script element as a child of the body
	function downloadJSAtOnload() {
	var element = document.createElement("script");
	element.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
	document.body.appendChild(element);
	}
	
	// Check for browser support of event handling capability
	if (window.addEventListener)
	window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent)
	window.attachEvent("onload", downloadJSAtOnload);
	else window.onload = downloadJSAtOnload;

</script>

I could also add the jQuery API link below the footer element/before the final closing div tag as a solution for this problem, but I wanted to try a different solution and reflect on how it may better help my site, done this way.

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.