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

Front-end optimization

Front-end optimization

Tools and techniques for delivering content faster (Updated from https://speakerdeck.com/rjz/front-end-optimization)

0b7fb38ae0407a97f5a342ebbcc288f7?s=128

RJ Zaworski

July 28, 2016
Tweet

More Decks by RJ Zaworski

Other Decks in Programming

Transcript

  1. Front-end optimization Make it fast! rj zaworski · @rjzaworski ·

    github.com/rjz
  2. Any questions?

  3. The First Rule of Optimization Don’t.

  4. The Second Rule of Optimization Optimize for dev time.

  5. So why do we care? ★ 47% of consumers expect

    a web page to load in 2 seconds or less. ★ 40% of people abandon a website that takes more than 3 seconds to load. (http://blog.kissmetrics.com/loading-time/)
  6. So why do we care? ★ 47% of consumers expect

    a web page to load in 2 seconds or less. ★ 40% of people abandon a website that takes more than 3 seconds to load. ★ That was 2011. What’s changed? (http://blog.kissmetrics.com/loading-time/)
  7. It's even worse for mobile. “73% of mobile internet users

    say that they’ve encountered a website that was too slow to load.” (http://blog.kissmetrics.com/loading-time/)
  8. How do we know our site is slow?

  9. Measurement Tools ★ Chrome DevTools ★ Google PageSpeed ★ YSlow

    (
  10. Why is it slow? ★ Bandwidth: how big is the

    pipe?
  11. Why is it slow? ★ Bandwidth: how big is the

    pipe? ★ Volume: how much needs to be delivered?
  12. Why is it slow? ★ Bandwidth: how big is the

    pipe? ★ Volume: how much needs to be delivered? ★ Proximity: how far away are the ends?
  13. So how do we make it faster?

  14. Bandwidth ★ Build bigger pipes? ★ ...best use of what

    we have?
  15. Obstruction: is the pipe clogged? ★ Concurrent connections are limited

    per host ★ Browser mileage may vary Connection Limit per Host - Chrome : 6 - Firefox : 6 - Safari : 6 - IE9 : 6 - IE10 : 8 - IE11 : 13 (http://www.browserscope.org/?category=network)
  16. Script elements ...can either reference external scripts... <html> <head> <script

    src="jquery.js"></script> <script src="inflateText.js" ></script> <script> $('h1').inflateText(); </script> </head> <body> <h1>Hello, world!</h1> </body> </html>
  17. Script elements ...or inline scripts.. <html> <head> <script src="jquery.js"></script> <script

    src="inflateText.js" ></script> <script> $('h1').inflateText(); </script> </head> <body> <h1>Hello, world!</h1> </body> </html>
  18. Script elements ...both will block! <html> <head> <script src="jquery.js"></script> <script

    src="inflateText.js" ></script> <script> $('h1').inflateText(); </script> </head> <body> <h1>Hello, world!</h1> </body> </html>
  19. Well, that’s not good.

  20. Script elements ★ Place scripts at bottom of page <html>

    <head> </head> <body> <h1>Hello, world!</h1> <script src="jquery.js"></script> <script src="inflateText.js" ></script> <script> $('h1').inflateText(); </script> </body> </html>
  21. Script elements ★ Place scripts at bottom of page ★

    Set async and defer for external scripts <html> <head> </head> <body> <h1>Hello, world!</h1> <script async src="jquery.js"></script> <script async src="inflateText.js"></... <script> $('h1').inflateText(); </script> </body> </html>
  22. Async ain’t everything ★ Browsers will prefetch when possible ★

    Execution is still deferred <html> <head> </head> <body> <h1>Hello, world!</h1> <script src="jquery.js"></script> <script src="inflateText.js"></... <script> $('h1').inflateText(); </script> </body> </html>
  23. When will async scripts run? ¯\_(ツ)_/¯

  24. Wait for predictable events function load () { $('h1').inflateText(); }

    // Wait for everything to load window.addEventListener('load', load); // Wait for DOM + scripts to load document.addEventListener('DOMContentLoaded', load);
  25. Wait for predictable events function load () { $('h1').inflateText(); }

    // Wait for everything to load window.addEventListener('load', load); // Wait for DOM + scripts to load document.addEventListener('DOMContentLoaded', load);
  26. But we’re still making a lot of requests.

  27. HTTP isn’t free HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length:

    100 Cookie: [...] Host: www.example.com ... HTTP/1.1 200 OK Content-Type: text/css; charset=UTF-8 Content-Length: 500 Cookie: [...] ★ Every request has headers
  28. HTTP isn’t free HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length:

    100 Cookie: [...] Host: www.example.com ... HTTP/1.1 200 OK Content-Type: text/css; charset=UTF-8 Content-Length: 500 Cookie: [...] ★ Every request has headers ★ Keep an eye on that Cookie !
  29. HTTP isn’t free HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length:

    100 Cookie: [...] Host: www.example.com ... HTTP/1.1 200 OK Content-Type: text/css; charset=UTF-8 Content-Length: 500 Cookie: [...] ★ Every request has headers ★ Keep an eye on that Cookie ! ★ Batch overhead where possible
  30. Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent

    requests // use up four connections in a hurry <script async src="a.js"></script> <script async src="b.js"></script> <script async src="c.js"></script> <script async src="d.js"></script>
  31. Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent

    requests // use up four connections in a hurry <script async src="a.js"></script> <script async src="b.js"></script> <script async src="c.js"></script> <script async src="d.js"></script> $ cat a.js b.js c.js d.js > abcd.js // one request to serve them all <script async src="abcd.js"></script>
  32. And small is beautiful.

  33. Minify files $ cat a.js b.js c.js d.js \ |

    uglifyjs > abcd.js ---- // Include concatenated file <script async src="abcd.js"></script> ★ uglifyjs is pretty good ★ closure compiler is really good ★ Hint: build tools support these
  34. Serve compressed content GET /abcd.js HTTP/1.1 Host: www.myapp.com Accept-Encoding: gzip,

    deflate ★ Browsers support gzip
  35. Serve compressed content GET /encrypted-area HTTP/1.1 Host: www.example.com Accept-Encoding: gzip,

    deflate HTTP/1.1 200 OK Date: mon, 18 Jun 2014 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) Content-Length: 438 Connection: close Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip ★ Browsers support gzip ★ Servers do, too!
  36. Stylesheets? Same tricks. $ cat a.css b.css c.css > abc.css

    ---- // Include concatenated style <link rel="stylesheet" href="abc.css" /> ★ style won’t block ★ each link triggers a request ★ cssmin is pretty good
  37. Preprocessing ★ Use a preprocessor (SASS, Stylus, LESS) ★ Concatenation,

    minification are free Optimize for dev time!
  38. Inline small scripts ★ Bundle HTTP overhead with page request

    ★ The price: caching <html> <head> </head> <body> <h1>Hello, world!</h1> <script async src="jquery.js"></script> <script async src="inflateText.js"></... <script> $('h1').inflateText(); </script> </body> </html>
  39. Did someone say caching?

  40. Caching: the Big Idea ★ Less distance == faster ★

    Keep content as close as possible
  41. Caching: the bad news There are only two hard things

    in Computer Science: cache invalidation and naming things. —Phil Karlton
  42. Enable browser caching ★ HTTP can help

  43. Enable browser caching ★ HTTP can help ★ Use cache-control

    header HTTP/1.1 200 OK Cache-Control: no-transform,public,max-age=300 Content-Type: text/html; charset=UTF-8 Date: Mon, 29 Apr 2013 16:38:15 GMT ETag: "bbea5db7e1785119a7f94fdd504c546e" Last-Modified: Sat, 27 Apr 2013 00:44:54 GMT Vary: Accept-Encoding (http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/)
  44. Enable browser caching ★ HTTP can help ★ Use cache-control

    header ★ Set ETag if content will change HTTP/1.1 200 OK Cache-Control: no-transform,public,max-age=300 Content-Type: text/html; charset=UTF-8 Date: Mon, 29 Apr 2013 16:38:15 GMT ETag: "bbea5db7e1785119a7f94fdd504c546e" Last-Modified: Sat, 27 Apr 2013 00:44:54 GMT Vary: Accept-Encoding
  45. What about content that always changes?

  46. Enable browser caching ★ HTTP can help ★ Use cache-control

    header ★ Set ETag if content will change ★ no-cache identifies dynamic content HTTP/1.1 200 OK Cache-Control: no-cache Content-Type: text/html; charset=UTF-8 Date: Mon, 29 Apr 2013 16:38:15 GMT Last-Modified: Sat, 27 Apr 2013 00:44:54 GMT Vary: Accept-Encoding
  47. Browser caching ★ ServiceWorker spec for granular caching ★ Replaces

    deprecated AppCache ★ Is it ready?
  48. Use a Content Delivery Network ★ located near the users

    ★ replicate automagically ★ == fast
  49. Use a Content Delivery Network Share common assets with everyone

    else ★ cdnjs.com ★ jsDelivr.com ★ Google Hosted Libraries
  50. Use a Content Delivery Network ★ Failure happens <script src="//myc.dn/jquery.min.js"></script>

  51. Use a Content Delivery Network ★ Failure happens ★ So

    keep a local fallback handy <script src="//myc.dn/jquery.min.js"></script> <script>jQuery || document.write('<script src="jquery.js"><\/script>');</script>
  52. Server-side caching On the application server ★ Minimize disk I/O

    ★ Cache popular files in memory Optimize for dev time!
  53. Summing up ★ Bandwidth: how big is the pipe? ★

    Volume: how much needs to be delivered? ★ Proximity: how far away are the ends?
  54. Summing up ★ Bandwidth: avoid blocking behaviors ★ Volume: minimize

    request count and size ★ Proximity: use browser caching and a CDN
  55. Summing up ★ Bandwidth: avoid blocking behaviors ★ Volume: minimize

    request count and size ★ Proximity: use browser caching and a CDN ★ Optimize for dev time!
  56. Thank you! rj zaworski · @rjzaworski · github.com/rjz