Hello, first off I'll throw out that this is my very first post, so thanks for taking the time to review this site for me. I'm in the process on designing a site for an interior designer and she's finally decided on the overall layout and design of the home page. Take a look - http://www.runboston.us/reviveInteriors/
Now, not factoring in the pictures, color scheme, and things of that nature, since she's set on those, I'm wondering if you guys see anyway I can speed up the load time for this page? Each of the main blocks on the page are PNG files with a size of about 296KB. As you will see, I tried to add a simple pre-loader to run while the page loads and it seems to work fine in IE7 and Safari, but it's not working in FireFox. I'm not totally sold on this idea, but it's the only thing I could think of to let the user know that the page is loading rather than having them think that the page is down.
One more thing to note, I tried to 'sprite' the blocks as one image, but that seemed to take even longer to load, which makes sense since it created an almost 1MB image.
Ok thanks for your time and I look forward to your ideas.
The only 1 real way to speed the site up that I can see (Im not that good at making things quick).. is to make all the images you have used JPG's...
for example your about image is coming up at around 275 kB on my photoshop at this end.. but if you make it a JPG at like 60 quality (to me it still looks the same but im not always that fussy) then the image is only 45kb.. so thats a saving of 230kb.. times that by 4 (for each of the main images) and you save 920kb (i think :D)...
again i cant really see any other way but im not to savy with coding or anything.
That's a good point Zane, I never thought about changing to a JPEG. Saving it as a JPEG with the maximum image quality of 12 is still fairly large, but if I bump it down to medium, then the size drops considerably. That being said, is there any disadvantage to using the medium setting, that you know of? I'm sitting here looking at the two images (quality 12 and quality 8) and I don't see much difference, so this might be the best option for me.
I think the preloader is fairly effective. 1MB is fairly heavy but that's not toooo bad. You could potentially host your larger image files on a different server, like Amazon S3, or even just images.runboston.us. Hosting assests like that on different servers can speed up page load time, as web servers often only serve up 2 simultaneous assests at once, so hosting them on different domains means you'll actually get 4 streams, which is nice.
For more ideas, you could always install Firebug and YSlow and see what it recommends.
Convert your GIFs to PNGs and use a PNG Crusher to get those sizes down. My YSlow! shows 530+kb of data. That's heavy duty...the Yahoo! Exceptional Performance guys have done studies that a high percentage of page views are from unprimed caches, and obviously first impressions (unprimed cache) goes along way towards increasing return visits.
Overall though, you only have 9 HTTP requests which is great. It's just 5 of your GIFs are over 100kb.
Hello, first off I'll throw out that this is my very first post, so thanks for taking the time to review this site for me. I'm in the process on designing a site for an interior designer and she's finally decided on the overall layout and design of the home page. Take a look - http://www.runboston.us/reviveInteriors/
Now, not factoring in the pictures, color scheme, and things of that nature, since she's set on those, I'm wondering if you guys see anyway I can speed up the load time for this page? Each of the main blocks on the page are PNG files with a size of about 296KB. As you will see, I tried to add a simple pre-loader to run while the page loads and it seems to work fine in IE7 and Safari, but it's not working in FireFox. I'm not totally sold on this idea, but it's the only thing I could think of to let the user know that the page is loading rather than having them think that the page is down.
One more thing to note, I tried to 'sprite' the blocks as one image, but that seemed to take even longer to load, which makes sense since it created an almost 1MB image.
Ok thanks for your time and I look forward to your ideas.
Jon
Keep the images the same style by slice them to 50 by 50 each square and put through an online compressor or run thm through the online comp. first which ever's easier..
Now, not factoring in the pictures, color scheme, and things of that nature, since she's set on those, I'm wondering if you guys see anyway I can speed up the load time for this page? Each of the main blocks on the page are PNG files with a size of about 296KB. As you will see, I tried to add a simple pre-loader to run while the page loads and it seems to work fine in IE7 and Safari, but it's not working in FireFox. I'm not totally sold on this idea, but it's the only thing I could think of to let the user know that the page is loading rather than having them think that the page is down.
One more thing to note, I tried to 'sprite' the blocks as one image, but that seemed to take even longer to load, which makes sense since it created an almost 1MB image.
Ok thanks for your time and I look forward to your ideas.
Jon
for example your about image is coming up at around 275 kB on my photoshop at this end.. but if you make it a JPG at like 60 quality (to me it still looks the same but im not always that fussy) then the image is only 45kb.. so thats a saving of 230kb.. times that by 4 (for each of the main images) and you save 920kb (i think :D)...
again i cant really see any other way but im not to savy with coding or anything.
hope that helps abit
Do others agree?
Jon
For more ideas, you could always install Firebug and YSlow and see what it recommends.
Overall though, you only have 9 HTTP requests which is great. It's just 5 of your GIFs are over 100kb.
Keep the images the same style by slice them to 50 by 50 each square and put through an online compressor or run thm through the online comp. first which ever's easier..