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

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

2. 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

3. 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

4. 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

5. 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

6. 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)

7. 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)

8. 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

9. 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

• If you have access to the web server, benchmark/load test your system first, e.g. with Apache Bench (ab), Apache JMeter, or these four other Linux server monitoring tools
• Monitor the performance of critical components (CPU, DISK, NETWORK, MEMORY) on various usage scenarios

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

	HDD	SSD
seek	4-12ms	<0.1ms
latency	2-5ms	0
transfer	125MB/s	> 540MB/s
$	.08/GByte	.60/GByte

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

• nginx (Engine X), nginx architecture
• node.js
• Cloud Computing Based solutions
  1. Digital Ocean (that resize option)
  2. Amazon Web Services
  3. Google App Engine
  4. IBM Bluemix

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