Grow your CSS skills. Land your dream job.

What Else can I do to improve webpage size/speed?

  • # May 3, 2013 at 11:56 am

    So, My website http://musicglaze.com is very heavily dependant on photography/imagery. Imagery comes from third party image host imgur.com , to decrease load on bandwidth.

    I did several things to improve speed/size of the page including:

    1) All images are optimised as far as possible in photoshop and exported for web.
    2) Website runs w3 total cache + Cloudflare cdn (I’m on wordpress)
    3) Javascript and css minified (as far as I could)
    4) put files together to reduce http requests (as far as I could)

    Yet, webpage size is still 2.8mb and load time is 5s (data from pingdom.com)

    I’m trying to find out what else can I do to decrease loading times. I was thinking, at the moment there are so many http requests for audio and image files, is it possible to make them all one request or something maybe?

    # May 3, 2013 at 12:46 pm

    2.8mb isn’t too bad, but it doesn’t look like anything is being cached at all. Every time I load the page I’m getting 2.8mb. Though, that loads pretty quick for me.

    # May 3, 2013 at 1:14 pm

    Try [GTMetrix](http://www.gtmetrix.com “”)

    # May 3, 2013 at 2:06 pm

    Agree with @TheDoc – something looks like it’s not functioning via caching. You could also try caching the images through the .htaccess if you are struggling to get W3 Total Caching (this isn’t the first time it just doesn’t seem to be working I’ve seen).

    Although I haven’t tried it, I’ve heard Codekit does a better job of compressing images that gives you a bit more crunch than PS.

    # May 3, 2013 at 3:43 pm

    I.Love.This.Site

    # May 3, 2013 at 4:37 pm

    I think part of the issue is that nothing is being rendered on the page until everything has loaded.

    Check out [this article](http://baymard.com/blog/making-a-slow-site-appear-fast) on reducing the “perceived load time”. Basically, show the key portions (frame work) of the page first and don’t wait for images or something like Discuq to finish loading before showing the page.

    # May 3, 2013 at 4:44 pm

    Some methods I use:

    1.) Compress Javascript/CSS [Try This](http://closure-compiler.appspot.com/home “Compress”)

    2.) Combine any related JS and/or CSS together to minimize requests

    3.) Use sprites for UI images

    4.) Strip unnecessary data from images (after PS save for web) [Try This](http://imageoptim.com “Image Optim”)

    5.) Review page speed/site analysis [Try This](http://tools.pingdom.com/fpt/ “Try this”)

    Hopefully some of those will help you…

    EDIT:
    I came across a tool some time ago that compresses fonts used with @ font-face…Can’t seem to locate it though. Perhaps someone else is aware of what I’m talking about and can point you there

    # May 3, 2013 at 6:15 pm

    @Rugg Are you talking about Subsetter? It only works for FF webfonts.

    http://www.subsetter.com

    You can also use htaccess to gzip them.

    # May 6, 2013 at 6:22 pm

    The single best thing you can currently do is to server scaled images. Also there is some caching you can improve on. Here is full report for all possible things:

    http://iwebchk.com/reports/view/musicglaze.com

    # May 7, 2013 at 1:23 am

    Whatever you did had an impact. I loaded 88 requests, 1.5mb, in 2.79s in Anchorage, Alaska a few minutes ago.

    At the size you’re using, I’d suggest making sure no image is larger than 70k. Several are at 100k.

    Amazingly small css, BTW!

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

You must be logged in to reply to this topic.

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