The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

  • # May 3, 2013 at 11:56 am

    So, My website is very heavily dependant on photography/imagery. Imagery comes from third party image host , 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

    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

    This reply has been reported for inappropriate content.

    Try GTMetrix

    # May 3, 2013 at 2:06 pm

    This reply has been reported for inappropriate content.

    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


    # 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]( 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

    This reply has been reported for inappropriate content.

    Some methods I use:

    1.) Compress Javascript/CSS Try This

    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

    5.) Review page speed/site analysis Try This

    Hopefully some of those will help you…

    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.

    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:

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed