How to Speed up WordPress Blog – Simple Optimization Tips

How to Speed up WordPress Blog – Simple Optimization Tips

WordPress optimization is essential

WordPress is now the most popular content management system (CMS) in the world with over 73 million sites using this amazingly simple system. It is simple to use and easy to post, for the more savvy web developer it can be stripped right down and rebuilt to suit your every need.

For those who simply want a system to post information; plugins are an option. A simple piece of code that runs inside the WordPress framework adding functionality to your blog but at what cost?

With each plugin you add, you are also adding extra scripts and style sheets which in turn amounts to loosing that all important load time. Recent studies have shown that 47% of users expect a site to load after 2 seconds. Read this post by Kiss Metrics for a more detailed look at the effects of load times. 2 seconds doesn’t seem like a long time does it, but in today’s world where everything is fast and furious, every second counts.

How can we bring our site load times down?

With a few simple steps you can improve your sites load time with some remarkable results, your page rank can increase, the amount of traffic and page views can increase, but most of all, Conversions will increase. Conversions can be in the form of selling a product or an idea. It’s simple, more traffic equals more conversions.

“The first step in optimizing your site is to first identify what is causing it to be slow.”

Often people blame there servers for being slow, especially GoDaddy customers. Yet people fail to see that hosting companies provide you with the tools but it is up to you to utilize them. So lets take a look at a this site. I installed 10 plugins and made a post with badly laid out images, this will be our test and act as a control. The results were, hmm, how would you say, not so good. You can click to see a larger image.

I use two online tools to quickly determine what the problems are. Gtmetrix and Pingdom. Once you have determined what the cause of the performance issues are then you can begin your work. Follow these steps and you can be on your way to a fast loading site of under 2 seconds.

Always Back up your site before making major changes

If you are unsure of how to do this, read Backing up WordPress Database and Backing up WordPress Files.

Plugins, plugins, plugins and more plugins

Everyone loves plugins, WordPress comes with the option to install a plugin to do pretty much everything, but as stated above, the more plugins, the more scripts and style sheets you have to load. You must ask yourself, do you really need it? Do the benefits outweigh the cost? What I want you to do is deactivate all your plugins via your wordpress dashboard, go back to your site, press control F5 to force your browser to fetch a fresh version of the site.

Test your site on Pingdom or Gtmetrix. Run the test 3 – 4 times and note the load times. Then begin adding your plugins back in one by one repeating the previous instructions. You should notice that after activating each plugin your sites load time and number of scripts and Style sheets have increased.

Solution – Remove all unnecessary plugins and all optimizing plugins at this stage. We will discuss optimization plugins further down.

Gzip Compression

Compression is basically squashing your data as much as possible without loosing any functionality or instructions that it contains. This is an important part of optimizing a site as we don’t want to send our data in its current form otherwise our websites would be huge, broadband users would be having problems but what about those without a high speed connection, they may fall asleep at the screen waiting, and we don’t want that do we.

There are a number of ways in which we can compress our files to make them smaller and one of the most favoured ways is via .htaccess (Hyper-Text Access). This can be located via the root of your server, Log in to your server and look for something that says File Manager. It may vary in wording from Host to Host.

Your server may hide certain files so you may need to ask your Hosting provider how to View hidden files, but usually it can be done via the settings within the file manager.

Solution – Locate your .htaccess file and open it. You should see something like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On RewriteBase /
RewriteCond %{REQUEST_FILENAME}!-f
RewriteCond %{REQUEST_FILENAME}!-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Then Insert this code above, this will enable Gzip compression via apache. Go back to your site, press control F5 then run another test on Gtmetrix to see if your score in Enable Gzip Compression has gone up. Note changes made to your .htaccess only affect files on your server.

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?¦txt¦css¦js¦php¦pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Minify CSS and JavaScripts

Many scripts and stylesheets come with lots of empty spaces and comments for editing purposes. It makes it easier to read for human, but for machines it doesn’t really matter. When minifying scripts and stylesheets it is always good to keep a copy of the original which you should already have as you should have backed up your files. There are two reasons for have an original copy, the first for editing purposes and the second in case something goes wrong in the minifying process. There are a number of tools to minify your scripts Googles Closure Compiler service and the Online YUI Compressor both of which are good tools. You can also use the suggestions made by Gtmetrix. Click on Minify CSS or Minify Java and select see optimized version. You can then Copy and paste that in to the correct file. To find the file just follow the file path shown in Gtmetrix which for your themes stlyesheet should be something like this:

http://sitename.com/wp-content/themes/theme-name/styles.css

On your server which can vary, it would look something like this:

root/wp-content/themes/theme-name/styles.css

