Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance Optimisation

Performance Optimisation

Little introduction to different techniques useful to optimise and improve your website performance.

944ea93d87f2872251a6c05a68c3d4be?s=128

Fabio Cicerchia

November 29, 2016
Tweet

Transcript

  1. Performance Optimisation Fabio Cicerchia

  2. Who am I?

  3. Fabio Cicerchia 3 Senior Full-Stack Developer @fabiocicerchia Working for: Performance

    Optimisation - Fabio Cicerchia
  4. Let’s talk about...

  5. None
  6. 6 Performance is a process not a project Every engineer

    should think about performance Performance Optimisation - Fabio Cicerchia
  7. Time is Money Unfortunately you can’t buy it, so don’t

    waste it 7 Performance Optimisation - Fabio Cicerchia
  8. Performance matters 8 Performance Optimisation - Fabio Cicerchia

  9. Measuring 9

  10. How? 1. Accurately measure page performance 2. Be unobtrusive 3.

    Have a good sampling 4. Focus on useful metrics 10 Performance Optimisation - Fabio Cicerchia
  11. Random Sampling How to randomise? • Pick 10% of users

    at random and always test them • For each user, decide at random if they should be tested 11 Performance Optimisation - Fabio Cicerchia http://tech.bluesmoon.info/2010/01/statistics-of-performance-measurement.html http://xkcd.com/221/
  12. Central Tendency Mean(10, 11, 12, 11, 109) = 30 Affected

    by outliers Median(10, 11, 12, 11, 109) = 11 Central tendency Mode(10, 11, 12, 11, 109) = 11 Most recurring value, not often used 12 Performance Optimisation - Fabio Cicerchia
  13. Percentiles • Percentiles are perfect for automatic baselining. • Averages

    can be misleading. Keep an eye on: • 50th percentile = Median • 95th percentile • 98th percentile • 99th percentile 13 Performance Optimisation - Fabio Cicerchia http://apmblog.dynatrace.com/2012/11/14/why-averages-suck-and-percentiles-are-great/
  14. You can't improve what you can’t measure — Osho 14

    Performance Optimisation - Fabio Cicerchia
  15. Metrics

  16. 16 Performance Optimisation - Fabio Cicerchia

  17. TTFB The Time To First Byte metric is affected by

    3 components: • The time the request takes to reach the web server • The time the web server takes to process the request and generate the response • The time the response takes to go back to your browser 17 Performance Optimisation - Fabio Cicerchia https://moz.com/blog/improving-search-rank-by-optimizing-your-time-to-first-byte
  18. TTLB As per TTFB the reasons for a high Time

    To Last Byte could be: • Geographic latency (server is far away from visitor) • Poorly written server-side code • Outdated server hardware • Overloaded servers (clogged bandwidth due to high traffic – from humans, bots, or both) • Poorly organized databases • Poorly written database code 18 Performance Optimisation - Fabio Cicerchia
  19. DOM Content Loaded It’s fired when the HTML document has

    been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious. 19 Performance Optimisation - Fabio Cicerchia https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  20. Full Load document.addEventListener('DOMContentLoaded', function (event) { console.log('DOM fully loaded and

    parsed'); }); function load() { console.log('load event detected!'); } window.onload = load; $(document).ready(function () { console.log('ready'); }); $(window).load(function () { console.log('loaded'); }); 20 OUTPUT 1. ready 2. DOM fully loaded and parsed 3. load event detected! 4. loaded 1 2 3 4 Performance Optimisation - Fabio Cicerchia
  21. Speed Index The Speed Index is the average time at

    which visible parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port. The Speed Index metric measures how quickly the page contents are visually populated (where lower numbers are better). 21 Performance Optimisation - Fabio Cicerchia https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  22. Some Figures

  23. 3rd Party? 3rd party calls can make up >50% of

    page requests. They are the single greatest potential point of failure for web pages. 23 Performance Optimisation - Fabio Cicerchia http://www.webperformancetoday.com/2011/07/14/fourth-party-calls-third-party-content/
  24. GZip? • GZIP compression saves 50% to 80% bandwidth and

    it will significantly increase the website’s loading speed. • Netflix saw a 43% drop in outbound traffic after enabling compression 24 Performance Optimisation - Fabio Cicerchia https://www.keycdn.com/blog/website-performance-optimization/ https://cdnify.com/blog/15-web-performance-stats/
  25. Images? On average, 64% of a website’s page weight is

    made up of images. – HTTP Archive 25 Performance Optimisation - Fabio Cicerchia http://httparchive.org/interesting.php
  26. Redirect? 20% pages contains 5 or more redirects. And 3%

    of pages contained 10 or more. 26 Performance Optimisation - Fabio Cicerchia https://www.soasta.com/blog/23-stats-mobile-web-performance-monitoring/
  27. 27 C’mon it’s just a small delay... YEAH, SURE! Performance

    Optimisation - Fabio Cicerchia
  28. 100ms slower? 1% drop in sales (Amazon) 28 Performance Optimisation

    - Fabio Cicerchia http://www.carbon60.com/blog/milliseconds-are-money-how-much-performance-matters-in-the-cloud
  29. 500ms slower? 25% drop in searches (Google) 29 Performance Optimisation

    - Fabio Cicerchia https://cdnify.com/blog/15-web-performance-stats/
  30. 1 second slower? 11% fewer page views, a 16% decrease

    in customer satisfaction, and 7% loss in conversions 30 Performance Optimisation - Fabio Cicerchia http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx
  31. 2 seconds slower? During a transaction results in abandonment rates

    of up to 87%. This is significantly higher than the average abandonment rate of 70%. 31 Performance Optimisation - Fabio Cicerchia https://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/
  32. 3 seconds slower? 53% of visits to mobile sites are

    abandoned after 3 seconds – Google's DoubleClick. 32 Performance Optimisation - Fabio Cicerchia https://wpostats.com/
  33. 4 seconds? Only 2% of the top 100 ecommerce sites

    loads in fewer than 4 seconds on smartphones. 33 Performance Optimisation - Fabio Cicerchia https://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/
  34. 10 seconds? • 1 out of 4 pages took more

    than 10 seconds to load. • 20% of the top 100 ecommerce sites loads in more than 10 seconds. 34 Performance Optimisation - Fabio Cicerchia https://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/
  35. To infinity... and beyond! • According to Google's DoubleClick, when

    comparing sites that load in 5 seconds to sites that load in 19 seconds, the faster sites had 70% longer average session lengths, 35% lower bounce rates and 25% higher ad viewability than their slower counterparts. • Google's DoubleClick found that publishers whose mobile sites load in 5 seconds earn up to 2x more mobile ad revenue than sites loading in 19 seconds. 35 Performance Optimisation - Fabio Cicerchia https://wpostats.com/
  36. Poor Performances = Web Stress Brain wave analysis from the

    experiment revealed that participants had to concentrate up to 50% more when using badly performing websites, while facial muscle and behavioural analysis of the subjects also revealed greater agitation and stress in these periods. 36 Performance Optimisation - Fabio Cicerchia http://www.ca.com/Files/SupportingPieces/final_webstress_survey_report_229296.pdf
  37. Long story short...

  38. You are LOSING Visitors You are LOSING Sales You are

    LOSING Ad-revenue You are WASTING SEO/SEM/PPC budget SPENDING $$$ on bandwidth and servers 38 Performance Optimisation - Fabio Cicerchia
  39. So, how to do it?

  40. 40 Performance Optimisation - Fabio Cicerchia too many irons in

    the fire
  41. 41 WPO (Web Performance Optimisation) Optimise the poorly performing networks

    and servers Performance Optimisation - Fabio Cicerchia https://devcentral.f5.com/articles/wils-wpo-versus-feo
  42. 42 Performance Optimisation - Fabio Cicerchia FEO (Front-End Optimisation) Change

    the content to decrease the amount of traffic https://devcentral.f5.com/articles/wils-wpo-versus-feo
  43. 43 Performance Optimisation - Fabio Cicerchia WCO (Web Content Optimisation)

    Make the page rendering faster http://www.webperformancetoday.com/2011/06/10/wpo-wco-feo-web-performance-optimization/
  44. 44 Performance Optimisation - Fabio Cicerchia DSA (Dynamic Site Acceleration)

    Bring network resources closer to the user by prefetching or caching files https://en.wikipedia.org/wiki/Dynamic_site_acceleration
  45. 45 Performance Optimisation - Fabio Cicerchia

  46. Let’s do it!

  47. Level 0 Noob 47

  48. GZip • You send zipped content over the wire, the

    browser unpacks it • Modern browsers understand compressed content • Search engine spiders do too 48 Performance Optimisation - Fabio Cicerchia
  49. Minify • Minify JavaScript and CSS • Inline styles and

    scripts should also be minified • The Source Maps are loaded only in Dev Mode 49 Performance Optimisation - Fabio Cicerchia https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
  50. Avoid 404s • Useless requests • When an external JavaScript

    is a 404, the browser will still try to parse it and find something usable in it • They’ll slow down the UX 50 Performance Optimisation - Fabio Cicerchia
  51. Optimise Images • Lossless optimisation • Correct dimensions • Save

    for web • Use the right file format: GIF for animations, JPEG for photograph, otherwise PNG • Don’t Scale Images in HTML 51 Performance Optimisation - Fabio Cicerchia http://www.creativebloq.com/netmag/10-ways-optimise-images-better-performance-71515792
  52. • Choose horizontal over vertical when possible • Combine similar

    colors • Keep color count low • Don’t leave big gaps Optimise CSS Sprites 52 Performance Optimisation - Fabio Cicerchia
  53. Yahoo’s Rules • Minimize HTTP Requests • Use a Content

    Delivery Network • Add an Expires or a Cache-Control Header • Gzip Components • Put StyleSheets at the Top • Put Scripts at the Bottom • Avoid CSS Expressions • Make JavaScript and CSS External • Reduce DNS Lookups • Minify JavaScript and CSS • Avoid Redirects • Remove Duplicate Scripts • Configure ETags • Make AJAX Cacheable • Use GET for AJAX Requests • Reduce the Number of DOM Elements • No 404s • Reduce Cookie Size • Use Cookie-Free Domains for Components • Avoid Filters • Do Not Scale Images in HTML • Make favicon.ico Small & Cacheable Google’s Rules • Avoid bad requests • Avoid CSS expressions • Combine external CSS • Combine external JavaScript • Defer loading of JavaScript • Enable compression • Leverage browser caching • Leverage proxy caching • Minify CSS • Minify HTML • Minify JavaScript • Minimize request size • Minimize DNS lookups • Minimize redirects • Optimize images • Optimize the order of styles and scripts • Parallelize downloads across hostnames • Put CSS in the document head • Remove unused CSS • Serve resources from a consistent URL • Serve scaled images • Serve static content from a cookieless domain • Specify a character set early • Specify image dimensions • Use efficient CSS selectors Back to basics 53 Performance Optimisation - Fabio Cicerchia http://code.google.com/speed/page-speed/docs/rules_intro.html http://developer.yahoo.com/yslow/help/#guidelines
  54. Level 1 Getting Serious 54

  55. Favicon.ico • The browser will request it • Better not

    respond with a 404 • Cookies are sent • Cannot be on CDN • Interferes with the download sequence • Make it small (<= 1K) • Animated favicons are not cool • Set Expires header 55 Performance Optimisation - Fabio Cicerchia
  56. Minimise iframes Pros: • Can help with slow third-party content

    like badges and ads • Security sandbox • You can download scripts in parallel Cons: • They have a cost even if blank • They block page onload • Non-semantic 56 Performance Optimisation - Fabio Cicerchia
  57. What's absolutely required in order to render the page initially?

    The rest can wait (drag and drop, animations, hidden content, images below the fold) Post-load Components 57 Performance Optimisation - Fabio Cicerchia
  58. • Items you'll need in the future • Unconditional preload

    (google.com loads a sprite onload) • Conditional preload (search.yahoo.com after you type in the input box) • Anticipated preload – preload in advance before launching a redesign • When you start typing the page can safely assume you’ll hit the search results page Preload Components 58 Performance Optimisation - Fabio Cicerchia
  59. Option 1: Separate subdomain (static.example.org) Option 2: A new domain

    (e.g. yimg.com, ytimg.com, images-amazon.com) Use Cookie-Free Domains 59 Performance Optimisation - Fabio Cicerchia
  60. ETags • ETag is a token that can be associated

    with a web resource • ETags are meant to help with caching ◦ They take precedence for caching ◦ They never expire • Issues with load balanced environment ◦ A component served from server A has a different ETag than the same component served from B • Most of the time you don’t need them 60 Performance Optimisation - Fabio Cicerchia https://techpunch.co.uk/development/should-your-site-be-using-etags-or-not https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching
  61. Reduce Cookies • Eliminate unnecessary cookies • Keep cookie sizes

    as low as possible to minimize the impact on the user response time • Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected • Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time 61 Performance Optimisation - Fabio Cicerchia
  62. • Don't wait for onload, use DOMContentLoaded • Events bubble

    up, so use delegation (attach listeners to outer elements) • Clean up to prevent IE memory leaks • Careful with onresize Event Handlers 62 Performance Optimisation - Fabio Cicerchia
  63. • CSS should be at the top • @import blocks

    parallel downloads • In IE @import is the same as putting <link> at the bottom • <link> allows alternate styles (e.g. for accessibility) Choose <link> over @import 63 Performance Optimisation - Fabio Cicerchia http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ http://alistapart.com/article/alternate
  64. Level 2 Advanced 64

  65. Reduce DOM Elements World's fastest page? about:blank! A complex page

    means more bytes to download, it also means slower DOM access in JavaScript Easy to test, just type in Firebug’s console: document.getElementsByTagName('*').length 65 Performance Optimisation - Fabio Cicerchia
  66. Prefetching • DNS prefetching → resolve the DNS • Preconnect

    → resolve the DNS + TCP handshake + TLS negotiation (optional) • Prefetch → requesting, downloading and storing the asset in the cache • Prerender → load all of the assets of a certain document 66 Performance Optimisation - Fabio Cicerchia https://css-tricks.com/prefetching-preloading-prebrowsing/
  67. ATF The most important and interesting section should be at

    the top of the webpage Make sure to render the Above The Fold content in < 1s Defer the non-AFT contents 67 Performance Optimisation - Fabio Cicerchia http://whereisthefold.com/
  68. Requests Sharding ​Domain sharding is a technique for splitting resources

    across multiple domains, improving page load time. When multiple domains are used, browsers are able to download more resources simultaneously, resulting in a faster user experience. Note: ​HTTP/2 has officially replaced SPDY and made it obsolete. 68 Performance Optimisation - Fabio Cicerchia https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/ https://www.stevesouders.com/blog/2013/09/05/domain-sharding-revisited/
  69. VanillaJS 69 Performance Optimisation - Fabio Cicerchia http://vanilla-js.com/

  70. • Blocks rendering, freezes the browser • Increased memory consumption

    • Per element, not per image Avoid Filters 70 Performance Optimisation - Fabio Cicerchia
  71. Web Fonts • Blocks text rendering • Fonts are bigger

    than 14Kb • Use them with care • Remove characters 71 Performance Optimisation - Fabio Cicerchia
  72. WebP WebP is a modern image format that provides superior

    lossless and lossy compression for images on the web. WebP lossless images are 26% smaller than PNGs and 25-34% smaller than JPEG images. 72 Performance Optimisation - Fabio Cicerchia https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study https://developers.google.com/speed/webp/
  73. Animations • Don’t animate from JavaScript for basic stuff •

    Use requestAnimationFrame • Have a look at GSAP (20x faster than jQuery) and VelocityJS 73 Performance Optimisation - Fabio Cicerchia https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance https://developer.mozilla.org/en-US/Apps/Fundamentals/Performance/CSS_JavaScript_animation_performance https://greensock.com/js/speed.html http://velocityjs.org
  74. HTML5 Features • Application Cache Service Workers • Web Storage

    • Web Workers • Navigation Timing API • Web Sockets 74 Performance Optimisation - Fabio Cicerchia www.mobilehtml5.org https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
  75. CRP Optimizing the Critical Rendering Path refers to prioritising the

    display of content that relates to the current user action. Perceived Performance is a measure of how quick a user thinks your site is 75 Performance Optimisation - Fabio Cicerchia https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ https://www.smashingmagazine.com/2015/08/understanding-critical-css/ http://blog.teamtreehouse.com/perceived-performance
  76. Level 3 Behind the Scenes

  77. Latency Latency is the amount of time it takes to

    transmit a single piece of data from one location to another 1. Decrease External HTTP Requests 2. DNS Prefetching 3. Preconnect 4. Use a CDN 5. HTTP/2 6. Caching 77 Performance Optimisation - Fabio Cicerchia https://www.keycdn.com/blog/latency-optimization/
  78. CDN Get a Content Delivery Network: • Akamai • CDNify

    (from $10/m) • CloudFlare (free-mium) • MaxCDN (from $9/m) 78 Performance Optimisation - Fabio Cicerchia http://www.cdnplanet.com/cdns/ http://www.cdncalc.com/
  79. CDN (cont’d) 79 Performance Optimisation - Fabio Cicerchia

  80. What is dynamic content? Almost everything is static for a

    time. The hard part is to reduce the miss rate. What can you cache? • DB Results • Functions Output • Generated HTML Cache 80 Performance Optimisation - Fabio Cicerchia https://www.digitalocean.com/community/tutorials/web-caching-basics-terminology-http-headers-and-caching-strategies https://www.mnot.net/cache_docs/
  81. Cache (cont’d) There are only two hard things in Computer

    Science: cache invalidation and naming things — Phil Karlton 81 Performance Optimisation - Fabio Cicerchia
  82. SPDY SPDY is now deprecated • Allows concurrent HTTP requests

    in one TCP session. • Reduces the bandwidth used by HTTP (header compression & cleaning useless headers). • Makes SSL the underlying transport protocol, for better security and compatibility with existing network infrastructure. 82 Performance Optimisation - Fabio Cicerchia https://www.chromium.org/spdy/spdy-whitepaper
  83. HTTP/2 • Origins from SPDY by Google • HTTP/2 is

    protocol designed for ◦ Low latency transport of content over the Web • No change to HTTP semantics ◦ It’s about how data travels through the wire • Key new features in HTTP/2 ◦ Multiplexing: multiple streams over a single connection ◦ Header compression: reuse headers from previous requests ◦ Server push: multiple parallel responses for a single request ◦ Prioritisation: some resources have priorities 83 Performance Optimisation - Fabio Cicerchia http://www.slideshare.net/nakov/http2-for-developers
  84. HTTP/2 (cont’d) 84 HTTP/1 workarounds hurt HTTP/2 perf. Anti-patterns •

    Domain Sharding • Images Sprites • Resource In-Lining • Merging CSS & JS Performance Optimisation - Fabio Cicerchia https://daniel.haxx.se/http2/ http://caniuse.com/#feat=http2 http://www.itbusinessedge.com/slideshows/best-practices-of-http1.1-becoming-bad-practices-for-http2.html
  85. SSL • HTTPS requires an initial handshake despite it’s size

    (~5KB) it can be very slow. • Making lots of short requests over HTTPS will be quite a bit slower than HTTP, but if you transfer a lot of data in a single request, the difference will be insignificant. • Solution: Improve the Handshake + Keep-Alive. 85 Performance Optimisation - Fabio Cicerchia https://www.maxcdn.com/blog/ssl-performance-myth/ https://unhandledexpression.com/2013/01/25/5-easy-tips-to-accelerate-ssl/ http://blog.haproxy.com/2011/09/16/benchmarking_ssl_performance/
  86. Level 4 Backend Superstar

  87. XHProf 87 Performance Optimisation - Fabio Cicerchia

  88. SF Profiler 88 Performance Optimisation - Fabio Cicerchia

  89. Level 5 Mobile Ninja

  90. Summary • Slow Network → Reduce Reqs + Reduce Bytes

    • Weak CPU = Slow JS → Async + Defer • Focus on ATF • Different Connection Model → Reduce domain sharding, Reduce 304s • Cache → localStorage 90 Performance Optimisation - Fabio Cicerchia http://browserbench.org/JetStream/ http://queue.acm.org/detail.cfm?id=2510122
  91. Level 6 Guru 91

  92. PRPL PRPL is a pattern for structuring and serving Progressive

    Web Apps, with an emphasis on the performance of app delivery and launch. It stands for: • Push, critical resources for the initial URL route. • Render, initial route. • Pre-cache, remaining routes. • Lazy-load, and create remaining routes on demand. 92 Performance Optimisation - Fabio Cicerchia https://developers.google.com/web/fundamentals/performance/prpl-pattern/
  93. AMP AMP is a way to build web pages for

    static content that render fast — Google Accelerated Mobile Pages in Google Index: • 600 million AMP Pages • 700,000 Domains • 100+ Languages 93 Performance Optimisation - Fabio Cicerchia
  94. AMP (cont’d) We found that AMP pages load four times

    faster, and use eight times less data than traditional mobile optimized pages — Jon Parise (Product Engineer, Pinterest) 94 Performance Optimisation - Fabio Cicerchia https://engineering.pinterest.com/blog/building-faster-mobile-web-experience-amp
  95. AMP (cont’d) 95 Performance Optimisation - Fabio Cicerchia https://www.ampproject.org/docs/get_started/create

  96. AMP (cont’d) 96 Gotchas: • No 3rd party Javascript •

    External resources must define static dimensions • All CSS must be inline (50k max) • Only GPU-Accelerated animations • Prioritize Resource Loading Performance Optimisation - Fabio Cicerchia https://www.lireo.com/wordcamp-columbus-2016-using-google-accelerated-mobile-pages-with-wordpress/
  97. ESI Edge Side Includes is a language specification for assembling

    fragments of web pages inside other web pages. Example: <esi:include src="http://example.com/1.html" alt="http://bak.example.com/2.html" onerror="continue"/> 97 Performance Optimisation - Fabio Cicerchia http://www.w3.org/TR/esi-lang https://www.smashingmagazine.com/2015/02/using-edge-side-includes-in-varnish/
  98. Reverse Proxy A Reverse Proxy is a type of proxy

    server that retrieves resources on behalf of a client from one or more servers. These resources are then returned to the client as if they originated from the proxy server itself. Common choices: • Varnish • Squid • HAProxy • Nginx 98 Performance Optimisation - Fabio Cicerchia https://en.wikipedia.org/wiki/Reverse_proxy http://stackoverflow.com/questions/224664/difference-between-proxy-server-and-reverse-proxy-server
  99. Databases • Oracle → https://oracle-base.com/articles/10g/performance-tuning-enhancements-10g • PostgreSQL → https://wiki.postgresql.org/wiki/Performance_Optimization •

    SQL Server → https://www.mssqltips.com/sql-server-tip-category/9/performance-tuning/ • MongoDB → http://www.mikitamanko.com/blog/2013/12/06/mongodb-performance-bottlenecks-optimization-strategies-for-mongodb/ • Redis → http://shokunin.co/blog/2014/11/11/operational_redis.html • Memcached → http://cachelot.io/blog/2015/04/20/Speed-up-your-application-by-fine-tuning-Memcached.html • Cassandra → https://tobert.github.io/pages/als-cassandra-21-tuning-guide.html • OrientDB → http://orientdb.com/docs/2.1/Performance-Tuning.html • Neo4j → https://neo4j.com/blog/neo4j-2-2-query-tuning/ • CouchDB → http://guide.couchdb.org/draft/performance.html 99 Performance Optimisation - Fabio Cicerchia
  100. Databases (cont’d) http://lmgtfy.com/?q=database+optimisation 100 Performance Optimisation - Fabio Cicerchia

  101. Tools

  102. 102 Performance Optimisation - Fabio Cicerchia

  103. 103 Performance Optimisation - Fabio Cicerchia

  104. 104 Performance Optimisation - Fabio Cicerchia

  105. Understand the Waterfall 105 Performance Optimisation - Fabio Cicerchia http://www.webperformancetoday.com/2014/03/18/waterfalls-101-how-to-use-a-waterfall-chart-to-diagnose-performance-pains/

  106. Extra • Show Slow www.showslow.com • Webpagetest www.webpagetest.org • Yslow

    http://yslow.org/ • PageSpeed https://developers.google.com/speed/pagespeed/ • GTMetrix http://gtmetrix.com/ • RedBot http://redbot.org/ • Pingdom https://tools.pingdom.com/ • SPOF-O-Matic https://chrome.google.com/webstore/search/spof-o-matic • XHProf http://github.com/facebook/xhprof • HTTPWatch https://www.httpwatch.com/ 106 Performance Optimisation - Fabio Cicerchia
  107. Extra (cont’d) • Blackfire https://blackfire.io/ • Yottaa http://www.yottaa.com/ • Blitz

    https://www.blitz.io/ • Load Impact https://loadimpact.com/ • WonderNetwork https://wondernetwork.com/loadtesting • Loader https://loader.io/ • BlazeMeter https://www.blazemeter.com/ • WebTuna http://www.webtuna.com/ • Fiddler http://www.telerik.com/fiddler 107 Performance Optimisation - Fabio Cicerchia
  108. Books

  109. 109 BTW, ask me later a 50% discount on these

    books ;) Performance Optimisation - Fabio Cicerchia
  110. Are you lazy?

  111. 111 Performance Optimisation - Fabio Cicerchia

  112. Which ones are the most important/common? These 5 ones: •

    Reduce Page Size (<500Kb) • Enable (GZip) Compression • Reduce the number of roundtrips (<40 per page) • HTTP Cache Headers (cache long & prosper) • Structure the page (to improve render & download) ◦ CSS First ◦ Javascript last 112 Performance Optimisation - Fabio Cicerchia
  113. Even if you apply just those 5 rules… Your page

    download times will drop by ~50% 113 Performance Optimisation - Fabio Cicerchia
  114. Premature optimization is the root of all evil — Donald

    Knuth 114 Performance Optimisation - Fabio Cicerchia
  115. BONUS

  116. https://github.com/davidsonfellipe/awesome-wpo 116 Bonus #1 Performance Optimisation - Fabio Cicerchia

  117. http://lmgtfy.com/?q=web+performance+optimisation 117 Bonus #2 Performance Optimisation - Fabio Cicerchia

  118. Bonus #3 118 Performance Optimisation - Fabio Cicerchia

  119. Thank you!

  120. Questions?

  121. 121 Performance Optimisation - Fabio Cicerchia http://bit.do/skjobs