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

Vertical Menus for WordPress or other CMS systems like Drupal, Joomla etc

You can essentially run two menu systems now (at first glance). 

In the image example above within the Artisteer design environment I have the option of both a horizontal menu and a (new) vertical menu. 

No idea yet how that will be managed in WordPress as I haven’t exported one of these puppies yet, but that’s coming up next!

Category Driven Menus

Update – I just heard through the forums that not only have vertical menus been added, but now category driven menus are possible.  There appear to be binary options for this.

• You can either have a Category based menu OR a Page based menu in the Horizontal menu or in the Vertical Menu.
• You can have a category in the horizontal and a Page based in the vertical or vice versa.
• You can NOT have a category AND a Page based menu in the vertical at the same time.
• You can NOT have a category AND a Page based menu in the horizontal at the same time.

All that said, this is just the post export (standard) options.  There are probably some easy ways to hack some additional combinations into a theme after the fact

Flash Header Support for WordPress Theme Design

There is also flash headers support for WordPress themes now.  I can add some very basic animation templates that Artisteer includes with the software, or if I have an .flv file I can import it into the theme header.

I haven’t tried that out yet, but I can’t wait to give it a go. 

Changing a Template from one System to Another (Ergo WordPress Theme to Blogger or Drupal)

Here’s a nice cool upgrade option.  If you have designed yourself a nice little template in say WordPress and you want to use the same exact design in Drupal or Blogger or Joomla or DotNetNuke or just an HTML page (for like a WP page template with modifications!) you can now do this with a click of the mouse (ok 2-3 clicks).

After you have the design you like, just change template type.  Then save file as something else if you don’t want to lose your original theme/template etc and you are off to the races. 

If you have a website powered by WordPress and you have a blog powered by Blogger, you could then easily cobrand the sites to look very similar as one working example.  Gonna have to ruminate on some additional practical applications.

Extending Free Upgrade License

For just over a year now, I have received free upgrades to Artisteer.  That’s part of the license.  Buy Artisteer and you get free upgrades for a year.  When I first picked up Artisteer in November of 2008, they were just moving to beta version 0.8 I believe.  1.6 versions later or from my perspective about 20 improvements, updates and upgrades later, it was now time for me to update my license.

For $59.95 I purchased another year of Artisteer upgrades, and now I’m cranking through the possibilities with 2.4.

In case you are wondering, it only took moments for my order to process and my old license became good for upgrades all over again.  There is a huge amount of value in this program, but every time I download another free upgrade (yeah I paid for it, but most software companies don’t give away free upgrades at all), it feels great and puts a smile on my face.  In total, I’ve invested just short of $200 in this software over the course of about 15 months, and I have earned a return on that investment of about 100x. 

You can check your own
upgrade subscription status here.

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

Artisteer 2.4 Beta bugs I’ve identified so far Update And Work arounds to design a WordPress theme successfully

Note this is still just a beta, the rc should be available soon.  The beta has a lot more customization options if you have the full standard version of Artisteer.

I did encounter a few issues.

