Originally posted: Blog

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 on the first load. 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.

This would save considerable amount of data-usage

Architecture

(Open in new tab)

Live demo: Node rendered Angular

Note: The Live demo is not under CDN so comparing it with Facebook or any other established websites would be pointless. I will be hosting a comparative website on GitHub or EC2 sometime soon, so until then kindly bear this note.

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]

Kindly share your feedback so that I can improve this article. Adios.