Web Programming and Applications

Lecture 10 -
Performance and Scalability

Dr Steven Halim

Use this or this to check the performance of your web app


Website Performance

Good website (application) loads faster, ranks higher in (many) search engines, attracts more (new) visitors, and retains more (returning) visitors

Website Scalability (1)

Website (application) scalability is related to its performance

After we deal with the performance question, hopefully we are then forced to answer the scalability question:

Does it still perform well when there are more (and more) concurrent users?

Website Scalability (2)

Typically, many web application performance drops with more users as illustrated with plot like this

Improving Website (app) Performance

Built-in Stopwatch (1)

The Network tab of Google Chrome Developer tool is a "built-in stopwatch" to measure website performance

You can view the timeline of events during page load in waterfall view) that can reveal potential areas of improvements

Built-in Stopwatch (2)

You can also use the "simulated network" drop down list to "simulate" the effect of "slower network" towards your web application performance

Tips for Faster Web App

In the next few slides, we have a compilation of several known techniques on how to improve the speed of your website (app)

This list is certainly not exhaustive and will continually be improved over time

  1. Use less or smaller images

    If you really need to use images, utilize appropriate compression techniques, e.g. JPG (lossy), PNG (lossless), SVG (smaller and scalable, good for simple logo), etc

    Do not test your web application's visitors with gigantic images like this exaggerated example

  1. If we need to use lots of small (and usually related) cliparts, consider using image sprites to minimize # of HTTP requests/responses, read this external article for more details

    Note that Bootstrap does something similar with its Glyphicons (fonts, SVG, CSS rules)

    Similarly with jQuery UI, see this

  1. Use JS (or sometimes CSS) minification, e.g. jquery.min.js, but pre-optimize using human brain first before doing so

    Exercise: Optimize this before minifying it

    Tool: Google Closure Compiler

    Note: Keep the development copy (without minification) as you may want to update it later in the future

  1. Minimize client-server communications and the size of messages transmitted back and forth

    Network speed is much slower than internal CPU+register/cache memory speed

    Use some form of data compression whenever possible when sending data between client and server

    Package the data in complex JSON and submit the data in one go instead of sending multiple HTTP requests

  1. Minimize requests to database and/or filesystem

    Accessing a file in a web server further slows down website (app) performance

    Example: A web app needs to dynamically display a table with several columns and the user can choose which column will be the primary sort key

    Instead of using SQL ORDER BY command and thus issuing another HTTP request to the back-end database, we can just load the data once from the web server and then do the dynamic sorting of the unchanged data in client's machine using JavaScript

  1. Use AJAX technology whenever possible

    So that the user interface does not get frozen when the server is serving client's request, give visual waiting cues (typically an hourglass) when this happens (but still 'disable' the affected button(s) until the server responds)

  2. Set up your web server so that static content has long cache expiry date that can be leveraged by the client's web browser (unless they are always in incognito mode)

  1. Pay for CDN services worldwide

    So that the page loading time is roughly equally fast, throughout the world, especially if your website is relevant for many people scattered throughout the world. For an example, see this

  2. Other techniques to be added in the future :)...

Improving Website (app) Scalability

Sol 1: Scale the Hardware (1)

First steps: Understand what is the issue, find the bottleneck

Sol 1: Scale the Hardware (2)

If you have the money, spend it to improve the bottleneck component of your web server

  • Get more RAM (access time in order of nano seconds)
  • Use faster disks (5 400RPM vs 10 000RPM, lower seek time, more cache)
  • Use RAID (Redundant Array of Independent/Inexpensive Disks) for redundancy, durability, and performance

Sol 1: Scale the Hardware (3)

  • Switch traditional HDD to SSD
    transfer125MB/s > 540MB/s

    Latency is time between request and response
    For disk, rotational latency is time between head on the right track and data rotating under read/wite head

Sol 1: Scale the Hardware (4)

  • Utilize caching by copying higher use and most recently used data in higher speed (SSD) devices

    Search for data from higher speed to lower speed devices

  • Get more network bandwidth

  • Get either faster or more (core) CPUs for your web server

Sol 1: Scale the Hardware (5)

Major issue: This "solution" is mostly NOT in your control, unless you have access to the web server hardware and it can be (very) expensive...

If you use Digital Ocean, there is an 'easy' way to 'resize' your droplet from the cheapest 5 USD/mo droplet to 'faster' or 'bigger' Droplet... with a cost...

Sol 2: Scale the Web App (1)

This one may seemingly cost less than the obvious solution 1 earlier, but a good software company will pay good $$$ to have good programmers who can do these:

  • Use better data structures and/or algorithms in the scripts, e.g. O(N log N) vs O(N^2) sort, various algorithm optimizations in VisuAlgo (verbal explanation)

Sol 2: Scale the Web App (2)

  • Consider time/space tradeoffs, so pre-compute and store useful information to speed up response time

    Example: Google does not do heavy page ranking computation when a user enter a new search keyword but just show the results that has been pre-computed earlier

    For VisuAlgo translation project, we are thinking of having two versions: the static page (after the translations are confirmed, updated periodically) and the dynamic page (for live translation)

Sol 3: Web Server Alternatives

We can consider these alternatives

Again, as with solution 1 (scale the hardware), this solution is mostly NOT in your control unless you understand how to setup web server

The End

Use this or this to check the performance of your web app

My homework: http://www.webpagetest.org/result/170303_T6_6Q5/