3

A little while back, one of the junior developers at our company was tasked with creating a website for users to enter timesheets offsite. Mostly this is used for staff that reside offshore and have limited bandwidth (it's satellite internet, so we're already looking at a 500ms - 600ms response time, typically with only 10KB/s or less, including 10% - 20% intermittent packet loss).
So it's a challenging situation...

Recently I've been tasked with helping the junior to improve the speed and functionality of the website, mostly for my own benefit, since I'm usually a desktop dev. One thing I've noticed is that the website is using MultiView and I'm wondering if that's the best approach. I can see the reasoning; download the entire website once, then just make queries back and forth, showing/hiding the various views as necessary. Except it doesn't seem to work as smoothly as that.

95% of operations required a run by the server; i.e. add a new timesheet - need to tell the server, which in turn creates a new entry in the database. When the server is done, it seems to cause the client to download the entire webpage again, which is obviously counter productive.

So my question(s) are as follows;
Is this the expected behaviour, given the above situation? i.e. Should the entire webpage be getting re-downloaded once the server has completed it's actions? If so, is this the best approach for the situation? Would it be better to have smaller, individual pages for the various features (timesheets/leave/etc.)?

I know this is probably a bit opinion based, but any ideas or assistance is greatly appreciated; for both our benefits.

Trent
  • 1,595
  • 15
  • 37

4 Answers4

6

Going from memory, Multiview only renders one of the views, not all of them, but since you mention the Multiview, that tells me you are using the older WebForms technology which often carries large amounts of overhead saving/restoring state. You can try and optimize that, especially if you are using some kind of grid control.

A better approach may be to ditch WebForms and switch to a newer technology like MVC. Rewrite the application to use AJAX with a webservice that returns JSON whenever possible to reduce the amount of data that needs to be sent to and from the server. Using MVC will also reduce the number of resources required for a page load (No resource.axd, etc) which will help page load times, especially over high latency links.

  • Make sure the server is set to compress dynamic pages with GZIP.
  • Compress and minify your javascript and CSS.
  • Don't use inline styles (the style attribute) in your HTML (use classes or IDs+children selectors) to reduce HTMLsize.
  • Bundle all your javascript and CSS.
  • Sprite your images in CSS where possible.
  • Run your images through a good image optimizer like http://kraken.io
  • Make sure you are caching whatever you can, and the cache duration is set properly.
  • Minify your HTML.
  • Stop using WebForms (or watch your page state, and control state very closely)
  • Check into some of the SPA architectures out there -- you may be able to make the whole application "offline-able" with the exception of the calls to get/update/create data.

Ultimately, each page should only require 1 HTML file, 1 CSS file, 1 Javascript file, and 1 sprite sheet on the first page hit, and then every page after that should only require a single HTML file.

You might also want to look into using a client side library like angular or knockout to handle rendering views. This can reduce the amount of traffic that needs to be sent (although it likely will increase the number of requests by one).

Robert McKee
  • 21,305
  • 1
  • 43
  • 57
3

I think the best bet is a SPA (Single Page App) with Angularjs. Done right it greatly reduces the number of http requests. Navigation does not cause entire page reload in any case. Javascript files, css files etc, are loaded just one time at app load time. Once the app is loaded in the browser, the traffic is mainly sending JSON back and forth.

There are some tricks you should apply to reduce app load time:

  • Bundle javascript files into just one minified javascript file.
  • Bundle css files into just one css file.
  • Levearage http cache. You can use file versioning combined with MaxAge http header, so the browser does not even ask the server if the file has changed.

Some tools to help:

Steve Drake
  • 1,968
  • 2
  • 19
  • 41
Jesús López
  • 8,338
  • 7
  • 40
  • 66
  • I was just writing the very same answer :) – Steve Drake May 01 '15 at 07:35
  • If you want to edit it to add your thoughts I will convert it to wiki. – Jesús López May 01 '15 at 07:36
  • to add to this, use Fiddler to see what's going on, don't build up forms on your server WITH data, GET the form structure with one request and the form data with another. This makes more parts cacheable. Your goal would be navigate to the site and just see JSON requests in fiddler everything else would be cached. You can also make your JavaScript code retry etc. – Steve Drake May 01 '15 at 07:37
  • I think you should add that by sending the data via ajax/angular you can handle lost connections, resending data etc in your own way, rather than the usualy clunky browser 'do you want to resubmit form data' kind of thing – Ewan May 01 '15 at 07:45
  • Yes, you can implement retry logic in Angular using $http interceptor http://stackoverflow.com/questions/20075674/retry-request-with-http-interceptor – Jesús López May 01 '15 at 07:50
1

To my understanding, ajax would be the best choice for you. If you want to access server 95% of times and reload the page with the new elements then the performance would hamper.
So instead of doing this make partial reloading with Ajax or Jquery. There are plenty of functionality available with jquery which would use ajax and reload specific portion of the webpage instead of whole page. It would increse the performance a lot.
One more thing I would like to add is that the response packet coming from server might be huge chunk. So instead of directly throwing the response from the server, implement GZip functionality in the website. It would compress the size of the data packet and the page would load/reload much faster.
Other than these, place your CSS and JS code inside some .css and .js file instead of placing it inside the page itself(and make sure to use it maximum time from all the pages). Browser would make a cache version of those files and reuse it instead of download it every time you want to connect to the server.

Abhinab Kanrar
  • 1,532
  • 2
  • 20
  • 46
0

I believe that you have already figured out what's wrong. No Multiview is not good if it is implemented as is without tweaks. If your website uses viewstate and on top of that you have the multiview implemented, then it is going to be a costly affair.

Here are your options. To use most out of the code, I would recommend to convert your methods HTTP GET / POST methods which can be then called separately from the needed actions in the html.

  1. Don't re-render the entire page, but render the content which changes on menu action.
  2. Change the non-changing part of your page / site to static content and apply compression on the static contents.
  3. Enable page caching.
  4. Cache the data offline wherever possible. (Remember it comes with a overhead of syncing data).

If you are considering a revamp give a thought about HTML 5 offline features.

Jebarson Jebamony
  • 531
  • 5
  • 10