WordPress despite being a fantastic CMS system and SEO powerhouse is notorious for slow load times of individual web pages.  Google is expected to start ranking slow loading websites below faster loading websites this year (2010).  So if you want to keep your site competitive even at an SEO level, you need to speed up load times.  Besides a faster loading web page will make your visitors happier!

4 Tools to Help You Speed up Artisteer Themes and Wordpress sites

Artisteer Discount Code/Link If you would like to get a 5% discount on a new Artisteer license (home/education or standard) feel free to use my referral link http://www.artisteer.com/?p=brett

1. iWebTools Speed Test – This will give you a quick over view of the total load time of your website. Pros -Allows you to view speeds for multiple sites at same time. -Provides results for time to load page, but also the speed rate of the load, which will help you determine if your server is running fast enough or if your setup is running efficiently enough. Cons -Its not as exact as other tools. -You can only do a limited number of queries before you have to pay for it.

2. Pingdom – This is more of a precision level speed testing service. Pros –Allows you to see each file, css file, image, javascript file and their url location that contributes to the load time of your site. -Level of precision allows you to tackle each file or image one at a time to incrementally improve load time. -You can run an unlimited number of tests. -You can save the results of each test run (default setting) so that you can then compare speed improvements or decreases as you attempt to work on the site. Cons -The precision which includes the time to establish a connection to the site before it actually starts loading factors in to the total load time, which can make it difficult to compare total load time as you make improvements on your site.

3.  CSS SuperScrub – This tool takes your css file (style.css from Artisteer) and offers you several optimization options from removing all the white space and extra lines, to consolidating the css files onto one line, which reduces file size(load time).  From a browsers perspective it doesn’t matter if the style sheet is easy to read for a human or not.  So this chops out all the superficial crutches that humans use during the design process. Pros - Does a very good job of slimming down a css file to its essentials without breaking a site -Works well on Artisteer CSS files -Can also be used on Plugin CSS files Cons - Even though there are 3 check box options for settings, they don’t always seem to play nice together.  If you are going to use them, I recommend just checking the remove all white space option, which seems to generate the biggest result. -Crunching css files is not a perfect process, make sure you back up the original css file(duplicated it), and test your site after you crunch it to insure full operability. -If you update your theme file from artisteer or you upgrade a plugin that has a css file that you have optimized, you will need to optimize it again after the update/upgrade as it will likely be rewritten during the process.

4. Javascript Crunchinator – Tool helps you optimize the file sizes of javascript (js) files. Pros - This can decrease the size of javascript files, including the script.js file that is created with an Artisteer theme. -Don’t neglect to consider reviewing the javascript files for each of your plugins that use javascript, especially if they are identified by the Pingdom scan. Cons -Editing, or troubleshooting javascript files after they have been squeezed down is more difficult.  -Plus, if you update your theme in Artisteer and export it again, you will need to re-optimize the javascript file. -If an optimized plugin, comes out with an upgrade and you do the automatic upgrade, it too will need to be crunched and optimized again. -Crunching javascript files is not a perfect process, make sure you back up the original script, and test your site after you crunch it to insure full operability. Learn more about Javascript optimization here and here

So how do you increase load times for Artisteer Themes powering WordPress?

There are four areas that you have to focus on and only one of them relates to Artisteer directly, which is what I will cover directly below. While it is the fourth step, you can work on these out of order and still see an improvement in your site load times!

First, you have to work to speed up WordPress.

Second you have to insure that your hosting server is set up in an optimal way to power wordpress or your website and traffic in general.

Third you have to speed up your plugins, or choose alternative plugins that work faster and more efficiently.

Finally, you need to optimize your Artisteer designed wordpress theme.

---

So where to start . . . 

Take a look at the tools on the right, they are presented in the order I would recommend using them.

Run a general speed test first at iWebTools. Its not the best nor most complete, but does give a more understandable measure of speed, and is probably easier to compare apples to apples before and after you are done improving your site.

1.54 seconds looks pretty fast, but it could be faster, and from my own experience on Softduit it doesn’t always load that fast.    So I want to do even better, and more importantly do better more consistently.

Then run the pingdom test. This will be the tool that you will utilize to make incremental changes and improvements to your load time one area and file at a time in your wordpress configuration, plugin configuration and your artisteer generated theme.  (this will work for other themes as well, but I do not know if the optimization tools (3 & 4)   will work as well.)

Note Pingdom also displays some general information further down the page, don’t neglect this information!

You can see that Pingdom is telling me that this same site is loading in 23.1 seconds!  That’s a big difference from 1.54 seconds.

Why the discrepancy? Time to respond to initial request

When I first hit the button to start the test or a user hits the link to my site or the refresh button, an attempt to connect to the softduit server is initiated.

In this test the green area

represents the time it takes for any bit of data to be sent back from  the server.  During this green area, nothing has actually started to load, but it is included in the total measurement of time for pingdom.  In this example the green bar was about 16 seconds worth of time of the 23.1 in this test.

That gets us to the point where we can understand the tests.

Now we are ready to start improving those results.

We need to prioritize our improvement efforts in two areas: reducing file size on (1) large files and (2) slow loading files.  Sometimes these are the same files and sometimes they are not.

There are 3 areas we are going to focus on.

1. Reducing file size of javascript files
2. Reducing file size of .css files
3. Reducing file size of image files, which can include the images that make up an artisteer theme.

