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.
|2. Pingdom– This is more of a precision level speed testing service.Pros|
-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.
|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
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.
- Reducing file size of .css files
- 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.
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!
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
- 38 ways to optimize and speed up your WordPress blog
- CSS: Use Shorthand Hex Colors
- 15 Ways to Optimize CSS and Reduce CSS File Size
- Yahoo! YUI Compressor
- Speed up your website: Part One
- How-to: Optimize your site for speed
- How to Enable the Default WordPress Object Cache
- 4 Simple Ways To Speed Up WordPress
- Speed up and clean up your WordPress!
- 5 Tips to Help Your Slow or Sluggish Blog or Web Site (WordPress Especially)
- Deleting excess records in your WordPress database
- WordPress on Speed: 17 Tweaks to Accelerate your WP
- The 3 Easiest Ways to Speed Up WordPress
- WordPress Optimization: Control When Plugins Are Loaded