Getting and staying fast - A web performance round-up

Making and keeping web applications fast is hard work, but also very rewarding and pays off very quickly with higher user satisfaction, increased usage and better conversions. In this presentation I'll talk about all the lessons I learned by working on application performance at ResearchGate: Why it is actually important, how you can convince your managers to invest time and money in it and what you have to do to measure and improve performance.

Transcript

1. Getting and staying fast A web performance round-up @BastianHofmann
3. Site Reliability Engineering Team
4. What did we learn about Performance
6. 12 million users
7. 193 countries
8. ~1800 request/s
9. >100 million publications
10. ~ 140 components
11. Growing Traffic
12. Active development
13. Continuous Delivery
14. Lots of things that can influence performance
15. Performance is important
17. http://www.impressivewebs.com/importance-of-website- performance-sources/
18. Before we start making it better
19. Monitoring
20. Many roads
21. https://metrics.librato.com/
23. http://graphiteapp.org/
25. StatsD https://github.com/etsy/statsd/
26. webserver webserver webserver statsd statsd statsd graphite
27. Most interesting for performance
28. Response Times
29. Timer Metric
30. Aggregation
31. Mean
32. Mean is lying
33. Percentiles
34. upper min upper_90 mean mean_90
35. http://bravenewgeek.com/everything-you-know-about- latency-is-wrong/
36. Getting the data
37. Easiest approach: Get it out of the access log
38. 192.168.56.1 - - [09/Jul/2012:19:18:19 +0200] "GET /rg_trunk/webroot/c/af10c/ images/template/rg_logo_default.png HTTP/ 1.1" 200 882 "http://devm/rg_trunk/webroot/ directory/publications/"
39. logstash http://logstash.net/
40. webserver webserver webserver statsd statsd statsd graphite logstash log logstash log logstash log
41. Or measure it in your PHP process
42. $start = microtime(true); register_shutdown_function( function () use ($start) { StatsD::timer( 'response_time', microtime(true) - $start ); } ); // do complex stuff
43. Context is important
44. By pages
45. In order to actually optimise something
46. More details
47. Profiling
48. XHProf with tideways.io Extension https://github.com/tideways/php-profiler-extension
49. XHGUI https://github.com/perftools/xhgui
52. A bit higher level
53. https://blackfire.io/
54. https://tidyways.io/
55. Symfony Debug Toolbar
58. Active in production for a subset of requests
59. Common Performance Problems
60. Database Queries
61. Slow query logs
62. Are there indexes missing?
63. Do your DB serves have enough memory?
64. Are you using SSDs?
65. Can your servers handle the read/ write load?
66. Master/slave setups
67. More servers
68. Sharding
69. HTTP calls
70. Microservices
71. Things will break
72. Configure sensible Timeouts
73. Can you make the service faster?
74. Load Balancing
75. How much are you loosing on the network?
76. Server Service A Server Service B Service C Service C Load balancer
77. Distributed Load Balancing
79. Server Service A Server Service B Service C Service C Linkerd Consul Linkerd Consul
80. Caching
81. https://memcached.org/
82. https://redis.io/
83. Framework & Library settings
84. Is the production mode on?
85. Is caching configured correctly?
86. Symfony
87. http://symfony.com/doc/current/configuration/ environments.html
88. Doctrine
89. http://docs.doctrine-project.org/projects/doctrine-orm/en/ latest/reference/advanced- configuration.html#development-vs-production- configuration
90. So far: Backend response times
91. Is this actually what we want to measure?
92. http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
93. Navigation Timing API https://developer.mozilla.org/en-US/docs/ Navigation_timing
95. Resource Timing API http://www.w3.org/TR/resource-timing/
97. https://github.com/lognormal/boomerang
98. Getting it back to the server
99. Tracking request
100. https://tracking.example.com/? page=profile&backend=123&co mplete=890&domReady=580
101. These numbers will hurt
102. Optimizing it
103. Push for modern browsers
105. https://github.com/burocratik/outdated-browser
106. Network
107. Connection Keep Alive
108. Reduce Redirects
109. HTTP/2
110. HTTP/2.0 101 Introduction Friday, 13:00, Hampstead
111. TLS
112. TLS Handshake needs additional roundtrips
113. Optimize configuration
114. istlsfastyet.com
115. https://www.ssllabs.com/ssltest/
117. Early termination
118. DataCenter Early Termination Early Termination Early Termination
119. Content Delivery Networks
120. DataCenter CDN CDN CDN
121. Compression
122. GZIP
123. http://nginx.org/en/docs/http/ngx_http_gzip_module.html
124. http://httpd.apache.org/docs/current/mod/ mod_deflate.html
125. Minifying
126. CSS
127. JS
128. HTML
129. Images
130. Combining Assets
131. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/mainbundle.js
132. Spritemaps
134. https://developers.google.com/speed/pagespeed/module/ Google PageSpeed Module https://modpagespeed.com/
135. Caching
136. Cache-control: public, max-age=5184000, immutable https://developer.mozilla.org/en/docs/Web/HTTP/Headers/ Cache-Control
137. Sensible Cache Invalidation
138. Don’t rely on etags
139. No Re-Validation Requests
140. Invalidate with Hash in URL
141. https://c5.rgstatic.net/m/33770358883176943/styles/rg.css
142. http://php.net/manual/en/function.md5-file.php $hash = md5_file($filename);
143. Full Page Cache
144. PHP Varnish Cache
145. https://varnish-cache.org/
146. http://trafficserver.apache.org/
147. What is really necessary for a page load?
148. What is critical?
150. Speed Index https://sites.google.com/a/webpagetest.org/docs/using- webpagetest/metrics/speed-index
152. WebpageTest https://www.webpagetest.org/
155. Run this in CI
156. Inline critical assets
157. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <styles> … your critical css </styles> </head> <body> <div>content</div> load main.css async </body> </html>
158. Early flush
159. HTTP/2.0 101 Introduction Friday, 13:00, Hampstead
160. Summary
161. Performance is important
163. Lot’s of things can slow you down
164. Measure everything
165. Establish a performance culture
166. Dashboards
169. Things are changing all the time
170. Stay up-to-date
171. http://speakerdeck.com/u/bastianhofmann
172. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de