I try to maximise my efforts when it comes to page load times. As such, I’m a big fan and user of CloudFlare because it greatly reduced the loading times of my webpages.
For the Syntaxhighlighter Evolved WordPress plug-in, I wanted to switch the scripts needed to CDNJS, the CloudFlare CDN for scripts and other static sources.
Each time a script is detected by the plug-in, the plug-in adds the necessary scripts to the page as well as the necessary CSS files. However, wasn’t so great for my users, because the number of JavaScript files was quite big.
The solution is the following: edit syntaxhighligher.php in the /wp-content/plugins/syntaxhighlighter folder. Find the following code:
// Register brush scripts
wp_register_script( 'syntaxhighlighter-core', plugins_url( $this->shfolder . '/scripts/shCore.js', __FILE__ ), array(), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-as3', plugins_url( $this->shfolder . '/scripts/shBrushAS3.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-bash', plugins_url( $this->shfolder . '/scripts/shBrushBash.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-coldfusion', plugins_url( $this->shfolder . '/scripts/shBrushColdFusion.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-cpp', plugins_url( $this->shfolder . '/scripts/shBrushCpp.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-csharp', plugins_url( $this->shfolder . '/scripts/shBrushCSharp.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-css', plugins_url( $this->shfolder . '/scripts/shBrushCss.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-delphi', plugins_url( $this->shfolder . '/scripts/shBrushDelphi.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-diff', plugins_url( $this->shfolder . '/scripts/shBrushDiff.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-erlang', plugins_url( $this->shfolder . '/scripts/shBrushErlang.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-groovy', plugins_url( $this->shfolder . '/scripts/shBrushGroovy.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-java', plugins_url( $this->shfolder . '/scripts/shBrushJava.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-javafx', plugins_url( $this->shfolder . '/scripts/shBrushJavaFX.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-jscript', plugins_url( $this->shfolder . '/scripts/shBrushJScript.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-perl', plugins_url( $this->shfolder . '/scripts/shBrushPerl.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-php', plugins_url( $this->shfolder . '/scripts/shBrushPhp.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-plain', plugins_url( $this->shfolder . '/scripts/shBrushPlain.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-powershell', plugins_url( $this->shfolder . '/scripts/shBrushPowerShell.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-python', plugins_url( $this->shfolder . '/scripts/shBrushPython.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-ruby', plugins_url( $this->shfolder . '/scripts/shBrushRuby.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-scala', plugins_url( $this->shfolder . '/scripts/shBrushScala.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-sql', plugins_url( $this->shfolder . '/scripts/shBrushSql.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-vb', plugins_url( $this->shfolder . '/scripts/shBrushVb.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-xml', plugins_url( $this->shfolder . '/scripts/shBrushXml.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
and replace this by the following code:
// Register brush scripts
wp_register_script( 'syntaxhighlighter-core', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js', array(), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-as3', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-bash', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-coldfusion', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-cpp', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-csharp', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-css', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-delphi', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDelphi.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-diff', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-erlang', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-groovy', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-java', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-javafx', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-jscript', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-perl', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-php', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-plain', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-powershell', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-python', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-ruby', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-scala', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushScala.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-sql', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-vb', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js', array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-xml', '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js', array('syntaxhighlighter-core'), $this->agshver );
From now on, all of the JavaScript assets needed for this plug-in are loaded from the CloudFlare CDN instead of a local copy!
The same can be applied for the CSS files. Find these files at the Syntaxhighligher page on CDNJS.
// Register some popular third-party brushes
wp_register_script( 'syntaxhighlighter-brush-clojure', plugins_url( 'third-party-brushes/shBrushClojure.js', __FILE__ ), array('syntaxhighlighter-core'), '20090602' );
wp_register_script( 'syntaxhighlighter-brush-fsharp', plugins_url( 'third-party-brushes/shBrushFSharp.js', __FILE__ ), array('syntaxhighlighter-core'), '20091003' );
wp_register_script( 'syntaxhighlighter-brush-latex', plugins_url( 'third-party-brushes/shBrushLatex.js', __FILE__ ), array('syntaxhighlighter-core'), '20090613' );
wp_register_script( 'syntaxhighlighter-brush-matlabkey', plugins_url( 'third-party-brushes/shBrushMatlabKey.js', __FILE__ ), array('syntaxhighlighter-core'), '20091209' );
wp_register_script( 'syntaxhighlighter-brush-objc', plugins_url( 'third-party-brushes/shBrushObjC.js', __FILE__ ), array('syntaxhighlighter-core'), '20091207' );
wp_register_script( 'syntaxhighlighter-brush-r', plugins_url( 'third-party-brushes/shBrushR.js', __FILE__ ), array('syntaxhighlighter-core'), '20100919' );
// Register theme stylesheets
wp_register_style( 'syntaxhighlighter-core', plugins_url( $this->shfolder . '/styles/shCore.css', __FILE__ ), array(), $this->agshver );
wp_register_style( 'syntaxhighlighter-theme-default', plugins_url( $this->shfolder . '/styles/shThemeDefault.css', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_style( 'syntaxhighlighter-theme-django', plugins_url( $this->shfolder . '/styles/shThemeDjango.css', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_style( 'syntaxhighlighter-theme-eclipse', plugins_url( $this->shfolder . '/styles/shThemeEclipse.css', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_style( 'syntaxhighlighter-theme-emacs', plugins_url( $this->shfolder . '/styles/shThemeEmacs.css', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_style( 'syntaxhighlighter-theme-fadetogrey', plugins_url( $this->shfolder . '/styles/shThemeFadeToGrey.css', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_style( 'syntaxhighlighter-theme-midnight', plugins_url( $this->shfolder . '/styles/shThemeMidnight.css', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_style( 'syntaxhighlighter-theme-rdark', plugins_url( $this->shfolder . '/styles/shThemeRDark.css', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );