Loading web-apps faster

by loading framework only for authorized users

Story telling

The homepage is mostly about displaying static data / HTML and yet most (if not all) of the framework based modern websites exhaustively load all their packages, exposing all their “minified” code.

Let’s face it — an user who doesn’t want to get into the web application is still being charged some data transfer and page-load time unnecessarily.

There are few good examples where the web applications doesn’t even need a homepage and straight away they render the Auth screen. For example Facebook, Instagram, Twitter.

All that was needed was to display the SignIn / SignUp forms without any introduction of what the product / company is all about.

Stats

Page Load (with ~ 50-100 Mbps broadband)

Facebook: ~3 seconds, ~8MB

Twitter: ~2 seconds, ~ 2.6 MB

Instagram: ~3 seconds, ~ 2.6 MB

Our approach

We will render plain HTML along with little bit of JS and CSS. Since the page-size will be smaller, the data transfer will be quicker so the page loads faster.

As we don’t need Angular for the Auth process, we will be loading them at the later stage when we really need them to handle the dynamic data and to handle the Single Page Application stuffs.

Rough architecture of our model

This would save considerable amount of data-usage

Pros

  • Faster page load
  • Less data consumption (Saves the Planet)
  • [That’s all I can think of with my limited knowledge]

Cons

  • [I couldn’t think of anything at this moment with my limited knowledge]

Do let me know if my article needs correction / improvement. TIA.

learner. seeker.