Getting and Staying Fast - A Web Performance Round-up

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.

Ded87c77266697ee6981c2277bb97633?s=128

Bastian Hofmann

October 25, 2017
Tweet

Transcript

  1. Getting and staying fast A web performance round-up @BastianHofmann

  2. None
  3. None
  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

  15. None
  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/

  24. None
  25. http://graphiteapp.org/

  26. None
  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

  59. None
  60. None
  61. A bit higher level

  62. https://blackfire.io/

  63. https://tidyways.io/

  64. $framework Debug Toolbar

  65. None
  66. None
  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

  70. None
  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

  90. None
  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

  107. None
  108. Resource Timing API http://www.w3.org/TR/resource-timing/

  109. None
  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

  115. None
  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

  120. None
  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/

  132. None
  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?

  161. None
  162. None
  163. First Paint Timing API https://developer.mozilla.org/en-US/docs/Web/API/ PerformancePaintTiming

  164. WebpageTest https://www.webpagetest.org/

  165. None
  166. None
  167. Lighthouse https://developers.google.com/web/tools/lighthouse/

  168. None
  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

  195. None
  196. Lot’s of things can slow you down

  197. Measure everything

  198. Establish a performance culture

  199. Dashboards

  200. None
  201. None
  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