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 session we'll talk about all the lessons 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 server and client side. Keeping a site fast is hard work, this session will contain lots of techniques that can be used and implemented to actually measure the performance and make the your web page faster.

Transcript

1. Getting and staying fast A web performance round-up @BastianHofmann
4. Site Reliability Engineering Team
5. 14 million users
6. 193 countries
7. ~1800 request/s
8. >100 million publications
9. ~ 140 components
10. Growing Traffic
11. Active development
12. Continuous Delivery
13. Lots of things that can influence performance
14. Performance is important
16. http://www.impressivewebs.com/importance-of-website- performance-sources/
17. What did we learn about Performance
18. Let’s start
19. Before we start making it better
20. Monitoring
21. Many roads
22. Time Series Databases
23. https://metrics.librato.com/
25. http://graphiteapp.org/
27. StatsD https://github.com/etsy/statsd/
28. webserver webserver webserver statsd statsd statsd graphite
29. Counters
30. Timers
31. Most interesting for performance
32. Response Times
33. Aggregation
34. Average
35. Averages are lying
36. Percentiles
37. upper min upper_90 mean mean_90
38. http://bravenewgeek.com/everything-you-know-about- latency-is-wrong/
39. Getting the data
40. Easiest approach: Get it out of the access log
41. 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/"
42. logstash http://logstash.net/
43. webserver webserver webserver statsd statsd statsd graphite logstash log logstash log logstash log
44. Or measure it in your PHP process
45. $start = microtime(true); register_shutdown_function( function () use ($start) { StatsD::timer( 'response_time', microtime(true) - $start ); } ); // do complex stuff
46. Context is important
47. By pages
48. By endpoints
49. In order to actually optimise something
50. More details
51. Measure more granular things
52. SQL Query
53. HTTP call
54. Template rendering
55. If that’s not enough
56. Profiling
57. XHProf with tideways.io Extension https://github.com/tideways/php-profiler-extension
58. XHGUI https://github.com/perftools/xhgui
61. A bit higher level
62. https://blackfire.io/
63. https://tidyways.io/
64. $framework Debug Toolbar
67. Extend it http://symfony.com/doc/current/cookbook/profiler/ data_collector.html
68. Active in production for a subset of requests
69. Common Performance Problems
71. Keep everything up to date
72. I/O
73. Database Queries
74. Slow query logs
75. Are there indexes missing?
76. Do your DB serves have enough memory?
77. Are you using SSDs?
78. Can your servers handle the read/ write load?
79. Master/slave setups
80. More servers
81. Sharding
82. HTTP calls
83. Microservices
84. Configure sensible Timeouts
85. Can you make the service faster?
86. Network can be a bottle neck
87. Load Balancing
88. Server Service A Server Service B Service C Service C Load balancer
89. Distributed Load Balancing
91. Server Service A Server Service B Service C Service C Linkerd Consul Linkerd Consul
92. Caching
93. https://memcached.org/
94. https://redis.io/
95. Runtime caches
96. Framework & Library settings
97. Is the production mode on?
98. Is caching configured correctly?
99. Symfony
100. http://symfony.com/doc/current/configuration/ environments.html
101. Doctrine
102. http://docs.doctrine-project.org/projects/doctrine-orm/en/ latest/reference/advanced- configuration.html#development-vs-production- configuration
103. So far: Backend response times
104. Is this all we need to care about?
105. http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
106. Navigation Timing API https://developer.mozilla.org/en-US/docs/ Navigation_timing
108. Resource Timing API http://www.w3.org/TR/resource-timing/
110. https://github.com/lognormal/boomerang
111. Getting it back to the server
112. Tracking request
113. https://tracking.example.com/? page=profile&backend=123&co mplete=890&domReady=580
114. These numbers will hurt
116. Optimizing it
117. Average page size
118. http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
119. Push for modern browsers
121. https://github.com/burocratik/outdated-browser
122. Network
123. Connection Keep Alive
124. Reduce Redirects
125. HTTP/2
126. HTTP/2 and Async APIs Today 4pm
127. TLS
128. TLS Handshake needs additional roundtrips
129. Optimize configuration
130. istlsfastyet.com
131. https://www.ssllabs.com/ssltest/
133. Full Page Cache
134. PHP Varnish Cache
135. https://varnish-cache.org/
136. http://trafficserver.apache.org/
137. Content Delivery Networks
138. DataCenter CDN CDN CDN
139. Compression
140. GZIP
141. http://nginx.org/en/docs/http/ngx_http_gzip_module.html
142. http://httpd.apache.org/docs/current/mod/ mod_deflate.html
143. Minifying
144. CSS
145. https://github.com/gruntjs/grunt-contrib-cssmin
146. JS
147. https://github.com/gruntjs/grunt-contrib-uglify
148. HTML
149. https://github.com/gruntjs/grunt-contrib-htmlmin
150. Images
151. https://github.com/gruntjs/grunt-contrib-imagemin
152. Caching
153. Sensible Cache Invalidation
154. Don’t rely on etags
155. No Re-Validation Requests
156. Invalidate with Hash in URL
157. https://c5.rgstatic.net/m/33770358883176943/styles/rg.css
158. $hash = hash_file('sha256', $filename); https://secure.php.net/manual/en/function.hash-file.php
159. What is really necessary for a page load?
160. What is critical?
163. First Paint Timing API https://developer.mozilla.org/en-US/docs/Web/API/ PerformancePaintTiming
164. WebpageTest https://www.webpagetest.org/
167. Lighthouse https://developers.google.com/web/tools/lighthouse/
169. Run this in CI
170. Optimising for First Paint
171. Inline critical assets
172. 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>
173. Early flush
174. Traditional approach
175. Browser Server GET css & js HTTP/1.1 200 OK Content-Type: text/html <html> <head><link ..><script ..> GET /foo.html </head><body></body></html>
176. https://developer.mozilla.org/en-US/docs/Web/HTTP/ Link_prefetching_FAQ Link Prefetching
177. Link: </images/big.jpeg>; rel=prefetch
178. <link rel="prefetch" href="/images/big.jpeg">
179. Browser Server GET /foo.html <body></body> </html> HTTP/1.1 200 OK Content-Type: text/html <html> <head><link ..><script ..></head> GET css & js
180. HTTP/2 Server Push
181. Browser Server Push CSS & JS :status: 200 Content-Type: text/html <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
182. Just load less
183. Lazy loading
184. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
185. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution ONLY VISIBLE BELOW THE FOLD
186. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu
187. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution LOAD ASYNC WITH JS
188. Speed budgets
189. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
190. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu TOO SLOW Institution
191. Profile Publications Publication Publication Publication LeftColumn Image Menu Institution
192. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu LOAD ASYNC WITH JS Institution
193. Summary
194. Performance is important
196. Lot’s of things can slow you down
197. Measure everything
198. Establish a performance culture
199. Dashboards
202. Things are changing all the time
203. Stay up-to-date
204. http://speakerdeck.com/u/bastianhofmann
205. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de