Then once again run Gtmetrix after pressing control F5 to refresh to ensure your scripts and stylesheets have been minified.

You can minify stylesheets and scripts located on your server for plugins and your theme.

Serve Scaled and Optimized images Images

This section will cover 2 areas that are interlinked with each other. Images are an important part of a website, without them you just get lots of text. So to break this page up I thought id add an image of my own.

That’s right, a camel, but this is no Ordinary Camel, this is my camel friend from the rifle range in the middle of the Desert in Kuwait, they just all came wondering across the range. Later found out it’s an intentional move by camel farmers because they got paid a lot of money if one was accidentally hit.

Anyway back to Optimizing our site. There are two things that will really slow your site down and they both relate to images. Incorrectly scaled images added to your posts and theme, many developers forget to scale there images for some reason. The second uploading an images that is just to damn big in terms of size in KB or in some cases MB. Right click my image and view image source, you will see  it’s location, File type, Size and dimensions. If you upload an image that is 1MB and you have 10 images loading on your page, you page will load 10MB of data plus the theme and everything else.

Solution – Download Shrink O’Matic and install it, ensuring that you have a shortcut on your desktop, because you will be using it quite a lot. It is a simple drag and drop image optimization program. Set the dimensions, select the type of file.

For images in a post or page use .jpg

For images used as logos or Diagrams use .GIF or .png

For more information about image types read this amazing article about Different Image Formats

Once you have your images correctly scaled to the intended size, then upload to your post using the usual WordPress method. Then we need to tell the browser how big it is. This allows the browser to render the page because it leaves a space for where the image will be inserted. If we don’t add the dimensions to the image, then the browser has to work it out, this adds precious milliseconds or even seconds to our initial load time.

Save your post or page as draft, Switch to HTML viewer find the image by pressing control F (a search box should appear at the bottom or top depending on browser) search for the last part of the image, i.e the image name plus extention. For my camel that would be Camel-Friend.jpg then insert this code using the example below.  After inserting the code, switch back to Visual mode, unless you were editing in HTML in the first place. Then save/publish.

#Style attribute for your image, note the " at the end, don't miss that out.
style="width: 200px; height: 150px;"

#Also add the height and width for the browser which is place at the end of the image path.
src="http://diywordpressblog.com/wp-content/uploads/2012/04/Camel-Friend.jpg" width="200" height="150"

#Image code in its complete form, this is the simplest way to add dimensions in your posts and pages
<img class="size-full wp-image-122 alignleft" style="width: 200px; height: 150px;" title="Camel Friend" src="http://diywordpressblog.com/wp-content/uploads/2012/04/Camel-Friend.jpg" width="200" height="150" alt="Camel" />

 

Once again you can test your results via going to your site, control F5 and retesting on Gtmetrix.

Optimize the order of Styles and scripts and Move java to the bottom

“Golden Rule: CSS on top Java at the bottom”

Another two that go hand in hand. If you have removed all the unnecessary plugins and chosen performance and quality over having lots of plugins, widgets and other various extras then this section may not apply to you. But if you have lots of plugins, you will also have lots of scripts in the head.

To sum it up, when you click on a website, the browser must first download and gather the content to build the page, if you have lots of java then you will have quite a bit to download. Java is also a blocking script, it doesn’t like to download side by side its friends Mr HTML and CSS. Unless you hardcode it to your header.php and footer.php but that results in having to manually add every script and for the most part, most people don’t want to do that hence using a Content management system.

Right click on your website and view source code to see how many scripts are in the head.

Solution – Java is tricky and there are alot of ways to control it ranging from advanced to beginner. As we are keeping this simple for now, then we shall go down a simpler path.

Locate a file called default-filters.php found in wp-includes. Scroll down through the script until you see these lines: Click View source top right of the box to see the code correctly. Do not copy this as some lines are missing to save space on here. Read the comments and edit the line above the comments.

// Actions
add_action( 'wp_head',             'wp_enqueue_scripts',          1     );
add_action( 'wp_head',             'feed_links',                  2     );
add_action( 'wp_head',             'feed_links_extra',            3     );
add_action( 'wp_head',             'rsd_link'                           );
add_action( 'wp_head',             'wlwmanifest_link'                   );
add_action( 'wp_head',             'noindex',                      1    );
add_action( 'wp_head',             'wp_print_styles',              8    );
add_action( 'wp_head',             'wp_print_head_scripts',        9    );
#Above Here is the line you want to edit, Change wp_head to wp_footer.
#This will then print your scripts in the footer.
add_action( 'wp_head',             'wp_generator'                       );
add_action( 'wp_head',             'rel_canonical'                      );
add_action( 'wp_footer',           'wp_print_footer_scripts',     20    );

 

