Антон Серпутько “Testing and optimization of client-side performance”

1. Testing and optimization of
client-side performance

2. https://goo.gl/7rufdP

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

6. Client
Server
Load generator

7. Client
Server
Some load

8. Client
Server

9. Client
Server

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

19. Caching
https://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

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