The biggest file slowing the home page load time is actually in the content, ergo loaded into a wordpress page and not part of the theme.  I do want to reduce its file size, so I download a copy from WordPress uploads, open it in Fireworks, and then reduce the quality of the .png file to something smaller.

This is a .png file, and I could make it a lot smaller with a .gif or .jpg but I want to continue with .png in this case.  That said, I can reduce the quality by converting it from .png32 to .png8 and by reducing the number of colors from 256 to 64.

Next, focus on your themes (artisteer theme’s) style.css file and the script.js file. These are the first two files circled in red above.  The script.js file is 10.4 KB and the style.css file is 26 KB.

After I compress the script.js file with the javascript Crunchinator tool and the style.css file with the CSS SuperScrub tool those files drop down to 8.3 kb and 22.7 kb, saving a total of 5.4 kb.  Not a huge savings, but a savings in a key area for the website to render.  In the case of the .png file, we were able to reduce that file size from 94.2 KB to 18.7 kb!  Definitely going to help on homepage loads.

When I run a new Pingdom speed test my load time has dropped from 23.11 seconds to 5.2 seconds, but don’t get cocky and think your work is done yet, you can do more and the test is just a sample, it could spike up from time to time, we might have simply gotten lucky!

When you are working with the javascript tool, you basically copy the content of any given javascript file, paste it into the box and hit crunch.  Once it is done removing the extra spaces, line breaks, etc, you copy the remaining code and paste it back into your original (backed up) file and upload it back up to your site.

So after I optimized the css on 2 plugins and the javascript on the same plugins (contact form 7 and the sliding panel plugin), I saw a .2 second boost in speed.

Every bit helps, and keep in mind that some samples of your sites speed will be different than others.  On any given query things may load faster or slower for you or your visitors.  On a fast load, you may not notice 0.2 seconds, but on a slow load where someone is coming in on a slower internet connection, that 0.2 second savings might actually be a 1 or 5 or 10 second savings.

Reduce css color codes from 6 to 3 characters

Every little byte helps, so if you can reduce your color codes in your css file down, that can help load time as well.  If you have a color that repeats through your theme of #FFFFFF or #000000 these relatively generic color codes can be simplified to #FFF or #000.

You can run a find and replace on your Artisteer style sheet and update a number of these items.

After making just the simple find and replace substitution in the primary style sheet, I was able to remove another 0.1 seconds even though my CSS file size didn’t seem to change visibly at the kb level.

Don’t forget when you are designing themes in Artisteer that if you choose colors that can be reduced to 3 characters they will take up less space.  Use fewer images, icons, glares, gradients etc and that too will reduce both the size of your image files but possibly also the number of images too!

Optimize the Artisteer Theme Images, especially the .png images!

So after all of the big items, I next went through and hit the largest 4 images generated by the Artisteer theme, the Button.png Header Footer and the Page-bgGlare.png files.

I opened each of them up in Fireworks and change them from a 32 bit color file to an 8 or 16 bit file, resaved them and loaded them up and cut out another 59 kb and 0.5 seconds too!

UPDATE: Today (3/9/10) I worked with a wordpress plugin called Smush.it (http://wordpress.org/extend/plugins/wp-smushit/) !  It basically helps to squeeze down the file size of images in your wordpress library already.  This is much faster than downloading images into fireworks and individually optimizing those images.  It may not optimize the images as much as possible, but if you are pressed for time or want to do a good first pass, I found it to be very useful.

The downside to Smush.it is that you have to Smush every image individually, which creates a lot of button pushes and page refreshes. TIP! I found it faster to Right click and open in a new Tab on each of the Smush.It links in my wordpress media library.  I was then able to process multiple images at the same time.

Now, there is a lot more, I can do and will do, but this should help you make some more progress.

Remember, Artisteer simply helps you make a theme easier, like any website, it is then up to YOU to make the most of that site, optimize it and get better and better results.

Even more resources on improving your website load time

14 Other Resources on Speeding up WordPress

1. 38 ways to optimize and speed up your WordPress blog
2. CSS: Use Shorthand Hex Colors
3. 15 Ways to Optimize CSS and Reduce CSS File Size
4. Yahoo! YUI Compressor
5. Speed up your website: Part One
6. How-to: Optimize your site for speed
7. How to Enable the Default WordPress Object Cache
8. 4 Simple Ways To Speed Up WordPress
9. Speed up and clean up your WordPress!
10. 5 Tips to Help Your Slow or Sluggish Blog or Web Site (Wordpress Especially)
11. Deleting excess records in your WordPress database
12. WordPress on Speed: 17 Tweaks to Accelerate your WP
13. The 3 Easiest Ways to Speed Up WordPress
14. WordPress Optimization: Control When Plugins Are Loaded

Related posts:

1. Optimize Artisteer WordPress Theme’s H1/H2 Title Tags for SEO
2. How to Upgrade a Theme to Work with WordPress 3.0 (Alpha 1.0) using Artisteer
3. WordPress Theme Design Contest – Win a Free Artisteer License
4. Can’t Drag Widget into Sidebar 2 on Artisteer Designed Theme?
5. Artisteer 2.4 with Vertical Menus & Flash Headers Available

3 Responses to “How to Speed up Artisteer WordPress Theme Load Times”