Improving the Application Performance, especially the load time, is something allSingle Page Application (SPA) developers have hanging over their head, whether from the beginning of development, or as a last minute need. The initial load of a Single Page Application is a very critical thing that affects the User Experience, so it is something that must be paid special attention to.
There are three major parts that affect the load time and thus affect the initial application performance, and we shall go through them in order, and how to potentially improve it:
The Initial Connection
Location of Server
The connection from the client to the server and the transfer of data from there on can consume significant amount of time. The location of server contributes majorly to the application performance. For example, if your server is in the US while your audience is in India, then this may cause slow loading as communicating with the server can take up lot of time. Hosting the server close to your target audience (and re-routing using a load balancer) is always a good strategy.
For Large Applications
In case of Large Application, loading all the files at once can lead to significant lag in initial loading of the website. When the application JS can spill over to a few MB of data, the recommended way to handle such a scenario is to load files lazily as and when they are required, rather than loading all the files upfront.
Payload over the wire
Using gzip encoding on the server side will reduce the transmission size of files by around 30% which will help in reducing the application load time. Enabling this is usually as simple as toggling a flag on the server.
Number of Parallel Requests
Browsers have a limitation on the number of parallel requests it can make to any given domain. So if you are serving individual files, then this affect application load time, as the browser will load the files in chunks of 6 – 8, depending on the browser. This will block future loads until the first set of requests finish. The recommended method is to concatenate files into single file when possible, or load files from a separate domain or from CDNs.
Using CDN (Content Delivery Network) will significantly improve the application load time. CDN’s are generally used to load static files for an application. CDN’s allow your files to be located closer to the end user, and thus serve files extremely fast. Using shared CDN’s (like Google’s Hosted Libraries) for serving common third party libraries like jQuery, AngularJS can further reduce the number of parallel requests to your domain, as well as leverage already cached resources on the browser.