[Fii Practic]: Performance

Benchmarking
The most important think in improving performance is measurement and knowing
when the values are good enough. Its essential to know how to measure and what
to measure in order to know when youve reached your goal.
Starting performance tuning without measuring first is like starting a race without
knowing where the finish line is.

Why?
One of the biggest bottlenecks in usability is response times waiting for new
content to load, or an operation to complete. In his book Usability Engineering,
Jakob Nielsen identifies three main response time limits.
0.1 seconds Operations that are completed in 100ms or fewer will feel
instantaneous to the user. This is the gold standard that you should aim for when
optimizing your websites.
1 second Operations that take 1 second to finish are generally OK, but the user
will feel the pause. If all of your operations take 1 second to complete, your website
may feel a little sluggish.
10 seconds if an operation takes 10 seconds or more to complete, youll
struggle to maintain the users attention.
Note that this structuring was proposed in 1993 more than 20 years ago. (Moors
law, where is your God now?)

Stopwatch
Use System.Diagnostics. Stopwatch to measure time it takes to run the query and
display the result in the web page using ViewData.
Step 1: Add a Using clause, declare a stopwatch and add code for starting and
stopping the measurement.
Step 2: Add the stopwatch elapsed time in the ViewData. Format accordingly, we
will expect the operation to take milliseconds since the database is on the same
machine as the server and the data fits in memory. In a production environment this
value can quickly jump to seconds.
Step 3: Display the information. Use F5 to see that no request takes the same time.

Firebug/Developer Tools
All major browsers have a developer tools functionality in which have the following
functionality:
-

View the underlying HTML (DOM Tree)

View the resources loaded (CSS, JS, images, etc.)
See network traffic and loading times
Debug javascript code.
Have a full view of the rendering process (Very important to performance
analysis)

You dont have to know all the developer tools by hart, but its good to know your
way around one tool because all the rest offer the same functionality. If you like
Chrome, Google Chrome Developer Tools are a good way to go.
Step 1: Open Chrome/Firefox/IE (kidding, dont open IE) and go to the local test
site.
Step 2: (Very important) Press F12. A screen should pop up containing multiple
tabs. You should see the underlying HTML.
Step 3: Go to the Network tab. Press F5 to reload the page. You should see all the
request for the site resources. You can click on them to see the request details.
Step 4: Notice the blue and red vertical lines.
Blue line tells you when the browser finished parsing the document and the red line
tells you when all page resources are received. Since the red line signals us that the
page is ready, we will look at that line to measure progress.

Query in a loop
We will include the name of the last album in the grid and see the impact of moving
data between the database and web.
Step 1: Modify the ArtistViewModel to include a new property, the last album
name. Note that albums are added to the database in chronological order, so the
last album will have the greatest Id.
Step 2: Make modifications in Index action of the ArtistController to populate the
LastAlbumName property of the model. To view the SQL created we will need to add
the following line to ChinookContext constructor:
Database.Log = s => System.Diagnostics.Debug.WriteLine(s);
This will output the SQL generated by Entity Framework in Debug log (visible when
you press F5 and open the Output window with the output from Debug).
Step 3: Note that there are lots of selects going on there. Is there a better way to
do this? Can we load all the Albums data along with the Artists?

Step 4: Use Include to specify the related object that should be included in the
Query. This will tell EF to make a join between the Artists and Albums Tables and
return the combined result.
Step 5: Observe the query that has been generated.

Bundling
The fastest and best optimized resource is a resource not sent. - Ilya Grigorik
[] latency is the bottleneck, and the fastest byte is a byte not sent - Ilya Grigorik

Cache resources on the client

Application resources should be cached to avoid re-requesting the same bytes
each time the resources are required.

Compress assets during transfer

Application resources should be transferred with the minimum number of bytes:
always apply the best compression method for each transferred asset.
Step 1: Open the BundleConfig file from App_Start folder in the Web project. Notice
that bundles are created for both CSS and JS files and are given names.
Step 2: We will simulate a production environment in which the javascript and CSS
codes are bundled and minified. Add the following code:
BundleTable.EnableOptimizations = true;
Step 3: Open the browser Developer tools and see what resources are downloaded.
Notice their names. Open a javascript file and notice the way the code is written.

CDN - why, where

Locating the data geographically closer to the client can significantly reduce the
network latency of every TCP connection and improve throughput. This advice
applies both to static and dynamic content. [High Performance Browser Networking]

AB test
ab is a tool for benchmarking your Apache Hypertext Transfer Protocol (HTTP) server.

It is designed to give you an impression of how your current server performs. This
especially shows you how many requests per second your server is capable of
serving.
Step 1: Open a console and use the cd command to go to the directory in which
you have the ab.exe executable.
Step 2: Run the following command (before running, replace the <port> with the
port on which your project runs):
ab n 100 c 5 http://localhost:<port>/Artist

n parameter represents the number of calls to be made to the server.

c parameter represents concurrency, the number of parallel requests that can
be performed.

Step 3: Note down the results from the Total line: min, mean, median and max.
Step 4: Try to improve the query in the Artist Controller and Run the same
command again. Its important to have the same parameters and conditions so that
the results can be compared.
Step 5: Compare the results.

Tools
A list of useful, and sometimes free, tools for evaluating web performance:

Web Page Test: http://www.webpagetest.org/

AB (Apache): http://httpd.apache.org/docs/2.2/programs/ab.html
Web Fundamentals: https://developers.google.com/web/fundamentals/?
hl=en
Evaluating
network
performance:
https://developer.chrome.com/devtools/docs/network