7 Easy Changes to Improve the Performance of a Wordpress Site

As one of the most popular CMSs in the world, Wordpress is used everywhere, from the smallest nonprofits to top political campaign websites.

Unfortunately there are a lot of very common mistakes made when using Wordpress that can be a real drag on a website’s performance. These can have some major implications because a slow-loading site will push many visitors to leave and for those that stay, a slow-loading site will make for a frustrating user experience and leave a bad impression once they leave. Additionally, a slow website can hurt your site before someone even visits it, as Google has publicly stated that slow websites rank lower in their search results.

Recently a nonprofit approached NMC with a website that had been built a few years ago on Wordpress. Due to a variety of factors, the site had become a slow-loading behemoth that just barely surpassed a 50 on the Google Page Speed Test. We spent a few hours cleaning it up as best we could within that timeframe and by the end of the day the pages were hitting the mid-80s. While these aren’t the only changes we made, I wanted to share some of the easier changes that many other Wordpress sites can benefit from using.

1. Don’t use a ton of plugins

As you likely know, Wordpress is well-known for its wide array of plugins, and it’s one of the reasons many people choose to use Wordpress over other CMSs. In fact, if you need to do something with Wordpress, there is probably a plugin out there that will help you do it. Unfortunately, some of these plugins aren’t written well and consequently can be major drags on the performance of a Wordpress site.

Common negative characteristics of plugins that can hinder performance of your website:

1. Requiring excessive or unnecessary JavaScript to work.
2. Resizing images through HTML. 
3. Loading an unnecessary additional JavaScript library (for instance, Mootools).
4. Loading JavaScript in the header instead of the footer.

Before installing a plugin, search Google and the Wordpress Plugin Directory to see if any other users have reported problems with it.  Additionally, take a peek at your code after installing and make sure the plugin isn’t doing one of the common mistakes above.

Of course, the best way to avoid the chance of a plugin slowing down the performance of your site is to not install the plugin in the first place. If a plugin does not offer a clear improvement to your website, don’t install it or remove it if the plugin is already installed.

2. Keep Wordpress and plugins updated

While it’s temping to ignore all those notifications that constantly pop up telling you that your current version of Wordpress or a plugin is outdated, doing so can make you miss out on performance improvements. The Wordpress CMS and the plugins built for it are constantly being improved, so taking a few minutes to update these can be an easy way to boost performance.  Another huge benefit is that these updates often fix dangerous security issues and improve features.

3. Avoid using numerous JavaScript-dependent social share buttons

Many social share buttons require loading JavaScript in order to work, which can drastically slow down a site, even for someone on a fast connection (for example, Mashable.com used to be awful with this). While having one or two JavaScript-dependent share buttons won’t drastically slow down a site, adding additional ones can make a otherwise quick site perform poorly.

Both Facebook and Twitter have the ability to share a website on them through a link, which is a nice alternative to javascript-dependent buttons. In the past this used to be more difficult to set up because links would have to be shortened before sending to Twitter, but this is no longer an issue because t.co, Twitter's url shortener, will now do it automatically.

<a rel="nofollow" href="http://twitter.com/home?status=Reading:%20<?php echo urlencode(get_the_title()); ?>%20&<?php the_permalink();?>" target="_blank">Share on Twitter</a> 

<a rel="nofollow" href="http://www.facebook.com/sharer.php?<?php the_permalink();?>&amp;<?php echo urlencode(get_the_title()); ?>" target="_blank">Share on Facebok</a>

Another benefit of using custom share links is that you can style them exactly how you want with CSS.

4. Only load files on pages that need it

If a page doesn’t need a file or specific code to work, it doesn’t make sense slow down our visitors by requiring them to load it. Fortunately, Wordpress makes it really easy to selectively show code through conditional tags.

As an example, the jQuery cycle plugin is often used with slideshows on homepages. To make sure the plugin only loads when a visitor goes to our homepage, we can use code similar to below.

<?php if ( is_front_page() ) { ?>
<script src="<?php bloginfo('template_url'); ?>/js/cycle.js"></script>
<script>  
	$(document).ready(function() {
 		$('#slideshow').cycle({
 			fx: 'fade'
 		});
	});
</script> 
<?php } ?>

5. Use the WP SuperCache and WP Minify plugins

By using a caching plugin like WP SuperCache, we can speed up our sites by serving most visitors static html files and eliminate the need to process scripts and query our database on every page load.

In addition to caching, another way to improve performance on our site is by minification. Minification will remove unnecessary characters, comments, spacing, line-breaks, and other non-critical elements from our javascript and CSS in order to reduce the size of our files -- often by a significant amount. A great plugin that will do this automatically for us is WP Minify.

On a side note (because I’ve seen this done before), a site does not need more than one caching plugin, so do not install WP Super Cache and W3 Super Cache. Installing both can really goof up a site.

6. Use Google’s content delivery network to deliver jQuery

Google’s CDN is commonly used to serve the jQuery library on websites across the web, so there is a very high likelihood that a visitor to your website will already have the jQuery library on their computer. By default, Wordpress does not use the CDN, so we want to switch our site over to using this, and likely save visitors from having to load an unnecessary additional file.

To use the Google CDN for the jQuery library, include the code below in your site’s functions.php file.

if( !is_admin()){
	wp_deregister_script('jquery'); 
	wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"), false, '1.6.4'); 
	wp_enqueue_script('jquery');
}

7. Add the code from the HTML5 Boilerplate .htaccess file to your current file

The default .htaccess file that comes with Wordpress is important because it contains code vital to making Wordpress work correctly -- but it doesn’t do anything else. Since there are various tweaks that can be made to the .htaccess that can improve the performance of a Wordpress site, let’s make sure the file contains them.

Performance improvements will come from these three main parts:

1. Setting up an expiration date for numerous common file types, in turn making it easier for browser to cache files.
2. Enabling gzip compression will compress files to a smaller size when they are sent to a browser.
3. Forcing the latest rendering engine available for visitors using Internet Explorer. IE is bad enough already, so let’s make sure that visitors are using the best that’s available for them.

To see what specifically the HTML5 Boilerplate .htaccess file is doing, read through the comments located within the .htaccess file. Please remember that the Boilerplate .htaccess should not replace your current .htaccess file. The .htaccess file included with Wordpress contains important code that is required for Wordpress to work, so contents of the contents of the Boilerplate .htaccess file should be added after what is currently in your .htaccess file.

Final note

On a final note, building your site on Hifi, a content management system built by New Media Campaigns, would negate having to make many of these changes. Be sure to check it out for your next project at http://gethifi.com.