Performance Optimisation

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

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