Grow your CSS skills. Land your dream job.

Any ideas on how to speed this page up?

  • # July 22, 2008 at 6:42 am

    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

    # July 22, 2008 at 7:19 am

    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.

    hope that helps abit

    # July 22, 2008 at 7:47 am

    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.

    Do others agree?

    Jon

    # July 22, 2008 at 3:29 pm

    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.

    # July 25, 2008 at 1:24 am

    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.

    # July 25, 2008 at 6:10 am

    You could also use Yslow. It’s a plugin for Firefox that analyses the loading time of a website and tells you how you can accelerate your website.

    # July 29, 2008 at 4:21 pm
    "runboston" wrote:
    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..

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".