This is a simple tutorial for creating an elgg plugin which will let you use jQuery CDN for elgg websites.

Type : Tutorial | Time : Less than 5 minutes | Difficulty : None

Why should I use jQuery CDN?

Better Caching : when you’re hosting jQuery locally in your website then your visitors must download it at least once. Each of your users probably already has dozens of identical copies of jQuery in their browser’s cache, but those copies of jQuery are ignored when they visit your site. Remember these jQuery files are not small. They comes to around 250-350KB and you will loose two http requests too when these contents are loaded.

Increased parallelism : Using the Google AJAX Libraries CDN eliminates one request to your site, allowing more of your local content to downloaded in parallel. It doesn’t make a gigantic difference for users with a six concurrent connection browser, but for those still running a browser that only allows two, the difference is noticeable.

Decreased Latency : A CDN — short for Content Delivery Network — distributes the static contents of a website across servers in various, diverse physical locations. When a user’s browser resolves the URL for these files, their download will automatically target the closest available server in the network.

Minfied and gZipped : The google jQuery files are minified and served with gzip encoding, so that they will consume only less bandwidth and loads faster.

How to implement this in Elgg?

We just need to create a new plugin for this. Lets call the plugin jQueryCDN. Create a folder called jQueryCDN inside your mod directory. Now just add two files into it with the following contents

1] manifest.xml
This file will tell elgg about the plugin, version, author, licence etc..

<?xml version="1.0" encoding="UTF-8"?>
<plugin_manifest xmlns="http://www.elgg.org/plugin_manifest/1.8">
	<name>jQueryCDN</name>
	<author>Team Webgalli</author>
	<version>1.0</version>
	<category>enhancement</category>
	<description>Load the jQuery CDN</description>
	<website>http://www.webgalli.com/</website>
	<license>GPL2</license>
	<requires>
		<type>elgg_release</type>
		<version>1.8</version>
	</requires>
</plugin_manifest>

2] start.php
This file loads the jquery CDN when elgg loads

<?php
	elgg_register_event_handler('init', 'system', 'jQueryCDN_init');

	function jQueryCDN_init() {
		// Unregister Elgg's Jquery
		elgg_unregister_js('jquery');
		// Register CDN jQuery
		elgg_register_js('jquery-cdn', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', 'head');
		// Load CDN jQuery
		elgg_load_js('jquery-cdn');	

		// Unregister Elgg's Jquery UI
		elgg_unregister_js('jquery-ui');	
		// Register CDN jQuery UI
		elgg_register_js('jquery-ui-cdn', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js', 'head');	
		// Load CDN jQuery UI
		elgg_load_js('jquery-ui-cdn');		
	}		
?>

Now go to the sites’s admin panel > Plugins and enable the jQueryCDN plugin.

Thats it. If you have any questions or thoughts post it as comments below.