Yesterday, I visited Ainun’s wedding party at An-Nahdah Mosque. It was my first time attending a wedding party that is held in a Mosque (apology to Rahman and Ratih for missing your wedding party, I was with my family in Bali that time :)).

The atmosphere was great, the food was delicious, but one thing that struck my mind that day was the prayer that was given by the Habib (I didn’t get his full name) to Ainun and his Wife. He prayed that Ainun and Yanti will have a barokah life. Barokah as in:

1. Even when your money is not much, you still found it enough
2. Even when what you have is not many, you still found it sufficient
3. Even when you have a little time, you can do many things
4. Even when you are given a short life, you can achieve so many things

“Houston, we have a problem!”

When I was working on recent posts, I was surprised to notice that jQuery script was loaded twice.

So I investigated it by looking at my current theme, as well as WordPress code. I found out that both WordPress and my current theme is loading jQuery.

My current theme is Pyrmont V2. I look at the header.php, I found out this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/scripts/basic.js" type="text/javascript"></script>

So this is the reason why I found two jQuery source code being loaded (shown below).

But what about WordPress? In which file does the jQuery listed to be automatically loaded? After using Windows File-Content Search to scrutinize WordPress’wp-includes folder, I found the answer:

script-loader.php

   //...   
   $scripts->add( 'cropper', '/wp-includes/js/crop/cropper.js', array('scriptaculous-dragdrop'), '20070118');
   $scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2');	
   $scripts->add( 'jquery-ui-core', '/wp-includes/js/jquery/ui.core.js', array('jquery'), '1.7.1' );	
   //...

I found it interesting that WordPress is loading jQuery from localhost (sodeve.net), but Pyrmont is loading it from Google. There must be a reason for this. Dave Ward at Encosia teaches us that the reasons are:

1. Decreased Latency. Because Google is using Content Delivery Network (CDN). Therefore, it is much faster than your server
2. Increased Parallelism. Because it reduces the number of connections made to a single server. Browser usually has limit on the number of connection to a single server
3. Better Caching. Since the script is obtained from Google, it is very likely the script is already cached when visited any Google’s website that uses jQuery

Anyway, I’m sold to Dave’s idea. I replaced the line in script-loader.php, using http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js instead of /wp-includes/js/jquery/jquery.js. Then I observed the performance using Firebug.

Hmm.. WordPress added the “ver” parameter in the script request. This invalidated Dave’s point no. 3. What can we do to make WordPress not to add “ver” parameter in the script request?

How to Make WordPress Load Script without Ver Parameter

Open class.wp-script.php inside folder wp-includes of WordPress

//.....

$src = add_query_arg('ver', $ver, $src);

//.....

Comment the line shown above (line 117).

I believe things load faster now 😀 (At least for Google, sodeve.net server is a shared hosting, so its performance is difficult to expect :P)

I hope it helps 😉 If you like this article, kindly consider to visit the sponsors to check out their offers. Cheers!

Are you using Google Syntax Highlighter plugin for WordPress?

If you do, I am using the plugin too. Anyway, I was analyzing how this blog loads using Chrome’s Developer Tools. I am surprised that this plugin load all brushes at once.

Hmm.. inefficient. So I come up with this enhancement.

First let’s display the original:

<?php
/*
Plugin Name: Google Syntax Highlighter for WordPress
Plugin URI: http://wordpress.org/extend/plugins/google-syntax-highlighter
Description: 100% JavaScript syntax highlighter This plugin makes using the <a href="http://code.google.com/p/syntaxhighlighter">Google Syntax highlighter</a> to highlight code snippets within WordPress simple. Supports C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, SQL, VB, XML, and HTML. Read  <a href="http://code.google.com/p/syntaxhighlighter/wiki/Usage">usage directions.</a> 
Version: 1.5.1
Author: Peter Ryan 
Author URI: http://www.peterryan.net
*/

function insert_header() {
	$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>
	<link href="<?php echo $current_path; ?>Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
	<?php
}

function insert_footer(){
$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shCore.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shLegacy.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushPhp.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushJScript.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushJava.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushVb.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushSql.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushXml.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushPython.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushRuby.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCss.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCpp.js"></script>
<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shThemeDefault.css"/>
<script class="javascript">
SyntaxHighlighter.defaults['wrap-lines'] = false;
dp.SyntaxHighlighter.ClipboardSwf = '<?php echo $current_path; ?>Scripts/clipboard.swf';
SyntaxHighlighter.all();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<?php
}
add_action('wp_head','insert_header');
add_action('wp_footer','insert_footer');
?>

