This document discusses ways to optimize web application performance. It defines performance as completing tasks within known standards for accuracy, completeness, speed and cost. Good performance for web applications is generally a load time between 5-8 seconds. The key steps to optimize performance are to measure performance, diagnose bottlenecks, and fix issues at the JavaScript, code, database, server and network levels. Commonly used tools to diagnose performance include slow query logs, Yslow, PageSpeed and Webpagetest. Specific fixes involve techniques such as minifying files, using content delivery networks, improving code and database optimization, employing caching, and upgrading server hardware.

1. Web application performance
1
Sunday, July 07, 2013
Presented by
Pranjal Srivastava

2. What is performance?

3. Performance definition
• The accomplishment of a given task measured
against preset known standards of accuracy,
completeness, cost, and speed.
http://www.businessdictionary.com/definition/performance.html#ixzz2Y5
INtXmj
• Performance is based on your “Perception”

4. Perception

5. Perception

6. What is web application
performance?

7. Why application should perform well?

8. image courtesy “Times of India”

9. What is good / acceptable performance
• Good performance is a relative term
– Varies based on type of applications
– Varies based on type of usage
• What we say good today may not be good
enough in future
• 5-8 Second is generally a threshold for a page
to load on a web application
• For a rich web app (like gMail) initial load time
may be higher but that’s a trade
off for rich UX inside app
• AJAX and Use of animated gif to show that
page is loading…

10. Steps to optimize you application
• Measure performance
• Diagnose bottlenecks
• Fix issues

11. Measure
• Performance with single user
• Load it and monitor performance
• Monitor performance on Production server
– Identify bottlenecks

12. Diagnose problems
• JS / HTML level
• Code Level
• DB level
• Server level
• Network

13. Commonly used tools for diagnosis
• Slow query log
– Generally 5-10 ms is considered reasonable query
performance
• Yslow (http://developer.yahoo.com/yslow)/
Page speed
(https://developers.google.com/speed/pagesp
eed/)
• Code profiling and optimization
• Web based tools
– http://www.webpagetest.org
– http://tools.pingdom.com

14. Diagnostic tools (Page Speed)

15. Diagnostic tools (webpagetest.org)
• Initial page load time
• Repeat page load time
• Filmstrip View
• Video view of page load
• Load times for each individual elements

16. Fix (Browser level)
• XHTML
• DIV based design
• Optimized images
• No errors in code (Validated HTML)

17. Fix (Network level)
• Reduce size of files
– Gzip (JS, CSS compression)
– JS/ CSS minify (reduce size)
– Image compression (reduce size)
• Use Content delivery network (CDN)
– images, videos, audio clips, CSS files, JS files.
– Browsers limit the number of concurrent connections
to a single domain. Most permit four active
connections
– Distributed data center
– Distribute the load, save bandwidth, boost
performance
• Combine multiple web calls

18. Fix (Code level)
• Code Profiling
• Review code
• Change Algorithms
• Generally avoided since it can lead to
functional bugs

19. Fix (Server level)
• Increase server size
– Shared host
– VPS
– Dedicated server
– CPU / Memory
• Use Server Clusters
– Load balancing
– Sticky sessions

20. AWS Server layout

21. Fix (DB level)
• Indexes
• Not more than 3 and at max 5 tables join
• MySQL query cache
– query_cache_size (if set to 0 no cache)
– query_cache_type (value on or 1)
– query_cache_limit (max size limit)
• Optimize based on engine used (InnoDB,
MyiSAM)

22. Fix (Advanced)
• Cache
– Code level Cache
– Varnish
• DB cache
– Code level Cache
– Memcache

23. About Presenter
• Pranjal Srivastava is founder of CodeFire Technologies Pvt
Lts.
• He has over 14 years of experience in technology consultancy,
architecting enterprise systems and optimizing performance of
web applications.
• He received his B.Tech from Institute of Technology - Banaras
Hindu University, Varanasi, India
• He can be reached at pranjal@codefire.in