Антон Серпутько “Testing and optimization of client-side performance”
1 like183 views
The document discusses testing and optimizing client-side performance. It provides an overview of performance testing metrics like response times, throughput, and error rates. Load testing helps determine backend bottlenecks, capacity issues, and response times under load. Tips for performance optimization include using content delivery networks and caching, minimizing content sizes through techniques like image optimization, and reducing the critical rendering path by prioritizing static resource requests. Various tools for performance testing and analysis are also mentioned, including PageSpeed Insights, WebPageTest, and the Chrome DevTools Performance panel.
Антон Серпутько “Testing and optimization of client-side performance”
- 1. Testing and optimization of client-side performance
- 3. Anton Serputko Performance QA Engineer Coach of qastart/performance courses
- 4. https://wpostats.com/ Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.
- 5. Client Server Client-server applications Web server Application server Performance testing
- 10. Client Server
- 11. Client Server
- 12. Client Server
- 13. Client Server Performance testing metrics: ● Response times ○ average ○ median ○ percentiles(90/95/99) ○ standart deviation ● Throughput ● Error rate ● Server-side metrics ○ cpu utilization ○ RAM usage ○ I/O opera ○ Network ○ ... Load testing helps to determine: - backend code bottlenecks - cluster configuration issues - system capacity/throughput/response times/endurance - ...
- 14. Real case Login transaction - 2s under the load Login transaction - 9s under the load
- 15. Client Server Send request Receive response/ content Process content on client
- 16. Send request Keep in mind requests priority on client basing on resource type(css, js, png..) and it attribute Use deffer/async to load unnecesary scripts asynchronously and not to block page rendering link for this_example
- 17. Host static resources Content Delivery Network aka CDN usage Send request
- 18. CDN resources download parallelization max 10 download threads per host(~6) CDN subdomains styles-cdn.example.com/1.css styles-cdn.example.com/2.css scripts-cdn.example.com/1.js scripts-cdn.example.com/2.js images-cdn.example.com/1.png images-cdn.example.com/2.jpeg
- 20. Use appropriate caching type
- 21. Receive response/content Tips for backend load testing scenarios: - Download static resouces(if not using CDN) - Do not record them - Use caching controllers Reduce content download time: - minification(css/js) - use compression - reduce quality/optimize images(https://tinypng.com/)
- 22. Process content on client Send request GET /index.html Receive first byte of html Starts parsing HTML (aim to find all necessary resources to display page) find static content and send requests for it (css, js, img, fonts..) Update layer tree Composite layers Critical rendering path
- 26. Google page speed insights Webpagetest Sitespeed.io Performance tab in Chrome dev tools Tools
- 27. Page speed insights Gives suggestions: - optimize images - remove render blocking css - laverage browser caching - compression - minify css/js Performance tab in dev tools - Network - Detailed CRP events - events type distribution - JS functions execution time - view layers - frames per second - paint frashing layout borders Webpagetest - features from page speed insights - view network waterfall - run tests from different locations - execute scripts Sitespeed.io - features from page speed insights - pretty report with a lot of performance metrics - execute selenium scripts
- 28. Website Performance Optimization https://www.udacity.com/course/website-performance-optimization--ud88 4 Browser Rendering Optimization https://www.udacity.com/course/browser-rendering-optimization--ud860 Awesome courses