Are Webpages taking more time to load ? Here are the 5 Possible Fixes.

                      Better user experience demands faster web app, there are variety of reasons what would make your web app slower. Webapps are mainly split into Client side and Server side components, where data must be transmited from server to client. It is required to understand the bottlenecks in this process to improve the overall performance of app.  Webapps can be developed with diversified technology stack, so one should wisely chose these technology stack that well suits their business prior implementing them.  

In this blog we will be highlighting few generic reasons that make any web app slower and discussing its fixes.

1. Optimize Network Latency 

Network Latency is the amount of time host server takes to receive and process the page object request from its client (user). This time depends on how far the user is from the host server. we can optimize this network latency by, 

1. App client should support concurrent requests to host server upon page load.
2. Optimize client, server and database roundtrips by storing frequently accessed contents in the browser cache. 
3. Bringing host servers close to client. 
4. Avoid MetaRefresh and Redirects to other websites. 
5. Reusing connections without closing connections while responding to a request. 

Caching greatly help optimize Network Latencies. there are various caching techniques like, 

1. Byte Code Cache - it is about caching source code files, if it won't change frequently.  This avoids interpreting every time. Certain programming language like Python, PHP supports this. (More on how PHP cache in windows found here)
2. Application Cache - MemCache, Gibson or Redis Cache framework could be used to implement application cache. This cache would be specific to any application and greatly improves performance. 
3. Http Cache - This is more of using Http Cache headers like Etag and Cache-control and telling browser to use this cache instead of reretrieving from the server (have to be careful to avoid browser using stale content. )
4. Proxy Cache - This is more of maintaining another server which hold replica of webpages requested by the user, also called as reverse proxy. this trims the request sent to main server and avoids sending detailed request to main server everytime, which greatly improves the performance. 

Network latencies can be measured via browser's profiling tools, where one can trace network calls that are more expensive and figure out how it could be optimized. Profiling at the backend would be different and depends on the technology stack it was designed. (See this for open source profiling tools in Java. )

Further reading on Network Latencies found here

2. Optimize Media Usage while loading a web page. 

 Images are the most utilized resource, on average a website downloading 58 images.

• Avoid downloading too many images, keeping their number to maximum 20-30 due to page load time.
• Use image sprites to combine multiple images into one. This technique reduces the number of network connections, and the number of bytes downloaded and GPU cycles.
• Create image sprites by hand because tools may leave large empty spaces leading to larger downloads and more GPU cycles.
• Use PNG: best compromise between download size, decoding time, compatibility, and compression rate. JPEG may be used for photographs.
• Use the native image resolution to avoid unnecessary bytes download and CPU processing for scaling.
• Replace images with CSS3 gradients when possible.
• Replace images with CSS3 border radius when possible.
• Use CSS3 transforms to create move, rotate or skew effects.
• Use Data URI for small single images. It saves an image download.
• Avoid complex SVGs which require longer downloads and processing.
• Specify an image preview when including an HTML5. The browser won’t have to download the entire video to figure out what the preview image should be.
• Use HTML5 instead of Flash, Silverlight, or QuickTime. HTML5 is faster and the plug-in runtime takes system resources.
• Proactively download rich media asynchronously and keep it in the app cache.

3.  Leverage Java Script for Fastness

• Use Integers when doing math operations in JavaScript, if possible. Floating point operations take much longer in JavaScript than their corresponding integer operations. Convert floating points into integers with Math.floor and Math.ceil, especially for computationally intensive operations.
• Minify JavaScript code for smaller downloads and better runtime performance.
• Initialize JS on demand. Load JS dynamically when needed.
• Minimize DOM interactions by caching variable such as document, body, etc.
• Use the built-in DOM code such as element.firstChild or node.nextSibling. They are highly optimized, better than what a third party library might provide.
• Use querySelectorAll for accessing a large number of DOM elements.
• Use .innerHTML to construct dynamic pages.
• Batch markup changes.
• Maintain a Small and Healthy DOM – maximum 1,000 elements.
• JSON is faster than XML.
• Use the browser’s JSON native methods.
• Don’t abuse the usage of regular expressions.

4. Minimize bytes downloaded while loading a web page

It is very important to consider optimizing number of bytes downloaded during web page load. On an average, webpage downloads around 800 Kb data out of which around 500 Kb of data are images 128 Kb for scripts and rest is flash data. 

1. Requesting Gzipped content from the server. 
2. Leveraging HTML 5 App caching discussed above would greatly help downloading minimal data from the server. This cache will be automatically updated with new resources upon new application version. 
3. Server responding with expired field in its response whenever possible would greatly help in caching them. 
   
4. Caching data upon request for a specific interval of time because most data may not change for a fixed interval of time. this will also improve performance greatly. 
5. Leveraging conditional requests like If Modified Since field of the request. 
6. Caching resources of a webpage on local cache like browser cache would also greatly help. 

5. Scaling app horizontally. 

Web applications should be horizontally scalable meaning, it should have the ability to perform the same even when number of users grow significantly.  Horizontal scaling can be acheived by deploying same application across multiple machines on the cluster, should be monitored by a load balancer so the performance of the app is never compromized. Horizontal scaling may not be fully applicable for certain scenarios mentioned here, but it should be considered in areas possible. 

Conclusion

It is too important not to overthink about the right architectures in the initial phases of web app development. I believe  above 5 fixes impact more towards making web app faster. 

Thanks for your time reading this post. 

Further Reading

1. How to optimize your apps with Java
2. How to make your Single page webapp faster