Thursday, September 20, 2007

How to make your blog speed along

I have talked before of reducing sidebar clutter and limiting the amount of widgets. plugins, scripts and images to speed up your page loading time.

You may have done all this and still find your page slower than a wet week and are wondering why.

What slows down page loading times and what to do about it?

Images

  • Reduce your image sizes - in dimension as well as in file size.

  • Reduce the number of colors in graphics.

turtle
  • Use dimensions with your images e.g. the image above uses

    <img src="http://..... /turtle.jpg" style="width:261px; height:126px;" />.

    I used one image rather than three here as this worked out as a smaller file size.

  • Use formatted text rather than text within images. Use color, font type and size and hover effects for effect.

  • Use the background image property rather than including the image by inserting it in the page.

    e.g. instead of using <div><img src=" http://..... /turtle.jpg" </div> use one of the following methods:
Use stylesheet background images classes for your template/theme and sidebar images and any images that you use repeatedly in posts:

CSS

.background-image {
background: url( http://..... /turtle.jpg);
background-image-repeat: no-repeat;
width: 200px;
height: 126px:
}

Html:

<div class="background-image">

http://..... /turtle.jpg" width:261px; height:126px;" />

</div>

For other post images use the code within the post html itself:

Html:

<div class="background-image" style="background-image: url(http://.....turtle.jpg); width:261px; height:126px;">
http://..... /turtle.jpg" />
</div>

Long Complex Stylesheets

  • If you have a more advanced understanding of CSS coding, use CSS shortforms. Using the CSS example above:

    .background {
    background: url( http://..... /turtle.jpg) no-repeat;
    width: 200px; height:126px;
    }

    For more information please take a look at Efficient CSS with shorthand properties from 46 Berea St by Roger Johansson; a site I used extensively while learning CSS.

  • Avoid long complex stylesheets with too much white space. e.g. cut out the line breaks from the code above:
  • .background { url( http://..... /turtle.jpg) no-repeat; width: 200px; height:126px; }

Scripts


Decide if you really need all of the scripts, widgets, plugins. If you do then look for an alternative that performs the same function. For example do you need a fancy graphic widget or will a simpler javascript producing textual information do the same thing.

Giving browsers too much work to do

  • Use trailing slashes after directory names in links e.g.

    <a href="http://www.......com/directory/">
    rather than
    <a href="http://www.......com/directory">

  • Wherever possible use CSS styles at the top of your webpage, rather than coding within your html, so the browser can figure out what goes where and what it should look like right at the start. External stylesheets are even better than placing the styles.

  • Place scripts at the end of your document so they don't hog time that is better used for displaying your posts. Leave them to load after your content has been rendered.

  • Although this will not speed the total load time of your page, it will allow the part you wish to be read first to load first; which in blogs is the posts (for bloggers who are more concerned about content than advertising banners, that is.). A simple way to achieve this is to use right sidebars rather than left so that scripts and widgets load after your posts.

rocket


Tools to help you with your task:

Sometimes it is hard to work out why a page is slow loading. There are free online tools to help you with this: I have found the following give the most comprehensive information:

Web Developer Toolbar


This invaluable tool for Firefox and Flock will, among many other features, give you information about your image dimensions and image file size. Download Firefox Web Developers Toolbar

Website Speed Testers

Web Page Analyzer - Type in your blog url and this utility will calculate your page size, its composition, and download time. The script sums up each type of web page component. Based on these page characteristics advice is offered as to how to improve page load time.

Full Page Test by Pingdom Tools loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars. Every test also shows general statistics about the loaded page such as the total number of objects, total load time, and size including all objects.

CSS Optimizers


Be very careful using this type of utility, backing up your current stylesheet before overwriting it with the streamlined code; they are not always totally reliable and may break your template.

  • Superdouche - no problems encountered and the file validated.
  • Clean CSS - Gives you more control over the compression.

    Using the maximum compression messed up my whole page by adding an extra ; to the end of my body tag.

Graphic/Photo Optimizers

  • Image Optimizer allows you to optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible. Upload or type in a url of an image and you are shown the image at different file sizes. Choose the lowest file size that still produces a clear image and save this. You can also use this tool to convert from one image type to another.
You can of course use PC software to reduce your image physical size and file size.
  • Irfanview - my default photo viewing program and my recommendation for quick and easy photo size and file size reduction. (it does red eye reduction in a jiffy too)

  • Graphics Programs - Photoshop or Photoshop Elements, (expensive unless you have a lot of uses for them) Corel Paint Shop Pro Photo or the free program Gimp

  • Photo editing/organizing/album programs such as: ones that often come with digital cameras, Picassa, Microsoft Office Picture Manager.

  • Web album creators such as the free Jalbum - good for reducing a number of images at the same time.



tag , ,imagesalexa

7 comments:

Kim said...

this is all terrific information and I will start testing my blog next week...this has been a very hectic week with a sudden portrait out of the blue....
I'm sure my sidebars are still too full and the page is loading slowly so I will be interested to test it out...
thanks for posting this Sue...very valuable information...can I put it in my favourite posts category ?????

Sueblimely said...

Hi Kim
Thanks. I would be delighted if you were to add this to your favorite posts category. Thank you.

Deborah said...

Excellent information Sue!

Lots of helpful tools too, which many will benefit from. Great job!

MrDoubts said...

That's a good post - really and I must appreciate the page design - neat and clean.

People do not understand the necessity of not using too many widgets.

I have written a post on this, I thought that you would like to take a look:
http://moredoubts.wordpress.com/2007/07/02/how-many-widgets-do-you-need-for-your-blog/

pearl said...

thats quite some info there :) this is a gem... and deserves a stumble...:)

Franco Yong said...

Hi Sue..I did it again. Found this good and cool posting of yours and shared it at my blog, http://ebizuniversity.blogspot.com.

:-)

Franco

Sueblimely said...

Hi all
I am really pleased that you found this of some use.

Thursday, September 20, 2007

How to make your blog speed along

I have talked before of reducing sidebar clutter and limiting the amount of widgets. plugins, scripts and images to speed up your page loading time.

You may have done all this and still find your page slower than a wet week and are wondering why.

What slows down page loading times and what to do about it?

Images

  • Reduce your image sizes - in dimension as well as in file size.

  • Reduce the number of colors in graphics.

turtle
  • Use dimensions with your images e.g. the image above uses

    <img src="http://..... /turtle.jpg" style="width:261px; height:126px;" />.

    I used one image rather than three here as this worked out as a smaller file size.

  • Use formatted text rather than text within images. Use color, font type and size and hover effects for effect.

  • Use the background image property rather than including the image by inserting it in the page.

    e.g. instead of using <div><img src=" http://..... /turtle.jpg" </div> use one of the following methods:
Use stylesheet background images classes for your template/theme and sidebar images and any images that you use repeatedly in posts:

CSS

.background-image {
background: url( http://..... /turtle.jpg);
background-image-repeat: no-repeat;
width: 200px;
height: 126px:
}

Html:

<div class="background-image">

http://..... /turtle.jpg" width:261px; height:126px;" />

</div>

For other post images use the code within the post html itself:

Html:

<div class="background-image" style="background-image: url(http://.....turtle.jpg); width:261px; height:126px;">
http://..... /turtle.jpg" />
</div>

Long Complex Stylesheets

  • If you have a more advanced understanding of CSS coding, use CSS shortforms. Using the CSS example above:

    .background {
    background: url( http://..... /turtle.jpg) no-repeat;
    width: 200px; height:126px;
    }

    For more information please take a look at Efficient CSS with shorthand properties from 46 Berea St by Roger Johansson; a site I used extensively while learning CSS.

  • Avoid long complex stylesheets with too much white space. e.g. cut out the line breaks from the code above:
  • .background { url( http://..... /turtle.jpg) no-repeat; width: 200px; height:126px; }

Scripts


Decide if you really need all of the scripts, widgets, plugins. If you do then look for an alternative that performs the same function. For example do you need a fancy graphic widget or will a simpler javascript producing textual information do the same thing.

Giving browsers too much work to do

  • Use trailing slashes after directory names in links e.g.

    <a href="http://www.......com/directory/">
    rather than
    <a href="http://www.......com/directory">

  • Wherever possible use CSS styles at the top of your webpage, rather than coding within your html, so the browser can figure out what goes where and what it should look like right at the start. External stylesheets are even better than placing the styles.

  • Place scripts at the end of your document so they don't hog time that is better used for displaying your posts. Leave them to load after your content has been rendered.

  • Although this will not speed the total load time of your page, it will allow the part you wish to be read first to load first; which in blogs is the posts (for bloggers who are more concerned about content than advertising banners, that is.). A simple way to achieve this is to use right sidebars rather than left so that scripts and widgets load after your posts.

rocket


Tools to help you with your task:

Sometimes it is hard to work out why a page is slow loading. There are free online tools to help you with this: I have found the following give the most comprehensive information:

Web Developer Toolbar


This invaluable tool for Firefox and Flock will, among many other features, give you information about your image dimensions and image file size. Download Firefox Web Developers Toolbar

Website Speed Testers

Web Page Analyzer - Type in your blog url and this utility will calculate your page size, its composition, and download time. The script sums up each type of web page component. Based on these page characteristics advice is offered as to how to improve page load time.

Full Page Test by Pingdom Tools loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars. Every test also shows general statistics about the loaded page such as the total number of objects, total load time, and size including all objects.

CSS Optimizers


Be very careful using this type of utility, backing up your current stylesheet before overwriting it with the streamlined code; they are not always totally reliable and may break your template.

  • Superdouche - no problems encountered and the file validated.
  • Clean CSS - Gives you more control over the compression.

    Using the maximum compression messed up my whole page by adding an extra ; to the end of my body tag.

Graphic/Photo Optimizers

  • Image Optimizer allows you to optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible. Upload or type in a url of an image and you are shown the image at different file sizes. Choose the lowest file size that still produces a clear image and save this. You can also use this tool to convert from one image type to another.
You can of course use PC software to reduce your image physical size and file size.
  • Irfanview - my default photo viewing program and my recommendation for quick and easy photo size and file size reduction. (it does red eye reduction in a jiffy too)

  • Graphics Programs - Photoshop or Photoshop Elements, (expensive unless you have a lot of uses for them) Corel Paint Shop Pro Photo or the free program Gimp

  • Photo editing/organizing/album programs such as: ones that often come with digital cameras, Picassa, Microsoft Office Picture Manager.

  • Web album creators such as the free Jalbum - good for reducing a number of images at the same time.



tag , ,imagesalexa

7 comments:

Kim said...

this is all terrific information and I will start testing my blog next week...this has been a very hectic week with a sudden portrait out of the blue....
I'm sure my sidebars are still too full and the page is loading slowly so I will be interested to test it out...
thanks for posting this Sue...very valuable information...can I put it in my favourite posts category ?????

Sueblimely said...

Hi Kim
Thanks. I would be delighted if you were to add this to your favorite posts category. Thank you.

Deborah said...

Excellent information Sue!

Lots of helpful tools too, which many will benefit from. Great job!

MrDoubts said...

That's a good post - really and I must appreciate the page design - neat and clean.

People do not understand the necessity of not using too many widgets.

I have written a post on this, I thought that you would like to take a look:
http://moredoubts.wordpress.com/2007/07/02/how-many-widgets-do-you-need-for-your-blog/

pearl said...

thats quite some info there :) this is a gem... and deserves a stumble...:)

Franco Yong said...

Hi Sue..I did it again. Found this good and cool posting of yours and shared it at my blog, http://ebizuniversity.blogspot.com.

:-)

Franco

Sueblimely said...

Hi all
I am really pleased that you found this of some use.