Practical and useful tips on speeding up your web applications

Speed of a website matters !

You’re using a web application, it takes 5-10 sec to load each page or to complete ajax requests. How does it feels ? Awful, isnt’ it ? You will lose up your patience and will switch to a suitable alternative.

Similarly, you own a SaaS application with a good user interface and many useful functionalities. A end-user sign-up and found it to be slow enough for his use. Every page keeps on loading for 5-10 seconds.
Will she come back again to your ? Will she upgrade her package from free to a paid member ?

This is why speed of a website matters.

If your SaaS application have few thousand users, a well optimized codebase with a standard hardware support will easily be able to server them. And if the app have a large user base ( which is good 🙂 ) then scaling the application is the choice.

But the very first step towards speeding of your application is optimized codebase. For this you need a developer having a good understanding of web technologies and memory & time complexities.

A web application involves:

• Server-side language(s)
• Client side language(s),
• Relational or non-relational database
• Different apis and tools are used as per the requirement.

all logically combined and hosted in a web server.

Choosing good server-side language (like PHP, Python and related frameworks), frontend scripting language (like JavaScript, jQuery, AngularJS), database (MySQL, MSSQL, MongoDB) doesn’t mean an application will run fast. Although this matter but majority of it depends on the expertise of a Developer to leverage the power of these technology and make the application fast & secure.

Here in this article, I have explained some basic things which must be taken care in order to speed up an application and never lose a user just because it is slow.

Optimizing logic:

A web application is all about many different logic encoded using a scripting language. Writing this logic using an optimized algorithm makes a noticeable difference in response time.
For example if a simple problem which can be done in one ‘for’ loop is done using 2 ‘for’ loops, it increase the execution time by N times. So if one ‘for’ loop takes 10 ms, 2 for loop will take 10*10 ms = 100ms. Imagine it for a large data-set.

• Always try to minimize the number of loops.
• Never perform time-consuming operation inside a loop, create a background process or use Queue mechanism.
• Avoid (sometime it is unavoidable) SQL queries inside a loop.
• Avoid multiple redirects inside applications.

Optimizing Database operations:

Almost all applications are database drive. So database is an important part of any web application.

• For all fields which involves searching and sorting; make sure it is indexed.
• Always optimize the query to take advantage of database indexing.
  For example:
  
  MySQL

  SELECT * FROM users WHERE score/25 = 4 (not using index for score) SELECT * FROM users WHERE score = 100 (uses index if created for score)

  1 2 3

  SELECT * FROM users WHERE score/25 = 4 (not using index for score)   SELECT * FROM users WHERE score = 100 (uses index if created for score)

• Avoid database operation inside a loop.
• Using of ORM provided by framework is good. But sometimes they perform multiple queries to retrieve data, which can be done in a single query. So use it with a caution.
• Do not extensively normalize a database, sometime de-normalization is good as it reduces the table join but with cost of extra space.
• And there are many other ways of properly using a DB, using correct data type for fields, choose a right database engine, avoid sub-queries within a query, avoid IN operation.

Handling static files:

Static files means JavaScript, css, images, fonts. The web client (browser) needs to download these files over multiple round-trip HTTP requests to show the page properly to the visitor. Large size of this files means more download and waiting time and also data cost to visitor. So these files must be optimized for overall optimizing of application.

• Leverage browser caching: Whenever an application loads for the first time it fetches all the static files present in the page. And if the files are not cached it fetches the files again in subsequent page requests. If the files are cached then the browser will not need to fetch the file again from server, it can simply get it from local cache. So it is better to cache these files by appending a version number to it.
• Minify JS & CSS: Always use a minifier to minimize the size and combine these files. This reduces the download size of these files by multi-fold and reduce the number of http request send to server.
• Always include JS and CSS at the end of page or use async script. Whenever browser encounters the static files it stops and download the file before building the complete dom structure. Adding it at the end allows browser to build a dom structure present some view to user and then download the js / css files.
• Use content delivery network ( CDN ) for providing the data from nearby server to user.
• Lazy loading of images: Lazy loading defer the loading of images after the page is loaded. This decreases the waiting time for loading of images. Using lazy loading is a good options for application having multiple images in a page.
• You can get an insight about your static file here: https://developers.google.com/speed/pagespeed/insights/

Handling time-consuming operation:

Web application involves sending of bulk emails, PDF generation, video format conversion, and many other operation. Some of these operation takes noticeable amount of time to complete.

So, if this operation are performed on the same request of user, user will have to wait until these operations are completed. Which in-turn increases the waiting time of user.

• All these operation can be performed as a background task which gets initiated when user requests for it.
• Queue can also be used to queue the tasks.
• Or  Cron job can be scheduled which perform these task after every specified time interval.

Scaling of web application:

The above disused points are very first step which should be taken care in your applications by the developer. While overtime as the application gets popular and user base increases, you will need to scale the application using advance technology to server millions of request. Scaling involves horizontal scaling and vertical scaling (wiki: https://en.wikipedia.org/wiki/Scalability#Horizontal_and_vertical_scaling). Some common of these scaling techniques are:

• Cache using drives like Memcached, Redis, varnish
• Multiple servers and Load balancer.
• Master-Slave database architecture to split database write and read operation to master & slave respectively and many more.

This are some of the points which I learnt over my years of experience as a web development across multiple projects. Feel free to add some more useful tips.

I request you to try some of the tips mentioned above . Please do come back and write how well it went, will be glad to hear.

Thanks !