Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Client-Side Performance Testing

2,801 views

Published on

Slides from my 4-hour workshop on Client-Side Performance Testing conducted at Phoenix, AZ in STPCon 2017 (March).

Workshop Takeaways:


Understand difference between is Performance Testing and Performance Engineering.
Hand’s on experience of some open-source tools to monitor, measure and automate Client-side Performance Testing.
Examples / code walk-through of some ways to automate Client-side Performance Testing.

See blog for more details - https://essenceoftesting.blogspot.com/2017/03/workshop-client-side-performance.html

Published in: Software
  • Be the first to like this

Client-Side Performance Testing

  1. 1. CLIENT-SIDE PERFORMANCE TESTING Anand Bagmar Software Quality Evangelist
  2. 2. ABOUT ME @BagmarAnand Blog - essenceoftesting about.me/anand.bagmar
  3. 3. WHAT DO YOU EXPECT FROM THIS WORKSHOP?
  4. 4. Why do we have to think about, or, do Performance Testing?
  5. 5. https://www.crazyegg.com/blog/speed-up-your-website/
  6. 6. https://www.crazyegg.com/blog/speed-up-your-website/
  7. 7. What is Performance Testing?
  8. 8. https://en.wikipedia.org/wiki/Software_performance_testing
  9. 9. What is Performance Engineering?
  10. 10. https://en.wikipedia.org/wiki/Performance_engineering
  11. 11. Techniques to improve Performance
  12. 12. TECHNIQUES TO IMPROVE PERFORMANCE We need to understand, and optimize ¨ Architecture, and ¨ How content gets delivered to the end-user
  13. 13. CDN – Content Delivery Network
  14. 14. https://en.wikipedia.org/wiki/Content_delivery_network
  15. 15. How does CDN work?
  16. 16. http://www.slideshare.net/gsluthra/harnessing-the-power-of-cdns
  17. 17. http://www.slideshare.net/gsluthra/harnessing-the-power-of-cdns
  18. 18. http://www.slideshare.net/gsluthra/harnessing-the-power-of-cdns
  19. 19. By Kanoha - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=7868809 CDN DISTRIBUTION NETWORK
  20. 20. This work great, but ...
  21. 21. Are there any problems / limitations of CDNs?
  22. 22. Caching! In computing, a cache (/ˈkæʃ/ KASH) is a component that stores data so future requests for that data can be served faster; the data stored in a cache might be the results of an earlier computation, or the duplicates of data stored elsewhere.
  23. 23. WHY CDN? ¨ Caching: Reduced Page Construction Time ¨ Closer: Reduced Latency ¨ Traffic Offloaded: Reduced Loads ¨ Backup: Served even if site is down ¨ Protection: Prevent DoS Attacks ¨ Others: Redirects/Auto-compression/Best-route detection
  24. 24. Where can caching be done?
  25. 25. TYPICAL ARCHITECTURE
  26. 26. Lets draw!
  27. 27. TYPICAL ARCHITECTURE Improve user experienceReduce server load
  28. 28. TYPES OF CACHES ¨ Web browser ¨ Proxy ¨ CDNs ¨ Reverse Proxies ¨ Web Server’s / Specialized Caches
  29. 29. WE WILL FOCUS ON Improve user experienceReduce server load
  30. 30. Client-side Performance Testing
  31. 31. To fix performance issues, we need to be able to measure it first!
  32. 32. Measuring Client-side Performance
  33. 33. MEASURING CLIENT SIDE PERFORMANCE Synthetic Monitoring (& Testing) Ø WebPageTest.org Ø SiteSpeed.io Ø ShowSlow Ø Google PageSpeed Ø Chrome Developer Tools
  34. 34. MEASURING CLIENT SIDE PERFORMANCE Real User Monitoring Ø Akamai RUM Ø Monitis RUM Ø Google Analytics
  35. 35. WebPageTest
  36. 36. WEBPAGETEST – HOSTED SOLUTION Advantages Ø Free to use Ø Global spread Ø Caters to current web development practices / approaches (responsive / lazy loading / etc.)
  37. 37. https://www.webpagetest.org/
  38. 38. IMPORTANT METRICS What to Measure? WebPageTest Metric Explanation First reaction Time to First Byte (TTFB) Time from the start of the initial navigation until the first byte of the base page is received by the browser (after following redirects). Content appears Time to Start Render Time from the start of the initial navigation until the first non-white content is painted to the browser display. Page processing completed DOM Content Ready End The point when the HTML parser has reached the end of the document which means it has executed any blocking scripts. The CSSOM may not be complete yet. Full page loaded Doc Complete Time The onload event which fires when all of the scripts, css and images defined in the HTML have finished loading (including below-the-fold content). Refer to WebPageTest documentation for more details: • https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics • https://sites.google.com/a/webpagetest.org/docs/advanced-features/raw-test-results
  39. 39. WEBPAGETEST – HOSTED SOLUTION Disadvantages Ø Need to get in the queue of currently executing tests Ø Can run only against publically available URLs / pages Ø Limited automation using REST APIs
  40. 40. WEBPAGETEST – PRIVATE INSTANCE Advantages Ø Free to use, Open-source Ø Can run multiple scenarios in parallel (limited by number of agents configured) Ø Can run against public and private available URLs / pages Ø Results available for as long as configured Ø There is no limit on number of tests run per day
  41. 41. WEBPAGETEST – PRIVATE INSTANCE Disadvantages Ø Need to setup the WPT server and WPT agents in our own infrastructure, or in AWS
  42. 42. WEBPAGETEST - AUTOMATION Ø REST API calls Ø Poll for results / implement call back Ø Parse summary / detail CSV file to do assertions / validations Challenges Ø Managing infrastructure Ø Polling for results can be time consuming and error prone
  43. 43. YSlow
  44. 44. YSLOW Advantages Ø Simple to use (with phantomJS) Ø Gives reasonably decent information Ø Easy to hook with Continuous Integration (CI) Server
  45. 45. http://phantomjs.org/download.html https://github.com/anandbagmar/client-side-perf-tests
  46. 46. YSLOW Disadvantages Ø OLD Ø Does not consider lazy loading / responsive design
  47. 47. Chrome Developer Tools
  48. 48. https://developers.google.com/web/tools/chrome-devtools/
  49. 49. https://developers.google.com/web/tools/chrome-devtools/
  50. 50. Google’s PageSpeed Score
  51. 51. https://developers.google.com/speed/pagespeed/insights/
  52. 52. https://developers.google.com/speed/pagespeed/insights/
  53. 53. GOOGLE PAGE SPEED Ø De facto standard Ø Shows opportunities to increase page speed score Ø Works only for public URLs / pages
  54. 54. RESOURCES Ø www.webpagetest.org Ø Page Speed Ø PhantomJS – YSlow Ø Sample automation –client-side-perf-tests Ø Chrome Developer Tools
  55. 55. @BagmarAnand Blog - essenceoftesting about.me/anand.bagmar THANK YOU

×