Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Performance Optimisation


Published on

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

Published in: Internet
  • Login to see the comments

Performance Optimisation

  1. 1. Performance Optimisation Fabio Cicerchia
  2. 2. Who am I?
  3. 3. Fabio Cicerchia 3 Senior Full-Stack Developer @fabiocicerchia Working for: Performance Optimisation - Fabio Cicerchia
  4. 4. Let’s talk about...
  5. 5. 6 Performance is a process not a project Every engineer should think about performance Performance Optimisation - Fabio Cicerchia
  6. 6. Time is Money Unfortunately you can’t buy it, so don’t waste it 7Performance Optimisation - Fabio Cicerchia
  7. 7. Performance matters 8Performance Optimisation - Fabio Cicerchia
  8. 8. Measuring 9
  9. 9. How? 1. Accurately measure page performance 2. Be unobtrusive 3. Have a good sampling 4. Focus on useful metrics 10Performance Optimisation - Fabio Cicerchia
  10. 10. 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 11Performance Optimisation - Fabio Cicerchia
  11. 11. 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 12Performance Optimisation - Fabio Cicerchia
  12. 12. Percentiles Percentiles are perfect for automatic baselining. Averages can be misleading. Keep an eye on: 50th percentile = Median 95th percentile 98th percentile 99th percentile 13Performance Optimisation - Fabio Cicerchia
  13. 13. You can't improve what you can’t measure — Osho 14Performance Optimisation - Fabio Cicerchia
  14. 14. Metrics
  15. 15. 16Performance Optimisation - Fabio Cicerchia
  16. 16. 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 17Performance Optimisation - Fabio Cicerchia
  17. 17. 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 18Performance Optimisation - Fabio Cicerchia
  18. 18. 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. 19Performance Optimisation - Fabio Cicerchia
  19. 19. 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
  20. 20. 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). 21Performance Optimisation - Fabio Cicerchia
  21. 21. Some Figures
  22. 22. 3rd Party? 3rd party calls can make up >50% of page requests. They are the single greatest potential point of failure for web pages. 23Performance Optimisation - Fabio Cicerchia
  23. 23. 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 24Performance Optimisation - Fabio Cicerchia
  24. 24. Images? On average, 64% of a website’s page weight is made up of images. – HTTP Archive 25Performance Optimisation - Fabio Cicerchia
  25. 25. Redirect? 20% pages contains 5 or more redirects. And 3% of pages contained 10 or more. 26Performance Optimisation - Fabio Cicerchia
  26. 26. 27 C’mon it’s just a small delay... YEAH, SURE! Performance Optimisation - Fabio Cicerchia
  27. 27. 100ms slower? 1% drop in sales (Amazon) 28Performance Optimisation - Fabio Cicerchia
  28. 28. 500ms slower? 25% drop in searches (Google) 29Performance Optimisation - Fabio Cicerchia
  29. 29. 1 second slower? 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions 30Performance Optimisation - Fabio Cicerchia
  30. 30. 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%. 31Performance Optimisation - Fabio Cicerchia
  31. 31. 3 seconds slower? 53% of visits to mobile sites are abandoned after 3 seconds – Google's DoubleClick. 32Performance Optimisation - Fabio Cicerchia
  32. 32. 4 seconds? Only 2% of the top 100 ecommerce sites loads in fewer than 4 seconds on smartphones. 33Performance Optimisation - Fabio Cicerchia
  33. 33. 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. 34Performance Optimisation - Fabio Cicerchia
  34. 34. 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. 35Performance Optimisation - Fabio Cicerchia
  35. 35. 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. 36Performance Optimisation - Fabio Cicerchia
  36. 36. Long story short...
  37. 37. 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 38Performance Optimisation - Fabio Cicerchia
  38. 38. So, how to do it?
  39. 39. 40Performance Optimisation - Fabio Cicerchia too many irons in the fire
  40. 40. 41 WPO (Web Performance Optimisation) Optimise the poorly performing networks and servers Performance Optimisation - Fabio Cicerchia
  41. 41. 42Performance Optimisation - Fabio Cicerchia FEO (Front-End Optimisation) Change the content to decrease the amount of traffic
  42. 42. 43Performance Optimisation - Fabio Cicerchia WCO (Web Content Optimisation) Make the page rendering faster
  43. 43. 44Performance Optimisation - Fabio Cicerchia DSA (Dynamic Site Acceleration) Bring network resources closer to the user by prefetching or caching files
  44. 44. 45Performance Optimisation - Fabio Cicerchia
  45. 45. Let’s do it!
  46. 46. Level 0 Noob 47
  47. 47. GZip You send zipped content over the wire, the browser unpacks it Modern browsers understand compressed content Search engine spiders do too 48Performance Optimisation - Fabio Cicerchia
  48. 48. Minify Minify JavaScript and CSS Inline styles and scripts should also be minified The Source Maps are loaded only in Dev Mode 49Performance Optimisation - Fabio Cicerchia
  49. 49. 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 50Performance Optimisation - Fabio Cicerchia
  50. 50. 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 51Performance Optimisation - Fabio Cicerchia
  51. 51. Choose horizontal over vertical when possible Combine similar colors Keep color count low Don’t leave big gaps Optimise CSS Sprites 52Performance Optimisation - Fabio Cicerchia
  52. 52. 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 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 Back to basics 53Performance Optimisation - Fabio Cicerchia
  53. 53. Level 1 Getting Serious 54
  54. 54. 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 55Performance Optimisation - Fabio Cicerchia
  55. 55. 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 56Performance Optimisation - Fabio Cicerchia
  56. 56. 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 57Performance Optimisation - Fabio Cicerchia
  57. 57. Items you'll need in the future Unconditional preload ( loads a sprite onload) Conditional preload ( 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 58Performance Optimisation - Fabio Cicerchia
  58. 58. Option 1: Separate subdomain ( Option 2: A new domain (e.g.,, Use Cookie-Free Domains 59Performance Optimisation - Fabio Cicerchia
  59. 59. 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 60Performance Optimisation - Fabio Cicerchia
  60. 60. 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 61Performance Optimisation - Fabio Cicerchia
  61. 61. 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 62Performance Optimisation - Fabio Cicerchia
  62. 62. 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 63Performance Optimisation - Fabio Cicerchia
  63. 63. Level 2 Advanced 64
  64. 64. 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 65Performance Optimisation - Fabio Cicerchia
  65. 65. 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 66Performance Optimisation - Fabio Cicerchia
  66. 66. 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 67Performance Optimisation - Fabio Cicerchia
  67. 67. 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. 68Performance Optimisation - Fabio Cicerchia
  68. 68. VanillaJS 69Performance Optimisation - Fabio Cicerchia
  69. 69. Blocks rendering, freezes the browser Increased memory consumption Per element, not per image Avoid Filters 70Performance Optimisation - Fabio Cicerchia
  70. 70. Web Fonts Blocks text rendering Fonts are bigger than 14Kb Use them with care Remove characters 71Performance Optimisation - Fabio Cicerchia
  71. 71. 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. 72Performance Optimisation - Fabio Cicerchia
  72. 72. Animations Don’t animate from JavaScript for basic stuff Use requestAnimationFrame Have a look at GSAP (20x faster than jQuery) and VelocityJS 73Performance Optimisation - Fabio Cicerchia
  73. 73. HTML5 Features Application Cache Service Workers Web Storage Web Workers Navigation Timing API Web Sockets 74Performance Optimisation - Fabio Cicerchia
  74. 74. 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 75Performance Optimisation - Fabio Cicerchia
  75. 75. Level 3 Behind the Scenes
  76. 76. 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 77Performance Optimisation - Fabio Cicerchia
  77. 77. CDN Get a Content Delivery Network: Akamai CDNify (from $10/m) CloudFlare (free-mium) MaxCDN (from $9/m) 78Performance Optimisation - Fabio Cicerchia
  78. 78. CDN (cont’d) 79Performance Optimisation - Fabio Cicerchia
  79. 79. 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 80Performance Optimisation - Fabio Cicerchia
  80. 80. Cache (cont’d) There are only two hard things in Computer Science: cache invalidation and naming things — Phil Karlton 81Performance Optimisation - Fabio Cicerchia
  81. 81. 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. 82Performance Optimisation - Fabio Cicerchia
  82. 82. 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 83Performance Optimisation - Fabio Cicerchia
  83. 83. 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
  84. 84. 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. 85Performance Optimisation - Fabio Cicerchia
  85. 85. Level 4 Backend Superstar
  86. 86. XHProf 87Performance Optimisation - Fabio Cicerchia
  87. 87. SF Profiler 88Performance Optimisation - Fabio Cicerchia
  88. 88. Level 5 Mobile Ninja
  89. 89. 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 90Performance Optimisation - Fabio Cicerchia
  90. 90. Level 6 Guru 91
  91. 91. 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. 92Performance Optimisation - Fabio Cicerchia
  92. 92. 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 93Performance Optimisation - Fabio Cicerchia
  93. 93. 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) 94Performance Optimisation - Fabio Cicerchia
  94. 94. AMP (cont’d) 95Performance Optimisation - Fabio Cicerchia
  95. 95. 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
  96. 96. ESI Edge Side Includes is a language specification for assembling fragments of web pages inside other web pages. Example: <esi:include src="" alt="" onerror="continue"/> 97Performance Optimisation - Fabio Cicerchia
  97. 97. 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 98Performance Optimisation - Fabio Cicerchia
  98. 98. Databases Oracle → PostgreSQL → SQL Server → MongoDB → Redis → Memcached → Cassandra → OrientDB → 99Performance Optimisation - Fabio Cicerchia
  99. 99. Databases (cont’d) 100Performance Optimisation - Fabio Cicerchia
  100. 100. Tools
  101. 101. 102Performance Optimisation - Fabio Cicerchia
  102. 102. 103Performance Optimisation - Fabio Cicerchia
  103. 103. 104Performance Optimisation - Fabio Cicerchia
  104. 104. Understand the Waterfall 105Performance Optimisation - Fabio Cicerchia
  105. 105. Extra Show Slow Webpagetest Yslow PageSpeed GTMetrix RedBot Pingdom SPOF-O-Matic 106Performance Optimisation - Fabio Cicerchia
  106. 106. Extra (cont’d) Blackfire Yottaa Blitz Load Impact WonderNetwork Loader BlazeMeter WebTuna 107Performance Optimisation - Fabio Cicerchia
  107. 107. Books
  108. 108. 109BTW, ask me later a 50% discount on these books ;) Performance Optimisation - Fabio Cicerchia
  109. 109. Are you lazy?
  110. 110. 111Performance Optimisation - Fabio Cicerchia
  111. 111. 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 112Performance Optimisation - Fabio Cicerchia
  112. 112. Even if you apply just those 5 rules… Your page download times will drop by ~50% 113Performance Optimisation - Fabio Cicerchia
  113. 113. Premature optimization is the root of all evil — Donald Knuth 114Performance Optimisation - Fabio Cicerchia
  114. 114. BONUS
  115. 115. 116 Bonus #1 Performance Optimisation - Fabio Cicerchia
  116. 116. 117 Bonus #2 Performance Optimisation - Fabio Cicerchia
  117. 117. Bonus #3 118Performance Optimisation - Fabio Cicerchia
  118. 118. Thank you!
  119. 119. Questions?
  120. 120. 121Performance Optimisation - Fabio Cicerchia