Everyone wants their site to be as fast as it possibly can be because your site’s loading speed can have a severe impact on whether your visitors leave or stay to look around. No one wants to wait as a website loads section by section, image by image until finally their patience runs out.

So as a well-aware WordPress blogger, one day you decide it’s time to take action and do what’s necessary to speed up your site. You go online and find a bunch of articles – all giving you different opinions & tips. Being a website newbie, you are lost under heaps of information not knowing what you actually need to take from this research.

For all of you who can relate to this story, here are my quick-action no-nonsense tips to speed up your wordpress site – RIGHT NOW. It’s how I got my own site’s page speed score from 65 to ~ 91.

Test Your Site

Test your site at GTMetrix & Pingdom and analyze the free reports they generate. Go through each point in the report carefully. Both these sites give you suggestions really helpful on how to fix the issues that show up in your site analysis however I personally prefer to use GTMetrix.

Common Issues

Following are the issues that are most likely to show up in your report:
1. Serve Scaled Images
2. Specify Image Dimensions
3. Remove Query String From Static Resources
4. Minify CSS
5. Minify Javascript
6. Optimize Images
7. Enable GZip Compression
8. Avoid CSS @import
9. Optimize the order of styles and scripts
10. Leverage Browser Caching
11. Prefer Asynchronous Resources

1. Serve Scaled Images

GTMetrix gives you a list of images on your site that are getting resized in HTML or CSS. This happens when you upload images that are bigger than the size permitted for that image by your theme. So for example, if you upload an image 800 px wide whereas your blog featured image size is set to be 700 px in width, the uploaded image gets scaled down. A better way to do this is to crop your image to the exact dimensions that it uses when it shows up on your site.

2. Specify Image Dimensions

When adding an image to a page, post or your sidebar widgets, always make sure you punch in its exact dimensions – width & height. If you don’t, the time spent by the browser to figure out the dimensions for display adds to your page load time.

3. Remove Query String From Static Resources

Resources with a “?” in the URL are not cached by some proxy caching servers. To get rid of such query strings, download & install this awesome plugin. It will improve your scores in services like PageSpeed, YSlow, Pingdoom and GTmetrix.

4 & 5. Minify CSS & Javascript

JS and CSS files are very important to a website/blog and this plugin allows you to do one thing: deliver those files to your visitors more intelligently.
BWP Minify is a PHP 5 application that combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

6. Optimize Images

Use the WP Smush and Compress JPEG & PNG images plugins to manually optimize your existing images and automatically optimize each new one you upload.

7. Enable GZip Compression

First check whether or not gZip compression is already activated for your site here. If it’s not, follow the info & steps listed out in this excellent article by Patrick Sexton on what gZip compression is and how to use it.

8. Avoid CSS @import

If you’re using a child theme, by default, your child theme CSS has a code with @import at the top. This code is basically inserting your parent theme styles before the child theme styles. To improve your site speed, a better way of enqueuing the parent theme styles is by adding the following code to your child theme’s functions.php file and then deleting the @import code from the top of your child theme stylesheet.

/*** Child Theme Function ***/
// Code for loding priority for CSS files.
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts', 20 );
function my_child_theme_scripts() {
//echo get_template_directory_uri();
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'load_my_child_styles', 10 );
function load_my_child_styles() {
//echo get_stylesheet_directory_uri()."</br>";
wp_enqueue_style( 'child-theme', get_stylesheet_directory_uri().'/style.css' );
}

In the code above, you can replace the parent and child theme style sheet paths as needed.

9. Optimize order of styles & scripts

All your style sheet links should be in your pageand as far as possible (in most cases) your scripts should be in the footer. Any render-blocking (script that makes the page loading process slow down) javascript must be below the scroll fold. You can do this manually or use a plugin like this one to do it for you.

I personally use Cloudflare for a wide range of optimization features – including this one. Cloudflare is a free CDN tool and their Rocketloader can improve load times for pages that include JavaScript. Your search engine ranking may be improved by reducing page load time.

Rocketloader achieves this by:
– Decreasing the number of network requests by bundling JavaScript files, even third party resources, to avoid slowing down page rendering
– Asynchronously loading scripts, including third party scripts, so that they do not block the content of your page from loading immediately
– Caching scripts locally (using LocalStorage, available on most browsers and smart phones) so they aren’t refetched unless necessary

10. Leverage Browser Caching

If you set an expiry date or a maximum age in the HTTP headers for static resources, modern browsers will load previously downloaded static resources like images, css, javascript, pdf, swf etc. from local disks rather than over the network.

So if you configure your web server to set caching headers and apply them to all cacheable static resources, your site will appear to load much faster. Just add the below code to your .htaccess file.

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

## EXPIRES CACHING ##

11. Prefer asynchronous resources

When installing new plugins, try to look for their Asynchroneous versions. Here’s a funny non-programming example by epascarello of what Asynchronous javascript is all about:

Synchronous: You want a pizza for dinner and you are out of the frozen kind. So you have to stop playing WOW which upsets your clan. You go to the kitchen, make the dough, cover it with sauce, add the cheese, and smother it your favorite bacon topping. You just spent 20 minutes of your time making the pizza with another 10 minutes in the oven. The timer beeps and you pull the hot pie out. You can sit back down in front of your computer, eat the pizza, and continue with your conquest.

Asynchronous: You want a pizza for dinner while playing WOW. You open up a browser window on your 5th monitor. You load up the Pizza website and order your extra cheesy bacon pizza with a side of bacon grease garlic sauce. You go back to your raid and after 20 minutes the door bell rings. You get the pizza. You sit back down in front of your computer, eat the pizza, and continue with your conquest.

So what is the difference? One way you waste 20-30 minutes of precious WOW time, the other way you waste $20 plus tip.”

So basically, an Asynchronous event is an event that runs outside the application’s main thread thereby not adding to the pages load time by cleverly loading the scripts on the side.

There are plugins out there that offer Asynchronous options – for example when using Adsense, you can opt for the Asynchronous embed code instead of the default one, when choosing a social sharing buttons plugin, you can go for one that loads Asynchronously (like this one here) and so on.

Further reading

I also use the following two plugins to keep my site content optimized:

A] DNUI
This stands for Delete Not Used Images. And the plugin does exactly what the name suggests. It gives you a list of images that are currently not in use on your site. Do remember however, to take a back up before deleting any images instead of relying completely on what the plugin suggests. This can significantly help clear up any junk images you have lying around in your upload folder, thereby speeding up your site.

B] WP-Optimize
This is a very useful plugin that gives you information about any trash that has piled up in your database and helps you get rid of it. You keep collecting database trash when you change your site theme, install and then uninstall plugins etc.

Share your inputs

Do you use any other tools to free up space on your WordPress installation or to make your WP site faster? Do let me know using comments below.