Remember after making changes, control F5, then right click and view source code, you will see that the scripts have moved to the footer. So far I have not see any sites break as a result of this change, If your site breaks then please inform me via the comments below.

Note that it may break some of your themes functions so you may want to try this method.

Still reading, I know it’s long but hang in there.

Add Expires headers and Specify a Cache Validators

Two areas here to cover, expires headers and cache validating are forms of caching, they simply tell the browser how long this file should be valid for. Without it, some files may be downloaded everytime, the downside is that your users wont recieve an updated version of the site untill it expires. So this is reccommended for files that are static and do not change often. These files may include .css (your stlye sheets) .jpg, .png, .gif (images) and .js (javascript).

Note: Files with a query on the end will not be cached using this method (see example below). There is another method that checks if content has changed, but that requires going to the server and saying, “hey have you done anything since I was last here?” This can result in many round trips costing miliseconds. Considering that we only have seconds to play with then checking every file for modification before sending amounts to actual seconds.

Second note: Files from external servers also cannot be cached by your server, If you have lots of plugins this could be a problem.

Example: http://sitename/java/js/java-script-name.js?some-text

This satisfies Yslow and pagespeeds analysis of your site in regards to cache, so to add Expires headers with validation, simply add this code to your .htaccess and retest using Gtmetix.

# 1 YEAR
<FilesMatch "\.(jpg¦jpeg¦png¦gif¦js¦css¦ico¦swf)$">
Header set Expires "access plus 1 year"
</FilesMatch> 

# 2 DAYS
<FilesMatch "\.(xml¦txt)$">
Header set Expires "access plus 2 days"
</FilesMatch>

# 2 HOURS
<FilesMatch "\.(html¦htm)$">
Header set Expires "access plus 2 hours"
</FilesMatch>

You can change the position of the extension to suit you own needs, these are my settings and the file types I use.

An alternative is the conditional if module.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
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 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 2 days"
</IfModule>
## EXPIRES CACHING ##

 

“Were almost done, just hold in there. Well done for staying with us. Last one now.”

Content Delivery Networks

Content Delivery Networks basically work in two ways:

Pull – the CDN pulls the data from your server and then serves the client caching it ready to be served to someone else. The cached version remains on the CDN until you either purge the cache via the CDN or it simple expires.

Push – the CDN stores your files that you upload on their server and pushes it out to their edge servers located around the world. Bringing your content closer to the client, if you have ever traced your web files, you would know they can travel up to hundreds of thousands of miles before hitting your machine. Just to think, its got to travel so far and still render fully on your screen in 2 seconds.

The marvels of the modern world.

Personally I like to use MaxCDN who have proven to be easy and simple to set up, but most importantly their pricing is awesome. $39.95 for the first Terrabyte, thats 10 to the power of 12  or over 1 million megabytes. That would translate to around 3million page loads for an average site, so that means your good for a year.

 

Results of Optimization

The final outcome of your hard work is what really counts. I showed you what my site could be like if I added lots of plugins and didn’t optimize and utilize what the hosting provider has given me. So now it’s time to see what the result of all of the above amount to.

So there you have it, speed on shared hosting.

Feel free to leave a comment below.

About the Author

Matthew Horne - Web Developer

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

6 comments… add one

  • Black Book Operations December 31, 2012, 4:41 pm

    Very thorough for what I have picked out of this post ;) thanks

    • Matthew Horne December 31, 2012, 4:43 pm

      Thanks, this was the first post I wrote about optimizing wordpress, consolodating practices in one post, since then I have tried and test many other methods and continue to write about current practices.

      • Black Book Operations January 3, 2013, 11:53 am

        It’s a never ending story though ;) I still consider myself a wordpress “noob” after 4 years of working with it and everyday I encounter new ways of working out optimization, new ways of coding and developing a more streamlined experience for the user while stil holding on to many of the comforts of using third party plugins. Either way, good luck with your future endeavours and may you have a lot of fun whilst doing so!

  • Ratanak Ou January 25, 2013, 8:42 am

    I have tried so much hard to optimize my blog but it could not score well, just below 80, so sad..:( . If possible, please help me !!! http://www.oublogs.com

  • Blake McKibben February 1, 2013, 2:43 am

    Thanks for this post Matthew. Great info!

  • Shemul September 23, 2013, 7:00 pm

    most super post I have read in my entire blogging life. Really thanks.

Leave a Comment

Got a PSD?

Get started on your website today by hiring a professional developer who understands the needs of today's web. Optimized coding standards for PSD to WordPress conversions.

Contact Now!
Back to Top