Posted on Leave a comment

How to Speed up WordPress

After you’ve improved to you site’s keyword density, set up all the proper meta tags, configured your robots.txt, and generated and submitted your sitemap.xml, to ensure you site rank is as high as possible, you’ll want to optimize your site speed. The general recommendation is to keep your site’s load time under 2 seconds.

Aside from the obvious effect of a slow site to visitors, Google has been factoring site load time into the Page Rank formula since April 2010. There are many factors that can contribute to load time, and the steps you’ll need to take will be dependent on those factors.

There are a number of different methods you can take to analyze your site’s load time. The best place to start is a site speed test site such as Pingdom or WebPageTest. WebPageTest is a bit more detailed and comprehensive, and Pingdom is a bit simpler to understand. Also WebPageTest takes about 5 times longer to run. Both will display a waterfall style horizontal graph displaying the load time of each item.

Pingdom graph colors

Most of your load time will most likely fall under connect and/or receive. We’ll get to what to do about those a bit later. After you’ve reviewed the graph, check out the Performance Grade for Pingdom or Performance Review for WebPageTest. These will give you actionable recommendations for ways to reduce your load time. Most of the recommendations will likely involve caching, so lets start there.

Caching Types

There are a number of types of caching, and while the W3 Total Cache WordPress plugin handles all of them, it can be complicated to configure, and some options may not work depending on your hosting plan, so I’d like to review the types of caching.

 

Page Caching

Dynamic Content Management Systems such as WordPress can be immensely versatile and easy to manage, but they can tend to put a greater load on a web server than necessary. For static pages, and even for most posts, it makes more sense to write the content for each page/post to static files and serve them up when each page is visited rather than to process all the php and sql queries each time. Each file is refreshed whenever the page/post is updated, so the static files won’t contain outdated content.

While, as previously mentioned, the W3 Total Cache plugin will handle page caching, it may not perform page caching well in all hosting environments. In these circumstances, I find that Quick Cache also works well for page caching and doesn’t conflict with W3 Total Cache (as long as you have page caching disabled).

Minify

While not technically caching, it can certainly be a dramatic benefit in conjunction with caching. Minification is simply removing unnecessary white space from text files like HTML (or HTML rendered from PHP) Javascript and CSS. While it’s usually safe to minify HTML and inline JS and CSS, dynamically minifying external JS and CSS can result in a failure for those files to load properly, so it’s usually best to manually minify those files using a tool such as YUI Compressor.

Browser Caching

This greatly helps to offset the load time of static files as well as the overall load time of the site when revisiting the same page, or visiting additional pages on the same site. In addition to the obvious benefits of  configuring headers to promote browser caching, if a Proxy Caching Server exists on a user’s network, its possible that the site load time will be lessened even on the user’s first visit to the site. If you update your CSS or JS files frequently, it’s important to append a query string to these static resources to ensure that the latest version of these files are loaded.

 Further Analysis

There may be times when all the above methods still fail to bring your site’s load time down to a reasonable time. Enter the P3 (Plugin Performance Profiler) Plugin. This plugin will analyze the impact that each plugin has on your site’s load time as well as the impact of your theme. It’s possible that a single plugin may be the culprit.

Moving Javascript to Footer

When Javascript loads in the header, it unnecessarily increases the load time. It’s a fairly simple task to force javascript to load in the footer. If you’re enqueue-ing you’re own scripts, you can simply change this:

wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/custom_script.js',
		array('jquery')
	);
to this
wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/custom_script.js',
		array('jquery'), false, true
	);
If you're using several plugins that load javascript, you can use the Javascript to Footer plugin.

Image Optimization

Ensuring your image file sizes are as low as possible can improve your site’s load time by up to 10% without degrading image quality. There are many tools available for lossless image optimization, but probably the most reliable and comprehensive is Yahoo’s Smush.it. Yes, there is a plugin for that WP Smush.it will run images through Smush.it as you upload them to your site, or you can select to process several in bulk from your media library. This can be incredibly slow, and if you have dozens of images to process at once, your server may timeout if attempting to process too many at once. If you’d rather optimize dozens of them before uploading them, there is a command line utility that uses the Smush.It web service.

 

author avatar
Bryan
Bryan Headrick is an accomplished Wordpress and WooCommerce plugin developer and is skilled in responsive design, jQuery, SEO, and Conversion Optimization.
Leave a Reply

Your email address will not be published. Required fields are marked *