Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

General Design: Don't Like the Way Background Images Load...A Little Choppy...

Bottom of Page

1 to 12 of 12

  1.  
    • CommentAuthorvaleeum
    • CommentTimeAug 3rd 2007
     permalink
    One of the sites I am working on has slow image load times (mostly for the background images) for the first time someone visits the site. Is there anything that I can tweak to make the first page load a little more smoothly??

    The site is at the following url:

    http://www.fengjunk.com

    Thanks,
    V
  2.  permalink
    If you have Fireworks, use it to re-export those large jpg backgrounds -- FW has a more powerful compression engine than Photoshop.
    •  
      CommentAuthorjernigani
    • CommentTimeAug 3rd 2007
     permalink
    Your two big areas of size are images, and scripts.
    Your total file size for that page is over 400kb.

    The biggest thing you could do is compress, compress, compress. As well as get rid of any javascript you don't need. If you don't need the file on this page don't put it.

    So I would also suggest compressing all of your biggest images on this list. Fireworks does have a really good compression, but if you don't have that and do have photoshop, you should use the save for web feature and play around with the different types of compression you can do. Limiting the colors can trim size without noticeable changes. Even blurring images beforehand helps with image size when saving for web.

    Images (13 files) 270 KB
    http://www.fengjunk.com/templates/Original/images/upper_background2.jpg 63 KB
    http://www.fengjunk.com/images/homepage_3.jpg 47 KB
    http://www.fengjunk.com/images/homepage_1.jpg 46 KB
    http://www.fengjunk.com/images/homepage_2.jpg 44 KB
    http://www.fengjunk.com/templates/Original/images/feng_junk_logo.jpg 35 KB
    http://www.fengjunk.com/templates/Original/images/bottom_background2.jpg 19 KB
    http://www.fengjunk.com/templates/Original/images/extension_background.jpg 4 KB
    http://www.fengjunk.com/templates/Original/images/fj_search_background.jpg 4 KB
    http://www.fengjunk.com/images/loading.gif 3 KB
    http://www.fengjunk.com/templates/Original/images/prevlabel.gif 1 KB
    http://www.fengjunk.com/templates/Original/images/nextlabel.gif 1 KB
    http://www.fengjunk.com/favicon.ico 1 KB
    http://www.fengjunk.com/images/closelabel.gif 979 bytes

    You also might look into compressing your javascript files. Looks like the only compressed javascript files are the google ones. So I would definitely compress those javascript files. At least the ones over 10kb.

    Scripts (7 files) 111 KB (129 KB uncompressed)
    http://www.fengjunk.com/includes/javascript/prototype.js 46 KB
    http://www.fengjunk.com/includes/javascript/effects.js 31 KB
    http://www.fengjunk.com/includes/javascript/lightbox.js 23 KB
    http://www.google-analytics.com/urchin.js 6 KB (21 KB uncompressed)
    http://www.fengjunk.com/includes/javascript/scriptaculous.js?load=effects 2 KB
    http://www.googleadservices.com/pagead/conversion.js 1 KB (5 KB uncompressed)
    http://www.fengjunk.com/ieupdate.js 145 bytes

    I hope this helps.
    • CommentAuthorverb
    • CommentTimeAug 4th 2007
     permalink
    How do you actually compress javascript files? I didn’t know it was possible…
  5.  permalink
    I've used Dean Edwards' Packer a couple of times and it seems to get the job done.
    •  
      CommentAuthorjernigani
    • CommentTimeAug 4th 2007
     permalink
    • CommentAuthorvaleeum
    • CommentTimeAug 4th 2007
     permalink
    Thank you all for your wisdom! I am planning to implement these recommendations within the next week.
  8.  permalink
    You could also exchange Prototype, Scriptaculous and Lightbox for jQuery and Thickbox. That would more than halve your javascript right there. Another thing to look into is server-side gzipping all html (php), css and js.

    I didn't know Fireworks had a better compression engine, so thanks for that tip folks.
  9.  permalink
    When working on loading time optimization I find it useful to use the online Web Page Analyzer tool. It will tell you the exact load time of the page.
    • CommentAuthorvaleeum
    • CommentTimeAug 6th 2007
     permalink
    Ok, I went ahead and removed the unnecessary javascript files from the web pages that didnt need them (i only needed them for only two pages). And for the ones that did need them, I used bananascript (http://www.bananascript.com/) to compress them down from approx 100Kb to just about 27Kb. I used the Packer tool listed above, however, it didnt seem to play well with prototype.js. I guess that is a known bug for Packer.

    Also, thanks to the tip mentioned above, I've recompressing some of the images with Fireworks to save an additional 40Kb-ish.
  11.  permalink
    It is actually a known bug with Prototype, not packer. Prototype (traditionally) does not conform to "Lint" which states certain rules that JavaScript should conform to so that it plays well with others. As an alternative, you could compress Prototype with jsMin here: http://fmarcia.info/jsmin/test.html

    An additional tip is to look into server-side gzipping of text files such as html, css and js.
  12.  permalink
    CSS or JS compression.
    It doesn't really compress anything just removing extra line from a file
    then less lines in file then smaller the file is and any formatting you might use.
    P.S keep one copy locally because when you change file this way it's very hard to read it.

    Best, DS

1 to 12 of 12

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page