SmartGWT download speed

pbackx · #1 16th Dec 2008, 09:15

I have created a small application, but have now run into a major problem.

To load the application, the browser needs to download about 3MB of data, which I think is a bit much for the few components I am using.

Is there a way to decrease the download size?
Can I have a loading screen (I noticed it is possible in the plain SmartClient library, but how to I do this in the GWT version?)

btw, the application is at http://www.thecouchtv.com/cablepicker/

Thanks a lot,
Peter

sjardine · #2 16th Dec 2008, 09:44

The first thing I would do is make sure the content is getting compressed prior to sending. A basic gzip servlet filter is all you need.

mike.art1 · #3 16th Dec 2008, 10:15

Nice app.
Using gzip and expires header should reduce the load on the server. Assuming you are using apache webserver you can configure these directives.

The loading screen is possible. Have a look at the showcase example.

Code:

<html>
<head>
    <title>SmartGWT Showcase</title>
    <!--CSS for loading message at application Startup-->
    <style type="text/css">
        body { overflow:hidden }
        #loading {
            border: 1px solid #ccc;
            position: absolute;
            left: 45%;
            top: 40%;
            padding: 2px;
            z-index: 20001;
            height: auto;
        }

        #loading a {
            color: #225588;
        }

        #loading .loadingIndicator {
            background: white;
            font: bold 13px tahoma, arial, helvetica;
            padding: 10px;
            margin: 0;
            height: auto;
            color: #444;
        }

        #loadingMsg {
            font: normal 10px arial, tahoma, sans-serif;
        }
    </style>
    <link rel="stylesheet" href="Showcase.css">
    <link rel="stylesheet" href="css/CssStylesSample.css">
</head>
<body>
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

<!--add loading indicator while the app is being loaded-->
<div id="loadingWrapper">
<div id="loading">
    <div class="loadingIndicator">
        <!--<img src="images/pieces/48/cube_green.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>SmartGWT<br/>-->
        <img src="images/loading.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>SmartGWT<br/>
        <span id="loadingMsg">Loading styles and images...</span></div>
</div>
</div>
    <script>var isomorphicDir = "js/sc/"</script>


<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Core API...';</script>

<!--include the SC Core API-->
<script src=js/sc/modules/ISC_Core.js?isc_version=7.0beta.js></script>

<!--include SmartClient -->
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading UI Components...';</script>
<script src=js/sc/modules/ISC_Foundation.js?isc_version=7.0beta.js></script>
<script src=js/sc/modules/ISC_Containers.js?isc_version=7.0beta.js></script>
<script src=js/sc/modules/ISC_Grids.js?isc_version=7.0beta.js></script>
<script src=js/sc/modules/ISC_Forms.js?isc_version=7.0beta.js></script>
<script src=js/sc/modules/ISC_RichTextEditor.js?isc_version=7.0beta.js></script>
<script src=js/sc/modules/ISC_Calendar.js?isc_version=7.0beta.js></script>
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Data API...';</script>
<script src=js/sc/modules/ISC_DataBinding.js?isc_version=7.0beta.js></script>

<script>
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

// Determine what skin file to load
var currentSkin = readCookie('skin'); 
if (currentSkin == null) currentSkin = "SilverWave";
</script>

<!--load skin-->
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading skin...';</script>

<script type="text/javascript">
document.write("<"+"script src=js/sc/skins/" + currentSkin + "/load_skin.js?isc_version=7.0beta.js><"+"/script>");
</script>

<!--include the application JS-->
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading ~250 Samples<br>Please wait...';</script>
<script type="text/javascript" src="com.smartgwt.sample.showcase.Showcase.nocache.js"></script>


</body>
</html>

mike.art1 · #4 16th Dec 2008, 10:54

If you decide to declare the js files in the html make sure you use

<inherits name="com.smartgwt.SmartGwtNoScript"/>

in your module and in the html only include the js files you need. For example in your app these are not required.

<script src=js/sc/modules/ISC_Forms.js?isc_version=7.0beta.js></script>
<script src=js/sc/modules/ISC_RichTextEditor.js?isc_version=7.0beta.js></script>
<script src=js/sc/modules/ISC_Calendar.js?isc_version=7.0beta.js></script>

Also use yslow to find out the other bottle necks. I find that very useful

nlotz · #5 16th Dec 2008, 13:54

The suggestions Mike made should help a lot. Kudos.

I noticed the servers network connection is slow as molasses.
It takes me (Germany) more than 23 secs to download 790 kb.
That is about 35 kb/s !?

Isomorphic · #6 16th Dec 2008, 13:55

ongwt.com covered it, I think it's the "Slashdot effect" :)

pbackx · #7 19th Dec 2008, 05:01

Thank you all for the suggestions. I have already implemented the gzip suggestion, which has helped a lot.

I know the server isn't exactly speedy, but that's what I currently can afford :) I do think that 800kb is a bit much for such a small application, but I can understand that for larger applications, this is no longer a problem. Also, this means that, if I expand the application, the total size will remain almost constant from now on, so that's a good thing.

