inapp /Technology/Guidelines for Performance Optimization of Web Application

Guidelines for Performance Optimization of Web Application

October 27, 2017

11:03 am

Application performance can be defined in terms of response time ( How fast does the application respond under peak load), resource usage (How much of resources viz. CPU, memory, network does the application use), and consistency (Does the application behave consistently over time, across browsers). An average user has no patience for websites or web application that takes too long to load. According to a study by Kissmetrics, a 0.1 sec delay in page load time of an application will cause 7% loss in conversions, 11% decrease in page visits, and 16% decrease in customer satisfaction. In dollar terms, this means that if the site typically earns $100,000 a day, this year it could lose $2.5 million in sales. Similarly, a study by FastCompany shows that an increase of every 0.1-second load time of Amazon decreases its sales by 1% and increasing page load time from 0.4 seconds to 0.9 seconds in Google decreases its traffic and ad revenues by 20%.

A better and fast performing site or application will have better user experience, repeated site visits, will be indexed faster by search engines, will appear on top of SERPs which in turn leads to increased revenue. Several factors can affect application performance, but some of the most common ones are

  • Rich and interactive UI with too many plugins, images or animations, application complexity, technology & framework, data handling mechanism, no of concurrent users etc.
  • The poorly optimized code causing potential bugs, performance & security issues, code complexity, and technical debts.
  • Inefficient database design affecting the application in production
  • Incorrect and insufficient environment configuration while hosting

Steps to Improve Application Performance

Here we have categorized the steps for improving web application performance into 4 sections – 1)Application Design Optimization 2) Application UI Optimization 3) Database Optimization 4) General Recommendations

1. Application Design Optimizations

  • Technology & Framework – Choose technology and framework that is appropriate for your application functionality.
  • No of concurrent users – If there are concurrent users using the application, the third party controls chosen should be able to handle the load, else it can cause a performance issue.
  • Data Handling Mechanism – Use proper db, caching etc. to make data loading on demand and on mobiles display required data only.
  • Hosting Server – Check for the deployment environment, load balancer, database partitioning, and use orchestration tools.
  • Optimized code – Always do manual code review, peer review & automated code review. Avoid writing unwanted loops, use serialization techniques, make use of asynchronous calls, use service brokers in SQL, use reusable code and use JavaScript appropriately.

2. Application UI Optimizations

  • Simple and Lightweight – Make the application simple and lightweight by streamlining the number of elements on the page, using partial rendering, merging all JS & CSS, and minifying using YUI compressor, codekit or JavaScript minifier. This will improve the page speed.
  • Optimize images – Keep the images of the application as small as possible since oversized images take longer to load. Crop the images to the correct size, reduce color and remove comments from images.
  • Enable Caching – Enabling browser cache is crucial for application since it will store the page visited and next time will load the page without sending another HTTP request to the server.

3. Database Optimization

  • Rewrite the queries – Rewrite the queries using looping queries, picking only needed columns and filtering rows correctly and using indexes. Also, can use ORM tools.
  • Change indexing strategy – Change the indexing strategy if a non-selective index has been picked while execution and use index hints.
  • Use an external cache – Use of an external cache can reduce the database load.

4. General Recommendations

  • Monitor & maintain page performance, web application speed, application performance management, etc. using various tools.
  • Use partial-page-rendering.
  • Minimize amount of data requested per request
  • Maximizing usage of client-side components wherever possible
  • Avoid 3rd party plugins unless absolutely required.
  • Keep the 3rd party scripts at the bottom of the page and load on demand
  • Encourage usage of CSS scripts
  • Avoid iframes and redirects to the best extent possible
  • Introduce caching at server side, database layer, and other possible integration layers
  • Conduct usability studies and understand expectations of end user