Wednesday, November 5, 2014

Why GWT loads slow and tips to load GWT app faster.

Why GWT loads very slow for first time:


GWT uses perfect caching technique. The initial loading time is really depends on many factors.

When user/browser requests for the very first time, all the resources related to the page loads. That takes few seconds to load and really depends on your internet speed. Once the complete page loaded and if you are requesting new page/ reloading the current page, all the resources won't load this time.


Coming to the part that rebuilding and recompiling for each request is wrong. In Gwt there are permutations which are specific to each browser. Every major browser have it's own permutation. If you request from Mozilla for example, permutations related to Mozilla loads. These permutations actually generates at compile time of project which you done in your IDE before deploying the project.

Once the request hit the browser, for very first time these all files related to the specific permutation loads into browser and ***cached*** in browser. Form next time on words you won't see any new files loading in to browser (you can see that using your firebug). That way caching works. Below shows steps to load GWT app faster.

Other than the above behavior of GWT, from your side also more damage can happen. For ex, Adding more code in onModuleLoad() method, loading your all data at first shot, poor layout design, lastly wrong usage of Java classes.


How to load GWT app faster: 


The Official Docs came up with some bullet points

1) Look into Code Splitting. Break your service requests in to chunks.

2) As much as you can reduce the load in onModuleLoad(),That's greatly helps you to bring the app to client much faster. 

3) Show minimal data. Use pagination techniques. Never load all the records in a grid/table for first time.

4) Lazily load your Widgets. That increases DOM performance and DOM loading time.

5) Analyze Compile Time Reports helps you greatly where you are digging too much into Object.

6) Enable the Gzip for your server,Which compresses the data in Gzip format to client. That reduces the page load.

7) Learn standard java coding techniques(respective to GWT-RPC) while coding. Use an ArrayLists instead of Lists, HashMap's instead of Map's then GWT compiler does not need to compile the code for all possible implementations of the List,Map's etc. Use StringBuilders instead of String's. ..etc

8) Enable compression.

9) Remove unused CSS.

10) Minify JavaScript, CSS, HTML.

11) Deferred loading of JavaScript.

12) Optimize images.

12) Serve scaled images.

13) Serve resources from a consistent URL.
And some more techniques here Google I/O presentation by Ray Rayan

After you started doing the above techniques, you can constantly check the difference in page loading by install some plugin into browser like

For Chrome : PageSpeed Insights (by Google)

Note: Using above techniques I increased my page speed upto 60-70%. Others, please come up with your own techniques to share with world. 

3 comments: