How to make Transition load faster

Transition is a very large theme in terms of file size because I kind of broke my own rules of fast loading themes by using an excessively large image (and images) within its styling…but you have to admit, it’s a nice looking theme and from the positive comments I’ve been getting about it, it’s worth it.

By default, the theme packs a near 5 MB installation because of the large images and file sizes, but the big reason is because it also offers the user with several colour styles to choose from. This means that each colour version needs a complete set of images (both small and BIG!), so this will help create a slower site.

How to Reduce the Load

The only way of doing this is to remove colour styles you won’t be using. So once you install the theme, you can remove the ones you don’t want by doing some manual work…sorry about that!

IMPORTANT: Always make a full backup of your theme and site – even better if you backup your database – before making substantial changes or changes to any code in your site. It’s always best to be safe than sorry.

Here are the steps to take the unused theme styles out:

  1. Install your theme or unzip the theme first and then when changes are done, then upload to your WordPress themes folder
  2. Open the Transition/styles folder in your theme and “delete” the folders (each representing the colour styles) that you do NOT want
  3. Then delete the corresponding css files **keeping at least the default.css one there

The Theme Settings control panel in the WP admin area should now show the remaining styles in the drop down selection for colours. If anything goes wrong, remember the BACKUP you did? I hope so, because you would need to upload the backed up files for your theme, just in the event something didn’t go right.

Changing the Default Front Page Image Header

By default, a transparent png image is being used, and it’s the image you see when you first installed the theme. This is a massive file size, so you will want to find your own image to use; best not to make it a png 24 transparent image because the size of it will be large still. You can read more about the Default Image Header and how to manage it.

Other Methods to help reduce your website load times…

  • Use less images in your pages (don’t go nuts)
  • Optimize your images as much as you can
  • When using your own Header image, try to keep the size down as it doesn’t have to be the 980 x 350 pixels that the default front page one is
  • If you have movies or videos in your page, also try to keep this to a minimum either by count or by size
  • Try to limit the number of “scripts” you add to your site through added functionality with plugins as many will have their own javascripts and sometimes more than one. Scripts are a very bad for page speed issues. For example, here is one site that is using a ton of scripts (see below) which is just too much!
  • Try to also limit the amount of css files being loaded as well.
  • Optimize your site content
  • Try to avoid using CUFON font management because this thing loads a massive amounts of code in your page for each letter it creates. Yes the font looks cool when you can get different font styles in your page, but have you ever looked at how much code it adds for one letter? (see below for an example)
  • ** and of course, as a designer, I will go back to less image based themes, but the Transition theme style was one I could not resist this one time.

Sample Live Site that I Found with Tons of Scripts

I obviously blanked out the site’s link and theme title, but this is too many!


Sample Live Site with Cufon Fonts

This is what Cufon looks like for just one word “Get”…don’t forget it still needs scripts to make it work…

<cufon style="width: 42px; height: 21.6px;" alt="Get " class="cufon-canvas">
<canvas style="width: 59px; height: 21px; top: 1px;
left: -1px;" height="21" width="59"></canvas><cufontext>Get </cufontext></cufon>

You may think the above code for one word is reasonable, but if you make all of your headings with the cufon concept, this adds up to a lot as it does it per word. But for sake of argument, lets look at one simple blog heading: “Get help with PSD Files for Free” Try to find the words for the heading below…

<h1 class="blog-title"><cufon style="width: 42px; height: 21.6px;" alt="Get " class="cufon">
<canvas style="width: 59px; height: 21px; top: 1px; left: -1px;" height="21" width="59">
</canvas><cufontext>Get </cufontext></cufon><cufon style="width: 29px; height: 21.6px;"
alt="get " class="cufon-canvas"><canvas style="width: 45px; height: 21px; top: 1px; left: -1px;"
height="21" width="45"></canvas><cufontext>help </cufontext></cufon><cufon style="width: 52px;
height: 21.6px;" alt="help " class="cufon-canvas"><canvas style="width: 69px;
height: 21px; top: 1px; left: -1px;" height="21" width="69"></canvas><cufontext>with </cufontext>
</cufon><cufon style="width: 51px; height: 21.6px;" alt="with " class="cufon-canvas">
<canvas style="width: 67px; height: 21px; top: 1px; left: -1px;" height="21" width="67"></canvas>
<cufontext>PSD </cufontext></cufon><cufon style="width: 112px; height: 21.6px;"
alt="PSD " class="cufon-canvas"><canvas style="width: 129px; height: 21px; top: 1px;
 left: -1px;" height="21" width="129"></canvas><cufontext>Files </cufontext></cufon>
<cufon style="width: 32px; height: 21.6px;" alt="for " class="cufon-canvas">
<canvas style="width: 49px; height: 21px; top: 1px; left: -1px;" height="21" width="49"></canvas>
<cufontext>for </cufontext></cufon><cufon style="width: 45px; height: 21.6px;" alt="free!" class="cufon-canvas">
<canvas style="width: 61px; height: 21px; top: 1px; left: -1px;"
height="21" width="61"></canvas><cufontext>free!</cufontext></cufon></h1>
By | 2010-09-25T01:52:57+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply