best site loading

[specter]

Hi guys,

How to improve the web site loading time?
I started a new one that contains a lot of images but I noticed that it is loaded very slowly;I tried to reduce the images quality and dimensions to an acceptable value but nothing happens...
Have you, please, a good advice for me?

Thanks in advance for your replies

Specter

[maccas]

Remove white spaces and redundent tags if using a wysiwyg editor, use external css and javascript.

[maccas]

Also try slicing up your larger images.

[specter]

Hi Maccas and thanks for your reply;
I'm sorry but I'm not much friendly with wysiwyg editors or javascripts; I'm using Frontpage 2000 and I'm not able to do hard code manipulations...

What do you mean with adding external CSS?

[ken_b]

How many images are you loading on a single page?

How big are they in KB on average after you reduced them?

[specter]

Actually I have eight images in a page, with an average weight of 20kb for each one of them,in .jpg format.
The fact is that the template I used to create the site is the html version of a Photoshop file,so it has its own images (.gif) to load for an overall weight of 1,2Mb.
So,for each page the users visits,a double loading is needed;the template images from a hand,and the product photos from the other hand,resulting in a quite unacceptable loading time,and in the consequential abandon of the user of the web site navigation,very harmful for me.
So what have I to do in order to improve the loading time?
Often,porn sites,notoriously full of photos load in a "flash"!
What they have on more!?

Please help!

Thanks for any advice/suggestion

Sincerely

Specter

[bateman_ap]

1,2Mb, jeepers!

First thing I would do is look at cutting down the template in size. You mention Photshop, are you slicing it up in Imageready? If so you can click on each slice and change the image quality and whether it is a jpeg or gif.

It is best to play with this to get a better image size for each bit. Generally use jpeg for any "photographic" like elements and gif for anything with large areas of block colours.

Also solid blocks of colour can be replaced with table background colours. Repeating elements such as a texture can be replaced with the CSS background image, simply cut out a small section which will reduce loading time, which can be repeated in the background.

Failing all of that think about using thumbnail images on the page which a user can click through to a larger version. Remember to resize the thumbs and not to just use the larger image scaled down in the htm code.

[tedster]

Just to give you sense of how large 1.2 MB page weight is compared to an ideal, I've long found that a sweet spot for total page weight is in the area of 50KB -- so you're talking 24 times the page weight I aim for.

The culprit is usually images, unles you've allowed a really large amount of code bloat to accumulate. By any chance are using image files with large dimensions and then re-sizing them with the HTML width and height attributes, rather than resizing the image itself?

[specter]

To be sure,I completely removed the pictures but even so,nothing happens.
However,checking my image folder I found the culprit:it is a big image file 600kb that represents the page itself in jpg format and used as background.
I made this because the web page as obtained from Photoshop is an unusable sliced image.
So to put the text into the page I have to delete the slice where I want to write,using this big file as background;this make me two advantages:the first,I'm free to delete any slice in the page putting text wherever I want;the second,when I save the file I keep the original look of the page;
From other hand I also tried to delete the slice and replace it with the same slice as background,but when I save the file, it is not aligned with the rest of the page...
What have I to do?
What is the correct procedure?
What is your suggestion to put text in the page without loss in look?

Thanks for your reply

Sincerely

Specter

[webtress]

Specter, you can try to use includes (aka frontpage webbot) for the template header,footer,navigation .... Also using css to render the background images and font properties may help shave a tad of load time. You can edit the whitespaces out using html view in frontpage.

[jessejump]

I think you are going about this all wrong. Make 2-4 or 5 small (kb) files and put them on your web page.
Don't use Photoshop to create a giant image and then slice it up. That's not how most people make web pages.