Bit of a help for a newcomer

[ChuckleButty]

Hi guys,

So I’ve been dabbling with website design for a while now but never really offered it as a service (I generally stick to logos and stationary etc.). It’s always been a bit overwhelming to be honest!

Anyway, I’ve just popped my own website together (finally!) but it seems a bit slow to load. I use jscript for image swap, as the whole css:hover image mapping+IE situation is less than perfect (I use Chrome but when testing it just never seemed to work on IE).

Now, my question is this: Is there much I can do about reducing the time it takes to load my site? Is the jscript I’ve used my best option?

Thanks guys,

Adam

Website is: http://daylightdesigns.co.uk

[hero]

This is what http://www.websiteoptimization.com/ is reporting:

—-

You have 16 total objects on this page. From 12 to 20 objects per page, the latency due to object overhead makes up from 75% to 80% of the delay of the average web page. See Figure II-3: Relative distribution of latency components showing that object overhead dominates web page latency in Website Optimization Secrets for more details. Consider reducing, eliminating, and combining external objects (graphics, CSS, JavaScript, iFrames and XHTML) to reduce the total number of objects, and thus separate HTTP requests. Consider using CSS sprites to help consolidate decorative images.

—-

You have a moderate amount of images on this page (14 ). Consider using fewer images on the site or try reusing the same image in multiple pages to take advantage of caching. Using CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques can help reduce HTTP requests.

---

total size of this page is 2198970 bytes, which will load in 441.45 seconds on a 56Kbps modem. Consider reducing total page size to less than 100K to achieve sub 20 second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Consider optimizing your site with Website Optimization Secrets, Speed Up Your Site or contacting us about our optimization services.

---

Warning! The total size of your images is 2192597 bytes, which is over 100K. Consider switch graphic formats to achive smaller file sizes (from JPEG to PNG for example). Finally, substitute CSS techniques for graphics techniques to create colored borders, backgrounds, and spacing.

[hero]

Instead of preloading the “hover effect” image I would decorate it using a script.

[ChuckleButty]

Okay, so it’s as I thought. Too many images!

I wonder if the best way to speed it up would be to layer up some divs to replace some of the images, using small repeatable background textures.

Drop shadow is a fairly important factor in the site’s style, is there a reliable cross-browser way to recreate them?

Thanks hero :)

[ChuckleButty]

“Instead of preloading the “hover effect” image I would decorate it using a script.”

What sort of script could perform a colour changing effect? At the moment I’m thinking the best solution for mouseovers is layering up some divs (as explained above) and having the logos on top with a low-opacity coloured background on them and hover-swapping it out for the logo without the coloured background.

[hero]

If you make the background of the images transparent you can change the background of a surrounding div. The only problem is you wont get the background texture when you do this.

Another option is to fade the opacity using jquery. Let me get you some code. Give me a few minutes.

[hero]

Here:

$(“.myimageclass”).fadeTo(250, .8).hover(function () {

$(this).fadeTo(250, 1);

}, function () {

$(this).fadeTo(250, .8);

});

I know these are both sacrifices to the design which sucks but there is alot of images.

[hero]

As for the color changing effect. If the images are transparent you can do this.

div.myimagediv:hover img
{
background: #880000
}

The background texture will be visible on the non-hover effect because it matchs the page background. However, it will be a solid color when you mouse over it.

I would look into web transitions as well. IE as usual sucks with it, but it does add an extra effect for other browsers. You can fade in the background color using them rather then having it change. On IE, it will just change without the pure css fade.

[peppericious]

Hi, Adam.

I know this is not the help you were looking for, but, as you’re in the business, I really thought you should know that producing stationERY (i.e. office materials) is one of the services you offer to customers, not stationARY (an adjective meaning ‘not moving’, ‘standing still’, etc).

Sorry, but this word is right up there at the top of your homepage, too, so I thought someone should point it out, especially as copywriting is very important in your line of work…

[Moofin]

The reason why your site is loading slow is because your image file sizes are huge due to using .png! Your contentbg.png is nearly 1mb – then you have your header at 250kb.. this is just two images out of 22 images you have on the homepage.

Why not use jpg instead – this should reduce the file size a lot for you :)

[snillor]

Very attractive site.

You’ve gotten some good advice; I don’t think I can add very much to speed up your page loading. But I did run it through the W3C’s HTML and CSS validators and saw that:

1) You haven’t declared a DOCTYPE. I recommend using the HMTL5 DOCTYPE format if only because it’s so simple:

2) You haven’t assigned character encoding. UTF-8 seems to be the most commonly recommended.

<head>

<meta charset="UTF-8">

Even though taking care of these 2 things probably won’t decrease page load times much, I think they’re good things to fix.

BTW, when you correct the spelling of “stationary” remember to correct it in your keywords too.

[standuncan]

Very attractive site.

Not only the amount of images, but I think maybe if yo had a bit more compression. I see on some of them you are using transparency, so it has to be png (well could be .gif but yuck lol), but on others I think you can get away with .jpg’s and use the box-shadow method instead of a drop shadow in the image itself and have smaller file size. Food for thought.

[noahgelman]

“I wonder if the best way to speed it up would be to layer up some divs to replace some of the images, using small repeatable background textures.”

Yes.

For example, take contentbg.png. It’s 830 by 940. Huge. Just get a 50 by 50 texture and repeat it. Much smaller. Also, use sprites. Having every single image brought in one at a time is incredibly slow.

Browsers have a limit on how many things they can request from the server at one time. So if you have dozens of calls, it creates a queue and slows your page.

[ChuckleButty]

CSS-Sprites are the thing where you have a background-image in one position and that position changes when you hover over it right? Thought that didn’t work in IE?

[Author]

Posts