Reduce number of requests for static resources required for a page view

[iprunache]

Why

To reduce the time needed to load and render a country page which now takes 6-7 seconds to load.

What

• consider loading 3rd party scripts from external hosting like CDN instead of loading them from the app server. Most libraries are available on CDNs.
• concatenate application scripts into a single script file or into one file per page type using tools like UglifyJS 2
• add caching headers to static resources so that the browser can cache them locally. This would require adding versioning to static resources that change often. This is already implemented, I missed that.
• consider using an Nginx instance to serve static content instead of doing it from the nodejs application.

Notes

Case study for Nigeria: http://new-www.resourceprojects.org/country/NG.

It takes at least 243 HTTP requests to fully render that page:

Out of those, 145 are JS scripts, 30-40 of which are 3rd party libraries.

If we consider that a browser can only do about 5 concurrent requests to a single domain and that a static resource requests takes on average 150ms to complete(protocol round trip time from client to sever + short time for download) we can make this computation:

240 requests / 5 concurrent request = 48 request cycles
48 request cycles * 150ms per request = 7200ms load time

This is just a back of the envelope computation but it's clear that without reducing the requests number we cannot drop page load time under 6-7 seconds.

Here's a good resource describing this same issue: http://sgdev-blog.blogspot.ro/2014/01/maximum-concurrent-connection-to-same.html .