Fixing Web Application Performance

Transcript

1. Fixing Web Application Performance Kamil Kaczmarczyk, Developer
2. Web Performance
3. Why performance?
4. Extra half a second in search page generation time dropped traffic by 20% GOOGLE “ ”
5. Every 100ms of latency cost us 1% in sales. AMAZON “ ”
6. Super slow It is really slow. Application runs bit slow. Performance is sometimes a little slow though Not, it is too slow. Could be faster though. Powerful but slow. Slow performance of the server. slow as hell loading time and performance rather slow Works slowly. CLoud performance isn't good
7. Performance is easy
8. Performance is easy hard.
9. Let’s measure
10. Navigation Timing performance.timing timing information
11. User Timing performance.mark(name) - mark time performance.measure(name, startMark, endMark) define a “measure” - time between certain entries performance.getEntriesByType(type) - fetch entries
12. User Timing function() { performance.mark('task.start'); doTask(); performance.mark('task.end'); initComments() performance.mark('comments.init'); performance.measure('task', 'task.start', 'task.end'); performance.measure('comments', 'comments.init', 'domContentLoaded'); measures = performance.getEntriesByType('measure'); measures.forEach(function(entry) { console.log(entry.name + ' took ' + entry.duration + 'ms'); }) }
13. Request breakdown
14. Request breakdown before_fetch_start request_start_to_response_start response_download resource_download parse_or_execute dom_content_loaded
15. before_fetch_start before_fetch_start request_start_to_response_start response_download resource_download parse_or_execute dom_content_loaded
16. Avoid redirects • Redirects cause roundtrips • Try to avoid them wherever possible: • link to final destination • use History API Browser Application GET /MyHome/ 302 /Dashboard.html GET /Dashboard.html 200 /Dashboard.html
17. request_start_to_response_start before_fetch_start request_start_to_response_start response_download resource_download parse_or_execute dom_content_loaded
18. Waterfall
19. Flush Head Early • Flush <head> with the resource links • Let the browser download resources before response is fully generated Browser Application GET /MyHome/ <head> with resources rest of the response
20. Flush Head Early
21. before_fetch_start request_start_to_response_start response_download resource_download parse_or_execute dom_content_loaded before_fetch_start request_start_to_response_start concurrent_download excess_resource_download excess_parse_or_execute dom_content_loaded excess_response_download
22. request_start_to_response_start concurrent_download excess_resource_download
23. excess_response_download before_fetch_start request_start_to_response_start concurrent_download excess_resource_download excess_parse_or_execute dom_content_loaded excess_response_download
24. Fix your backend.
25. excess_resource_download before_fetch_start request_start_to_response_start concurrent_download excess_resource_download excess_parse_or_execute dom_content_loaded excess_response_download
26. Reduce page weight • minification • compression (GZIP) • image optimisation
27. Reduce page weight
28. Reduce page weight Remember to always reduce the longest pole
29. Reduce number of connections • CSS, JS concatenation • inlining • domain sharding HTTP/1.1 limits number of connections to ~6 per origin
30. HTTP/2 • multiple request over single TCP connection • HTTP headers compression • server push
31. HTTP/2
32. HTTP/2
33. excess_parse_or_execute before_fetch_start request_start_to_response_start concurrent_download excess_resource_download excess_parse_or_execute dom_content_loaded excess_response_download
34. dom_content_loaded before_fetch_start request_start_to_response_start concurrent_download excess_resource_download excess_parse_or_execute dom_content_loaded excess_response_download
35. Our results
36. 2400ms 90th percentile lowered by
37. Number of comments mentioning performance 7%
38. Summary
40. Measure before you optimise.
41. Thanks. Questions?