SlideShare a Scribd company logo

Web Application Performance

•Download as PPTX, PDF•
•
C
CodeFireTech

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.

Related slideshows

Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
 
Front end development session1
Front end development session1Front end development session1
Front end development session1
 
Secure Session Management
Secure Session ManagementSecure Session Management
Secure Session Management
 
1 of 23
Web application performance 1 Sunday, July 07, 2013 Presented by Pranjal Srivastava
What is performance?
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”
Perception
Perception
What is web application performance?
Why application should perform well?
image courtesy “Times of India”
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…
Steps to optimize you application • Measure performance • Diagnose bottlenecks • Fix issues
Measure • Performance with single user • Load it and monitor performance • Monitor performance on Production server – Identify bottlenecks
Diagnose problems • JS / HTML level • Code Level • DB level • Server level • Network
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
Diagnostic tools (Page Speed)
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
Fix (Browser level) • XHTML • DIV based design • Optimized images • No errors in code (Validated HTML)
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
Fix (Code level) • Code Profiling • Review code • Change Algorithms • Generally avoided since it can lead to functional bugs
Fix (Server level) • Increase server size – Shared host – VPS – Dedicated server – CPU / Memory • Use Server Clusters – Load balancing – Sticky sessions
AWS Server layout
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)
Fix (Advanced) • Cache – Code level Cache – Varnish • DB cache – Code level Cache – Memcache
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

More Related Content

Web Application Performance

  • 1. Web application performance 1 Sunday, July 07, 2013 Presented by Pranjal Srivastava
  • 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”
  • 6. What is web application performance?
  • 7. Why application should perform well?
  • 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
  • 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
  • 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