Client-side Performance Testing
- 3. WHAT DO YOU EXPECT FROM THIS SESSION?
- 7. Lets draw!
- 8. 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.
- 9. Where can caching be done?
- 10. TYPICAL ARCHITECTURE Improve user experienceReduce server load
- 11. WE WILL FOCUS ON Improve user experienceReduce server load
- 13. MEASURING CLIENT SIDE PERFORMANCE Synthetic Monitoring (& Testing) Ø WebPageTest.org Ø SiteSpeed.io Ø ShowSlow Ø Google PageSpeed
- 14. MEASURING CLIENT SIDE PERFORMANCE Real User Monitoring Ø Akamai RUM Ø Monitis RUM Ø Google Analytics
- 15. WebPageTest.org
- 16. WEBPAGETEST – HOSTED SOLUTION Advantages Ø Free to use Ø Global spread Ø Caters to current web development practices / approaches (responsive / lazy loading / etc.)
- 17. Lets Play!
- 18. 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
- 19. 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
- 20. 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
- 21. WEBPAGETEST – PRIVATE INSTANCE Disadvantages Ø Need to setup the WPT server and WPT agents in our own infrastructure, or in AWS
- 22. 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
- 23. YSlow
- 24. YSLOW Advantages Ø Simple to use (with phantomJS) Ø Gives reasonably decent information Ø Easy to hook with Continuous Integration (CI) Server
- 25. Lets Play!
- 26. YSLOW Disadvantages Ø OLD Ø Does not consider lazy loading / responsive design
- 28. Lets Play!
- 29. GOOGLE PAGE SPEED Ø De facto standard Ø Shows opportunities to increase page speed score Ø Works only for public URLs / pages
- 30. RESOURCES Ø www.webpagetest.org Ø Page Speed Ø PhantomJS – YSlow Ø Sample automation –client-side-perf-tests