And now the enhanced version:

ENHANCED

<?php
/*
Plugin Name: Google Syntax Highlighter for WordPress
Plugin URI: http://wordpress.org/extend/plugins/google-syntax-highlighter
Description: 100% JavaScript syntax highlighter This plugin makes using the <a href="http://code.google.com/p/syntaxhighlighter">Google Syntax highlighter</a> to highlight code snippets within WordPress simple. Supports C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, SQL, VB, XML, and HTML. Read  <a href="http://code.google.com/p/syntaxhighlighter/wiki/Usage">usage directions.</a> 
Version: 1.5.1
Author: Peter Ryan 
Author URI: http://www.peterryan.net
*/
function insert_header() {
	$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>
	<link href="<?php echo $current_path; ?>Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
	<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>Styles/shThemeDefault.css"/>
	<?php
}
function insert_footer(){
$current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
	?>

<script class="javascript" src="<?php echo $current_path; ?>Scripts/shCore.js"></script>
<script class="javascript" src="<?php echo $current_path; ?>Scripts/shLegacy.js"></script>
<script class="javascript">
var arLanguages = new Array();
var arLangCounts = 0;
var arAliases = [
	{key:'shBrushCSharp.js', val:['c#','c-sharp','csharp']}
	,{key:'shBrushCpp.js', val:['cpp','c']}
	,{key:'shBrushBash.js', val:['bash','shell']}
	,{key:'shBrushAS3.js', val:['actionscript3','as3']}
	,{key:'shBrushXml.js', val:['xml','xhtml','html','xslt']}
	,{key:'shBrushVb.js', val:['vb','vbnet']}
	,{key:'shBrushSql.js', val:['sql']}
	,{key:'shBrushScala.js', val:['scala']}
	,{key:'shBrushRuby.js', val:['ruby','rails','ror']}
	,{key:'shBrushPython.js', val:['py','python']}
	,{key:'shBrushPowerShell.js', val:['powershell','ps']}
	,{key:'shBrushPlain.js', val:['text','plain']}
	,{key:'shBrushPhp.js', val:['php']}
	,{key:'shBrushJScript.js', val:['js','jscript','javascript']}
	,{key:'shBrushJavaFX.js', val:['jfx','javafx']}
	,{key:'shBrushJava.js', val:['java']}
	,{key:'shBrushGroovy.js', val:['groovy']}
	,{key:'shBrushDiff.js', val:['diff','patch']}
	,{key:'shBrushDelphi.js', val:['delphi','pascal']}
	,{key:'shBrushCss.js', val:['css']}
	,{key:'shBrushPerl.js', val:['pl','perl','Perl']}
				];
function getScriptName(alias){
	var i = 0;
	for (i=0; i < arAliases.length; i++)
	{
		if (arLanguages.indexOf(arAliases[i].key)<0)
		{
			if (arAliases[i].val.indexOf(alias)>=0)
				arLanguages.push(arAliases[i].key);
		}
	}
}	
if (jQuery)
{
	$sdv = jQuery.noConflict();
	$sdv(document).ready(function(){
		$sdv("pre").each(function(i){
			getScriptName(this.className);							
		});		
		$sdv.each(arLanguages, function(){
			var scrName = '<?php echo $current_path; ?>Scripts/' + this;
			$sdv.ajax({
			  type: 'GET',
			  url: scrName,
			  cache: true,
			  success: function(){
					++arLangCounts;
					if (arLangCounts == arLanguages.length)
					{
						SyntaxHighlighter.defaults['wrap-lines'] = false;
						dp.SyntaxHighlighter.ClipboardSwf = '<?php echo $current_path; ?>Scripts/clipboard.swf';
						SyntaxHighlighter.all();
						dp.SyntaxHighlighter.HighlightAll('code');
					}
				},
			  dataType: 'script',
			  data: null
			});			
		});
	});
}
</script>
<?php
}
add_action('wp_head','insert_header');
add_action('wp_footer','insert_footer');
?>

So instead of loading all the brushes, we will dynamically load it using jQuery. I hope it’s useful for you 🙂