Skip to main content

max size of Minify/Combining JS Files



I'm interested what is max size of Minify/Combining of one file. So I have a multiple js files and I find I need to make around 2-3 portion of files by 3-5 files.




Comments

  1. There is really no hard, golden rule here. Typically, you want to make a page load with as few HTTP requests as possible. However the Ultimate goal is to make a page load as fast as possible. While reducing request count is key, it is not the only factor. For example, if you had a page with one 100k js file, no css, no images, no other requests. That page will load more quickly in most modern browsers if the page had 4 25k js requests because the 4 requests can be parallelized accross 4 connections. However, your typical web page has 30 to 100 requests and these will load much faster by combining files because most browsers are limited to 6 connections per host and there is latency involved in opening new connections as well as blocking issues with javascript and css depending on browser type where no other connections will be initiated until the js or css is loaded. This can also depend on if these resources are in the head or not.

    So it all depends on your page and your target browsers. Personally, I use 50k as a max size for a single css or js. This admittedly is not extremely scientific. Its a nice round number and one that I find accomodates several typical css or js files and is not so big that it is prohibitive.

    ReplyDelete
  2. Max size is maximum of largest request

    eq

    index 3KB
    CSS 10KB
    jquery 32Kb


    Best size is about ~14KB = MTU + headers

    eq

    CSS 16Kb - 172ms
    JS 32Kb - 359ms
    Js 17KB - 281ms
    JS 15,8KB - 250ms
    ga.js 13KB - 109ms


    Apache not compress deflate file greeter that 290KB

    Conclusion
    If you had 1 JS file about 32Kb

    * Download this file: ~359ms


    IF you had 2 JS file for 15Kb

    * Download this 2 file: ~259ms

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

Is it possible to have IF statement in an Echo statement in PHP

Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.