1. I opened a previously existing theme file and the 2.4 beta version added textures (where none previously existed) to the Sidebar header blocks and to the menu bar and menu buttons.  UPDATE 2-10 – This has been reported to Artisteer, they have been able to recreate this issue in this beta version of Artisteer 2.4 and they are working on it!
2. It also changed my sidebar background color, which may not be a bug, but just a guess as I think the ability to customize this might not have been available or at least not to this level of detail before. UPDATE 2-10 – This has been reported to Artisteer, they have been able to recreate this issue in this beta version of Artisteer 2.4 and they are working on it!
3. It also took sidebar icons and moved them to the far left of the block, and I do not have an option to adjust any offset now. (there is an offset option between the icon and the text, but not between the icon and the left side of the bar.
   1. 
   2. Update 2-10 – After speaking with Artisteer, they indicated a method for fixing/adjusting these settings.  I will mention that from a usability perspective this is not as intuitive as most areas of Artisteer and I have suggest they reconsider menu navigation slightly.  Regardless to make this adjustment (ergo to move the icon further over) . . .
   3. Go to Sidebar Select Header-> Hover over Text (not Icon) – then Click Font Options
   4. 
   5. Now go to the paragraph tag, and identify the number of pixels in the left indentation, this will move the icon and the text to the right of it over by however many pixels you select
   6. 
   7. Hit OK and you are done. 
4. Separately, I see a new bug that was partially buggy in 2.3, but not terribly noticeable.  Its now partially fixed, but more noticeable than it used to be.  Notice the category drop down box, in the 2.4 beta version on the left it extends outside the div tags of the left sidebar 1.  In artisteer 2.3, it was simply chopped off, so you couldn’t actually see the drop down.  Basically this form option needs to auto size to the appropriate width allowed by the css file for the sidebar in question.  UPDATE 2-10– This has been reported to Artisteer, they are looking into this issue, which in many ways is an issue driven by WordPress functionality.  They are contemplating some work arounds in Artisteer that will help correct the WordPress display functionality until better WordPress logic comes to exist.
5.  

If you notice any other bugs with this or other versions of Artisteer in beta or not, let me know with a comment or contact Artisteer directly.  They are very responsive to bug reports and getting them fixed in future upgrades! 

Videos of the WP theme design presentation in 3 parts

Update – Part 3 is now fixed and working

Getting setup and going with the presentation was a little haphazard so the presentation wasn’t as polished as similar versions I delivered in Birmingham, Las Vegas and Savannah, but the audience had a lot of good questions, and I didn’t mind the change up.  It actually helped me quite a bit get a better feeling for those areas of the presentation that are probably more important for people learning to design WP themes for the first time.

I was introduced to the After the Deadline plugin while helping people at the Genius Bar.  After the Deadline is a great plugin that does grammar checking and spell checking of wordpress posts and pages.  This is no simple tool, it performs contextual checking of grammar and spelling at a very high and accurate level.

WordPress comes with a built in spell checker these days, but its not to powerful.  After the Deadline is a plugin that has been picked up by Automattic, the company behind WordPress.com.

I was also re-introduced to the Shopp ecommerce plugin for WordPress.  These days there are several WordPress plugins that provide ecommerce capabilities either as a bolt on plugin or as a conduit to another ecommerce plugin like OScommerce.  Shopp provides a number of great features as an ecommerce tool which include but are not limited to

• Easy to install WordPress plug-in
• Bolt-on e-commerce functionality, just install and activate
• Works out-of-the-box with any theme (quality may vary)
• 2Checkout.com (included)
• PayPal Website Payments Standard (included)
• PayPal Express Checkout (included)
• Google Checkout (Lvl 2 Integration) (included)^†
• PayPal Website Payments Pro (available add-on, US & UK only)^†
• Handles multiple product images with easy drag-and-drop sorting
• Support for selling digital & physical products and donations
• Export orders and customers into Tab, CSV and Excel formats
• Export orders for import into Intuit QuickBooks
• Search engine optimized shopping pages (product name and category in the title, semantic markup, alt/title attributes set, <meta> keywords/description)
• Built-in smart categories provide easy ways to highlight: new product additions, featured products, bestselling products, on sale products, random products, even related products for cross-selling
• Standards-compliant mark-up output (targeting XHTML 1.0 strict)
• Setup free shipping discounts
• Promote overstocked items with buy X get Y free promotions
• Apply any of your discount options using promo/coupon codes

Shopp is not a free plugin, it costs about $55.  As compared to the WP-Ecommerce plugin, which is free at a basic level and has multiple add on components to make it shine.  That said, the total price adds up to about the same amount.

I’m heading to the WordCamp Boston this weekend.  I will be working a shift in the WordPress Genius Bar helping people learn how to design WordPress themes for the first time.  I’m also looking forward to comparing notes with the presenters at Boston WordCamp covering advanced wordpress theme design.  I’m always looking to benchmark best practices to improve functionality, decrease load time and speed up the design process which makes wordpress as a cms theme design more affordable for my clients.

I am also going to see first hand how the Boston WordCamp was organized.  From an online perspective, this show looks tight.  The wordpress community in WordPress is very strong and I’m looking forward to some high level discussions. 

Its also been about 10 years since I visited Boston.  I haven’t been back since my brother in law graduated from MIT.  I lived just outside of Boston in the early 90’s and I do miss seeing one of my favorite cities in the US.

For those of you catching up with me at WordCamp Boston, I design wordpress themes using a combination of the following 3 software programs listed in order of importance based on total usage in the design process:

• Artisteer
• Dreamweaver (Adobe Product)
• Fireworks (Adobe product)
• ThemeDreamer (Dreamweaver addon)
• Firebug (Firefox addon)
• Google Adwords (keyword analysis)

* Note I bought Fireworks and Dreamweaver together a few years ago in a bundle called Studio 8, Adobe Creative Suite Web Premium CS4 is about the equivalent these days.  Its expensive but effective.  If you are a student, but it now while it is still cheap!

In general, I only recommend working on 2 hosting services, Inmotion Hosting and HostGator due to their great support and WordPress friendly atmosphere.  They make installation a breeze.  I do NOT recommend Godaddy, 1&1, nor IPower, which have made my life difficult.

In this video, Amanda does a great job of covering why WordPress is a great, effective, cost effective tool for non-profits. She has some colorful language, but she gets the job across in a no nonsense way.  There are some conversations and resources out there for non profits and wordpress but not as many as there could be.  I highly recommend checking out this presentation and conversation to help immerse yourself into how Wordpress can play a part in a Non-Profit organization.

Softduit was founded in Georgia and has expanded to North Carolina, but we serve customers around the world from Ireland and Great Britain and the Netherlands to customers all over the US and Canada to the far East, back around to the Ukraine and Russia.

WordPress CMS & Social Media Resources Referenced

This video references a few different resources which I have used myself including the cformsII Plugin, the social media managing service Social Oomph. 

I use Social Oomph regularly myself.  It lets me manage communications on multiple twitter accounts and my facebook account.  It helps me vet good versus bad followers on twitter.  It also helps me to schedule twitter messages if I want to make a future announcement or setup a recurring message for follow Friday for example.

BTW Cancer Services of Gaston County is offering tickets for a screening of a major motion picture 2 weeks from this Saturday, Letter’s to God Screening details.

Don’t miss your chance to see a major motion picture prior to its’ nationwide release in theatres. Help us spread the word and fill the auditorium seats! 

Saturday, January 30, 2010
Gaston Day School
Pamela Kimbrell Warlick Performing Arts Center

Afternoon Screening;
Doors Open         1:30pm
Live Music:         2:00pm
Movie:                    3:00pm

Evening Screening
Doors Open:        5:30pm
Live Music:          6:00pm
Movie:                      7:00pm

Tickets $5
Available at Cancer Services of Gaston County

Lightbulb is a collaborative coworking office that provides creatives, freelancers, small business owners and other non-traditional users access to the comforts and amenities of a modern office without the cost, overhead and commitment typically associated with a space of their own.

Our new office space is located at

1430 South Mint St
Suite 103
Charlotte, NC 28293

View Larger Map

In addition, to engaging clients and conducting business at this new location, we will also be utilizing this location for some of our meetings and training events surrounding WordPress and WordPress Theme Design.  For small meetings this location can comfortably seat 10-15 people in a conference room setting, or for larger events up to 50 people in an open atmosphere.

Softduit currently has offices in Lawrenceville, GA northeast of Atlanta and Belmont, NC just across the river from Charlotte.  We are also looking for additional locations in Savannah, Ga, offices in the Midwest.  Softduit Media also has a partnership with New Media Creative serving the West Coast via Las Vegas.

. … But the issue here is how easy is a website to manage for non-web orientated users?  Can the people that run the organization run the website?

WordPress is used by hundreds of millions of users around the world.  Our goal with this site is to move over the existing content but also achieve the following goals:

• Provide the people in the organization the ability to EASILY update their own website Pages.
• Provide the peope in the organization with the capability of EASILY running their own blog.
• Add the capability to the website to receive donations electronically
• Provide tools that make it easier to share pictures on the website
• Add Google maps helping provide the location and directions to Cancer Services of Gaston County
• Move the site from a previously existing server to a new hosted server that will be managed and controlled by Cancer Services of Gaston County personnel.
• Provide tools that make it easier for the organization to run events such as their Labor Day 5k race, including managing sign ups and collecting race fees and donations

Of course WordPress can do all of those things, and we will help them get through the process, making the migration simple and pain free.

Dragon Naturally Speaking 10 is available for 30% off through Nuance starting Today and lasting until 11/30.

You can get the Preferred Version or the Standard version (if you are a blogger the Standard version is likely what you are looking for, if you happen to be a podcaster you might get more out of the Preferred version. If you are a business user, I’d recommend Standard.

Here’s How you can get 30% off Dragon Naturally Speaking with the Coupon Codes Below

30% off Dragon NaturallySpeaking 10 Preferred

Start Date:11/26/2009 – End Date:11/30/2009

Dragon Coupon Code:giahh897e

Copy your link code below.

30% off Dragon NaturallySpeaking 10 Standard

Start Date:11/26/2009 – End Date:11/30/2009

Dragon Coupon Code: 2r22fbz7z

Copy your link code below.

Note: Cross posted from Maven Mapper’s Information.

Permalink

1. The only tool we seem to have is to suspend all domains temporarily.
2. Then un-suspend one domain at a time and
3. Refresh the server status in WHM over and over again
4. Gathering a sample of outputs for cpu usage

So far we have not identified any single domain that might be contributing to the problem.  Even starting to wonder if there might be a sophisticated hacker out there, hacking a server level or installing a virus at a server level that doesn’t ramp up their hacking efforts or turn the virus loose until multiple domains are on line.