SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard frank1's Avatar
    Join Date
    Oct 2005
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Prototype and Scriptaculous code size

    we was trying to implement an online code written in a site which uses framework of prototype and effect from Scriptaculous ..

    well ,we have that the size of prototype is atleast 70 kb (according to deleting unused things...) + effect.js from Scriptaculous is around 40 kb ...and css file is around 15kb

    so this is just a glider effect in one side of home page

    Still in this part of world the internet is not fast...(not all broadband ...) and dail up still exist...

    so those (just for one part of home page) is making around 135kb...which is big.....
    + there are contents and other js in home page...

    so how do people manage to use these prototype and Scriptaculous effects...
    is it just for broadband auidance..?
    if we continue that way the size of homepage will be more than 250kb which is quite big...like a flash file and will take lots of time to load....

    so does that mean that we cannot use those framework and prototype...?

    + many sites says that css files should be less than 30kb...js as low as possible....so what is way to keep these small...as use those....

    how do people manage these...any idea....
    yahoo has css file of around 150kb but i think they are able to manage thing bcoz of their distributed servers(served from nearer server..)
    but we cannot do that...

    any help

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Load the minimum code that you need before the body is rendered, and load the rest onload or as needed with ajax or new script and link elements.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You may want to look at using jquery instead which does very similar work but at a much smaller footprint of 15kb in size.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you load your JavaScript class libraries from the copy that Google make available then anyone who has already visited any web site that does the same will already have a copy of the JavaScript library cached.

    See http://code.google.com/apis/ajaxlibs/ to get Google hosted copies of
    * jQuery
    * jQuery UI
    * Prototype
    * script.aculo.us
    * MooTools
    * Dojo
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard frank1's Avatar
    Join Date
    Oct 2005
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are you trying to ask that if ...speed is my problem i should not use prototype and use jquery
    jquery seems to be 30kb which is around 40kb less than prototype...

    any way it is really difficult to access which are required codes and which are not need if you are not javascript coder...

    how the way whats the ideal size after which it is not considered for normal surfing...ie what may be max size of index page?...(ok can be any ...but in general how much?)

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    By outsourcing the delivery of your JavaScript library to Google you increase the chance that your visitors will already have the library cached on their computer and thus will not need to download it again. Most framework libraries by themselves are several times the ideal size for a web page so the ideal is where your visitor already has it cached so that it doesn't slow the loading of the rest of the page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    By outsourcing the delivery of your JavaScript library to Google you increase the chance that your visitors will already have the library cached on their computer and thus will not need to download it again. Most framework libraries by themselves are several times the ideal size for a web page so the ideal is where your visitor already has it cached so that it doesn't slow the loading of the rest of the page.
    ideal size for a web page being? Some of the multimedia sites I've had to make clock in at close to 1MB once all the flash and images are included, so I don't feel guilty at all dropping prototype into the mix. I try to keep my own project pages under 100K including prototype which is 10K once packed and compressed by my server-side javascript prep program. If you aren't compressing your outgoing javascripts you need to learn how. The Google library compresses it to 30K BTW.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    I try to keep my own project pages under 100K including prototype which is 10K once packed and compressed by my server-side javascript prep program. If you aren't compressing your outgoing javascripts you need to learn how. The Google library compresses it to 30K BTW.
    Well the ideal size is something under 100k since over half your potential visitors will have left by the time that much of the page has loaded. Of course if the page looks like it has loaded by then it doesn't really matter if it is still loading other things in the background.

    The exact size of the Google version doesn't matter if everyone starts using it as then those files will be cached on your visitors computer beforehand and the only overhead you have for the entire framework is the google load statement of just a few characters. A good way to reduce your effective page size by 10k (or 30k) for a lot of your visitors.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Wizard frank1's Avatar
    Join Date
    Oct 2005
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    ...my own project pages under 100K including prototype which is 10K once packed and compressed by my server-side javascript prep program. If you aren't compressing your outgoing javascripts you need to learn how. The Google library compresses it to 30K BTW.

    OK thanks
    ok we also feel that 100kb is ideal for the normal opening ...and if it made to download progessively without much nested table then must of the time it works fine...

    any way nice to hear about the javascript compression...
    we will have a look into it...any way any links to get started would be great.


    Is is real compression or just pseudo compression?
    How much difference does it make?
    Are there any limitations doing this way..?

    is there any way to know which lines of the prototype file is required and which are option for the given script....
    can we just go by function name...?
    are there any basic prototype file...(lines without which prototype could not be used...)
    we know we need to learn whole prototype file to get all idea...but not being total java scripter ...can we get any hints...tips and tricks?


    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •