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

1. CLIENT-SIDE
PERFORMANCE TESTING
Anand Bagmar
Software Quality Evangelist

2. ABOUT ME
@BagmarAnand
Blog - essenceoftesting
about.me/anand.bagmar

3. WHAT DO YOU EXPECT FROM THIS WORKSHOP?

4. Why do we have to think
about, or, do
Performance Testing?

5. https://www.crazyegg.com/blog/speed-up-your-website/

6. https://www.crazyegg.com/blog/speed-up-your-website/

7. What is
Performance Testing?

8. https://en.wikipedia.org/wiki/Software_performance_testing

9. What is
Performance Engineering?

10. https://en.wikipedia.org/wiki/Performance_engineering

11. Techniques to improve
Performance

12. TECHNIQUES TO IMPROVE PERFORMANCE
We need to understand, and optimize
¨ Architecture, and
¨ How content gets delivered to the end-user

13. CDN – Content Delivery
Network

14. https://en.wikipedia.org/wiki/Content_delivery_network

15. How does CDN work?

16. http://www.slideshare.net/gsluthra/harnessing-the-power-of-cdns

17. http://www.slideshare.net/gsluthra/harnessing-the-power-of-cdns

18. http://www.slideshare.net/gsluthra/harnessing-the-power-of-cdns

19. By Kanoha - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=7868809
CDN DISTRIBUTION NETWORK

20. This work great, but ...

21. Are there any
problems / limitations
of CDNs?

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.

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

28. Where can caching be
done?

29. TYPICAL ARCHITECTURE

30. Lets draw!

31. TYPICAL ARCHITECTURE
Improve user experienceReduce server load

32. TYPES OF CACHES
¨ Web browser
¨ Proxy
¨ CDNs
¨ Reverse Proxies
¨ Web Server’s / Specialized Caches

33. WE WILL FOCUS ON
Improve user experienceReduce server load

34. Client-side Performance
Testing

35. To fix performance issues, we need
to be able to measure it first!

36. Measuring Client-side
Performance

37. MEASURING CLIENT SIDE PERFORMANCE
Synthetic Monitoring (& Testing)
Ø WebPageTest.org
Ø SiteSpeed.io
Ø ShowSlow
Ø Google PageSpeed
Ø Chrome Developer Tools

38. MEASURING CLIENT SIDE PERFORMANCE
Real User Monitoring
Ø Akamai RUM
Ø Monitis RUM
Ø Google Analytics

39. WebPageTest

40. WEBPAGETEST – HOSTED SOLUTION
Advantages
Ø Free to use
Ø Global spread
Ø Caters to current web development practices /
approaches (responsive / lazy loading / etc.)

41. https://www.webpagetest.org/

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

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

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

45. WEBPAGETEST – PRIVATE INSTANCE
Disadvantages
Ø Need to setup the WPT server and WPT agents in our own
infrastructure, or in AWS

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

47. YSlow

48. YSLOW
Advantages
Ø Simple to use (with phantomJS)
Ø Gives reasonably decent information
Ø Easy to hook with Continuous Integration (CI) Server

49. http://phantomjs.org/download.html
https://github.com/anandbagmar/client-side-perf-tests

50. YSLOW
Disadvantages
Ø OLD
Ø Does not consider lazy loading / responsive design

51. Chrome Developer
Tools

52. https://developers.google.com/web/tools/chrome-devtools/

53. https://developers.google.com/web/tools/chrome-devtools/

54. Google’s PageSpeed
Score

55. https://developers.google.com/speed/pagespeed/insights/

56. https://developers.google.com/speed/pagespeed/insights/

57. GOOGLE PAGE SPEED
Ø De facto standard
Ø Shows opportunities to increase page speed score
Ø Works only for public URLs / pages

58. RESOURCES
Ø www.webpagetest.org
Ø Page Speed
Ø PhantomJS – YSlow
Ø Sample automation –client-side-perf-tests
Ø Chrome Developer Tools

59. @BagmarAnand
Blog - essenceoftesting
about.me/anand.bagmar
THANK YOU