Frontend Performance: Beginner to Expert to Crazy Person -- Intuit

Transcript

1. FrontEnd Performance Beginner to Expert to Crazy Person
2. Philip Tellis @bluesmoon http://tech.bluesmoon.info http://www.soasta.com/mpulse/
3. Get the most benefit with the least effort
4. 0 Start with a really slow site
5. 0.1 Start Measuring
6. Or use RUM for real user data (boomerang/mPulse)
7. 0.2 enable gzip http://www.slideshare.net/billwscott/improving-netflix-performance-experience
8. You can pre-gzip gzip_static in nginx
9. 0.2 gzip • For dynamic content, use chunked transfers with gzipped chunks • You can do this by flushing buffers on the server
10. 0.3 ImageOptim
11. 0.4 Cache Cache-control: public, max-age=31415926 Do NOT set LastModified or Etags headers
12. Yes, that was 10 million pies
13. 0 Congratulations You’ve just been promoted!
14. 1 What the Experts do
15. 1.1 CDN Serve your root domain through a CDN
16. 1.1 CDN And make sure your CSS is on the same domain http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html
17. 1.1 CDN Google Chrome will open two TCP connections to the primary host, one for the page, and the second "just in case"
18. 1.1 Google Chrome will open two TCP connections to the primary host, one for the page, and the second "just in case"
19. 1.1 Don’t waste it
20. 1.2 Split JavaScript • Critical: in the HEAD • Enhancements: loaded async • Flush buffers after the HEAD • for HTTP/2, these would have different priorities
21. 1.3 Audit your CSS
22. Also checkout uncss for a command line version (also with a grunt version) https://github.com/giakki/uncss https://github.com/addyosmani/grunt-uncss
23. 1.4 Parallelize downloads… or maybe don’t • You can have more bandwidth, but you cannot have lower latency • Mitigate latency effects by parallelizing across multiple TCP sockets • But with HTTP/2, this rule is turned on its head http://www.soasta.com/blog/more-bandwidth-isnt-a-magic-bullet-for-web-performance/
24. 1.5 Flush Early and Often Get bytes to the client ASAP to: • avoid TCP Slow Start, • speed up CSS • Help the browser’s lookahead parser
25. 1.6 Increase initcwnd Initial Congestion Window: Number of packets to send before waiting for an ACK http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum-performance/
26. 1.6 Increase initcwnd
27. 1.6 Increase initcwnd @mobtec on Twitter
28. 1.6b Also… net.ipv4.tcp_slow_start_after_idle=0 http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/
29. 1.7 PageSpeed mod_pagespeed and ngx_pagespeed
30. 1.8 Don’t just FastClick • FastClick fires a Click onTouchEnd • It might be better to initiate a TCP connect onTouchStart and fetch content normally onClick • Load a 0 byte image from the domain to do this
31. 1.9 Use UserTiming to measure your code • The UserTiming API allows you to set performance timeline marks within your code • performance.mark(“name”) • performance.measure(“name”, “start_mark”, “end_mark”) http://www.html5rocks.com/en/tutorials/webperformance/usertiming/
32. Relax
33. 2 You’ve reached crazyland
34. Sort in ascending order of signal latency • Electrons through copper • Light through fibre • Pulsars • Station Wagons • Smoke Signals
35. Sort in ascending order of signal latency 1.Pulsars (light through vacuum) 2.Smoke Signals (light through air) 3.Electrons through copper / Light through fibre 4.Station Wagons (possibly highest bandwidth)
36. 2.0 Bandwidth is different around the world
37. 2.0 As are people
38. 2.0 Study real user data Look for potential places to parallelize, predict and cache
39. 2.1 Use RUM to determine optimum POP location • Use RUM to measure latency from user to multiple POPs • Pick POP based on lowest latency • Adapt to changes in network topology http://www.slideshare.net/rmaheshw/velocity-2015-pops-and-rum
40. 2.1 Use RUM to determine best CDN • Use RUM to measure latency from user to multiple CDN providers • Dynamically pick CDN based on what works best
41. 2.2 Pre-load Pre-fetch assets required for the next page in a process flow
42. 2.2b pre-render <link rel="prerender" href="url"> <link rel="subresource" href="url"> <link rel="dns-prefetch" href="url">
43. 2.2b <link rel=“dns-prefetch”> • Does a DNS lookup for hostname mentioned in URL • This could help reduce latency when the request shows up — for first page views at least • Your DNS TTL needs to be long enough to survive past a page load
44. 2.2b <link rel=“subresource”> • Tells the parser that this resource will be required later on • Browser can start downloading in the background if it has nothing better to do with its resources • Resource needs to have suitable cache headers
45. 2.2b <link rel=“prerender”> • Tells the parser that this page is likely to be requested by the user • Browser downloads page, and all its resources, renders it, executes JavaScript and fires the onload event. • It’s like opening the page in a hidden Tab
46. 2.2b <link rel=“prerender”> • When user follows the URL, the page just shows up (< 5ms latency) • This is actually faster than switching tabs in the browser • The onVisibilityChange event fires and visibilityState changes from “prerender” to “visible” or “hidden”
47. 2.2b <link rel=“prerender”> — Caveats • The page needs to be requested using GET • The page should not require Authentication (401 response) • The calling page should NOT change the state of Cookies after the pre-rendered page has been requested
48. 2.2c onVisibilityChange And while you’re at it, don’t do expensive work if the page is hidden https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/ Using_the_Page_Visibility_API
49. 2.3 Post-load Fetch optional assets after onload
50. 2.4 Detect broken accept-encoding Many Windows anti-viruses and firewalls disable gzip by munging the Accept-Encoding header http://www.lognormal.com/blog/2012/08/17/accept-encoding-stats/
51. 2.5 HTTP/2 • Only one TCP connection per host • Do NOT use domain sharding • Do NOT use sprites • Do use Stream Multiplexing with Priorities • Do use Server Push http://chimera.labs.oreilly.com/books/1230000000545/ch12.html
52. — Tim Kadlec “4:2:0 subsampling of JPEGs gets a 62.5% memory savings” 2.6 Use 4:2:0 Chroma Subsampling Chroma Subsampling takes advantage of the fact that the human visual system is less sensitive to changes in colour than luminance http://en.wikipedia.org/wiki/Chroma_subsampling
53. 2.7 Resize Images for target Device Dimensions Resizing Images for specific screen sizes could be the difference between 1.5s and 30ms https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
54. 2.8 Don’t force layout operations • DOM manipulations followed by a read of invalidated properties forces a layout • This has a huge CPU impact • Read before write • Batch update • Move operations into the HEAD Amiya Gupta @ Velocity 2015
55. 2.9 Understand 3PoFs Use blackhole.webpagetest.org to test for 3rd party single points of failure http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
56. 2.9 3PoFs Request Map by Simon Hearne
57. 2.10 Understand the Iframe Loader Technique Take required but non-critical assets out of the critical path http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/
58. 2.11 Understand your SpeedIndex http://heatmap.webperf.tools/render/150611_88_af4b9ceaa938f1b4647ff2e8ed41b550/10000
59. 2.12 What does your site cost? http://whatdoesmysitecost.com/test/150611_N5_9495f479626f6589299f62e440724064
60. 2.13 Prioritize optimizations based on user impact Conversion Impact Score in mPulse DSWB
61. 2.14 Become a WebPageTest power user • Check out the comparison view • Collect packet captures • Use Wireshark • Test out different network types
62. References • WebPageTest — http://webpagetest.org • Boomerang — http://www.lognormal.com/boomerang/doc/ • SOASTA mPulse — http://www.soasta.com/mpulse • Netflix gzip study — http://www.slideshare.net/billwscott/improving-netflix-performance-experience • Nginx gzip_static — http://wiki.nginx.org/HttpGzipStaticModule • ImageOptim — http://imageoptim.com/ • uncss — https://github.com/giakki/uncss • grunt-uncss — https://github.com/addyosmani/grunt-uncss • Caching — http://www.mnot.net/cache_docs/ • Same domain CSS — http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html • initcwnd — http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum-performance/ • Linux TCP Tuning — http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/ • Prerender — https://developers.google.com/chrome/whitepapers/prerender • DNS prefetching — https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching • Subresource — http://www.chromium.org/spdy/link-headers-and-server-hint/link-rel-subresource • FE SPoF — http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html • Page Visibility API — https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Vis... • HTTP/2 — http://chimera.labs.oreilly.com/books/1230000000545/ch12.html • More Bandwidth is not a Magic Bullet — http://performancebeacon.com/more-bandwidth-isnt-a-magic-bullet-for... • The UserTiming API — http://www.html5rocks.com/en/tutorials/webperformance/usertiming/ • The 3.5s dash for attention — http://www.slideshare.net/buddybrewer/the-35s-dash-for-attention-and-other-stuff-we-... • POPs & RUM — http://www.slideshare.net/rmaheshw/velocity-2015-pops-and-rum • Optimizing Images for Mobile — https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015 • Optimizing the MSN Homepage — Amiya Gupta @ Velocity 2015 • Simon Hearne’s Webperf Tools — http://requestmap.webperf.tools and http://heatmap.webperf.tools • What does my site cost — http://whatdoesmysitecost.com
63. Thank You
64. Philip Tellis @bluesmoon http://tech.bluesmoon.info http://www.soasta.com/mpulse/
65. Image Credits • Apple Pie
 http://www.flickr.com/photos/24609729@N00/3353226142/ • Kittens in a PC
 http://www.flickr.com/photos/43525343@N08/6417971383/