I will look into the loading screen next, this way the user at least gets a sense of progress. Now you have to look at a blank screen for a while.

Thanks again!

Isomorphic · #8 20th Dec 2008, 13:21

Hi pbackx - another quick tip - it looks like your page is definitely not using the Forms, Calendar or RichTextEditor modules, but they are being included. You might also be able to get rid of DataBinding (if you don't use a DataSource) and Containers (which is TabSets, Windows and the like).

yariv.snapir · #9 10th Jan 2009, 07:44

Please see some benchmark details - comparison with EXT-GWT

The SmartGWT showcase size is 3Mb whereas the EXT showcase is 2Mb

If you compare the sizes of the core javascript downloaded for each of the libraries (EXT/SMART) the results are as follows:

EXT - total core javascript size is about 500KB (ext-all.js) (you can compile a smaller library using only components you choose)
Smart - total size is larger:
ISC_Core – 455Kb
ISC_Foundation – 160Kb
ISC_Containers – 70Kb
ISC_Grids – 416Kb
ISC_Forms – 357Kb
ISC_DataBinding – 262Kb
ISC_Calander – 50Kb

Obviously you can load only those you want but still you will probably at least use grids, containers Core and Foundation which is together 1.1 Mb – this is still very large comparing to Ext.

We all use Zip filters obviously which makes actual network size:
Smart-All – 467Kb
Smart (Core, Foundation, Containers, Grid) – 270Kb
EXT-All – 136Kb

Assuming we download once and the content is cached, there is still the JS load time (syntactic parsing of javascript) which will happen for every page load, and there is a big noticeable difference.

Wrt CSS:
Core CSS file size for ext is 112Kb (ext-all.css) – it can be reduced depending on components used.
Core CSS size for a SmartClient skin is 50Kb
CSS makes much better zipping ratio then JS and much faster syntactic parsing time. So this is a negligible difference
Zip size for CSS is:
EXT-ALL – 13Kb
Smart-All – 8Kb

Summary:
Ext is definitely better from this perspective.

One more benchmark:
I installed both SmartGWT showcase and EXT-GWT explorer locally and simply opened it (as static HTML) – with no app-server…

EXT-GWT explorer loads twice as fast (4 sec) then the SmartGWT showcase (8 sec).

Yes, it’s not the same application but it is very similar:
Both applications load a static tree structure on the left pane and one initial tab on the right-side tab panel.
Everything is static, download times are minimal, most of the time is spent on parsing javascript and CSS (HTML is minimal) and creating the DOM tree.

I also compared the initial download times of both DEMO’s from the web. It’s not the same network path so it’s not a very valid comparison,
However, EXT-GWT explorer loaded in 15 sec whereas SmartGWT showcase in 27 seconds!

In favor of SmartGWT I can say that its internal design is better with the Data-binding and Data-sources. In most cases you will not need to use it but when you do, it’s better.

Question: Is there any ongoing effort to improve SmartGWT in this perspective?

Isomorphic · #10 10th Jan 2009, 11:54

yariv:

First understand, when it comes to the real-world performance of enterprise applications, SmartClient has a very dominant lead over Ext-GWT and others. Real users not only load but use applications :) The key factor in performance of enterprise applications - speaking across many industries and applications - is the number of server trips that require dynamic responses, in particular the number and severity of hits on the database. In this area - again real world performance - SmartClient has a dominant lead because of it's advanced data management architecture.

SmartClient is larger, and it is larger because an explicit tradeoff is being made to be more dynamic and do more work on the client-side. We are always tuning for size, and we do plan to make it easier to trim off components you aren't using at a finer granularity, but understand that we will never try to match Ext's current size because doing so would necessarily imply taking backward steps in functionality. Both libraries are equally compact and SmartClient simply delivers more. When SmartClient's feature set was more comparable to Ext, it was Ext's size. In a few years if Ext's feature set reaches where SmartClient was in 2008, it will be SmartClient's size from 2008.

Also, you somewhat touched on this, but your comparisons of the showcases are quite invalid. There are almost 6 times as many samples in the SmartGWT showcase, as well as several large datasets, and much, much more sophisticated functionality is demonstrated.

It is definitely difficult to do direct comparisons, but if you have an enterprise architect who is experienced in evaluating performance, they will quickly spot many features in SmartClient that make the result of the comparison a foregone conclusion for any complex, large data volume application.

Also not sure why you think this:

"In favor of SmartGWT I can say that its internal design is better with the Data-binding and Data-sources. In most cases you will not need to use it but when you do, it’s better."

Substantially all real-world SmartClient applications use SmartClient's data binding architecture, and such applications are deployed pervasively throughout the Fortune 500. If you are trying to do a comparison and have come to the conclusion that SmartClient's databinding doesn't apply in most cases - there's no way around it - you need to pretty much start over :)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search