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)

RJ Zaworski

July 28, 2016
Tweet

More Decks by RJ Zaworski

Other Decks in Programming

Transcript

  1. 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/)
  2. 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/)
  3. 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/)
  4. Why is it slow? ★ Bandwidth: how big is the

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

    pipe? ★ Volume: how much needs to be delivered? ★ Proximity: how far away are the ends?
  6. 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)
  7. 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>
  8. 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>
  9. 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>
  10. 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>
  11. 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>
  12. 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>
  13. 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);
  14. 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);
  15. 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
  16. 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 !
  17. 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
  18. 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>
  19. 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>
  20. 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
  21. 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!
  22. 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
  23. 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>
  24. Caching: the Big Idea ★ Less distance == faster ★

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

    in Computer Science: cache invalidation and naming things. —Phil Karlton
  26. 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/)
  27. 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
  28. 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
  29. Use a Content Delivery Network ★ located near the users

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

    else ★ cdnjs.com ★ jsDelivr.com ★ Google Hosted Libraries
  31. 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>
  32. Server-side caching On the application server ★ Minimize disk I/O

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

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

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

    request count and size ★ Proximity: use browser caching and a CDN ★ Optimize for dev time!