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

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

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

Philip Tellis

June 11, 2015
Tweet

More Decks by Philip Tellis

Other Decks in Technology

Transcript

  1. FrontEnd Performance
    Beginner to Expert to Crazy Person

    View full-size slide

  2. Philip Tellis
    @bluesmoon
    http://tech.bluesmoon.info
    http://www.soasta.com/mpulse/

    View full-size slide

  3. Get the most benefit with the
    least effort

    View full-size slide

  4. 0
    Start with a really slow site

    View full-size slide

  5. 0.1 Start Measuring

    View full-size slide

  6. Or use RUM for real user data (boomerang/mPulse)

    View full-size slide

  7. 0.2 enable gzip
    http://www.slideshare.net/billwscott/improving-netflix-performance-experience

    View full-size slide

  8. You can pre-gzip
    gzip_static in nginx

    View full-size slide

  9. 0.2 gzip
    • For dynamic content, use chunked transfers with
    gzipped chunks
    • You can do this by flushing buffers on the server

    View full-size slide

  10. 0.3 ImageOptim

    View full-size slide

  11. 0.4 Cache
    Cache-control: public, max-age=31415926
    Do NOT set LastModified or Etags headers

    View full-size slide

  12. Yes, that was 10 million pies

    View full-size slide

  13. 0 Congratulations
    You’ve just been promoted!

    View full-size slide

  14. 1
    What the Experts do

    View full-size slide

  15. 1.1 CDN
    Serve your root domain through a CDN

    View full-size slide

  16. 1.1 CDN
    And make sure your CSS is on the same domain
    http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html

    View full-size slide

  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"

    View full-size slide

  18. 1.1 Google Chrome will open two TCP connections to the
    primary host, one for the page, and the second "just in case"

    View full-size slide

  19. 1.1 Don’t waste it

    View full-size slide

  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

    View full-size slide

  21. 1.3 Audit your CSS

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  26. 1.6 Increase initcwnd

    View full-size slide

  27. 1.6 Increase initcwnd
    @mobtec on Twitter

    View full-size slide

  28. 1.6b Also…
    net.ipv4.tcp_slow_start_after_idle=0
    http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/

    View full-size slide

  29. 1.7 PageSpeed
    mod_pagespeed and ngx_pagespeed

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  32. 2
    You’ve reached crazyland

    View full-size slide

  33. Sort in ascending order of signal latency
    • Electrons through copper
    • Light through fibre
    • Pulsars
    • Station Wagons
    • Smoke Signals

    View full-size slide

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

    View full-size slide

  35. 2.0 Bandwidth is different around the world

    View full-size slide

  36. 2.0 As are people

    View full-size slide

  37. 2.0 Study real user data
    Look for potential places to parallelize, predict and cache

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 2.2 Pre-load
    Pre-fetch assets required for the next page in a process flow

    View full-size slide

  41. 2.2b pre-render



    View full-size slide

  42. 2.2b
    • 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

    View full-size slide

  43. 2.2b
    • 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

    View full-size slide

  44. 2.2b
    • 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

    View full-size slide

  45. 2.2b
    • 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”

    View full-size slide

  46. 2.2b — 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

    View full-size slide

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

    View full-size slide

  48. 2.3 Post-load
    Fetch optional assets after onload

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. 2.9 3PoFs
    Request Map by Simon Hearne

    View full-size slide

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

    View full-size slide

  57. 2.11 Understand your SpeedIndex
    http://heatmap.webperf.tools/render/150611_88_af4b9ceaa938f1b4647ff2e8ed41b550/10000

    View full-size slide

  58. 2.12 What does your site cost?
    http://whatdoesmysitecost.com/test/150611_N5_9495f479626f6589299f62e440724064

    View full-size slide

  59. 2.13 Prioritize optimizations based on user impact
    Conversion Impact Score in mPulse DSWB

    View full-size slide

  60. 2.14 Become a WebPageTest power user
    • Check out the comparison view
    • Collect packet captures
    • Use Wireshark
    • Test out different network types

    View full-size slide

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

    View full-size slide

  62. Philip Tellis
    @bluesmoon
    http://tech.bluesmoon.info
    http://www.soasta.com/mpulse/

    View full-size slide

  63. Image Credits
    • Apple Pie

    http://www.flickr.com/photos/24609729@N00/3353226142/
    • Kittens in a PC

    http://www.flickr.com/photos/43525343@N08/6417971383/

    View full-size slide