Front-end optimization

Tools and techniques for delivering content faster

Transcript

1. Front-end optimization Make it fast! rj zaworski, versal inc. · @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. 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/)
7. How do we know our site is slow?
8. Measurement Tools ★ Chrome DevTools ★ Google PageSpeed ★ YSlow (
9. The internet is pretty much a garden hose.
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. Is the pipe clogged? ★ Concurrent connections are limited per host ★ Browser mileage may vary (http://www.browserscope.org/?category=network)
15. Script elements ...can either reference external scripts...
16. Script elements ...or inline scripts..
17. Script elements ...but either use will exhibit blocking!
18. Well, that’s not good.
19. Script elements ★ Place scripts at bottom of page
20. Script elements ★ Place scripts at bottom of page ★ Set and for external scripts
21. Async ain’t everything ★ Browsers will prefetch when possible ★ Execution is still deferred
22. When will async scripts run? ¯\_(ツ)_/¯
23. Wait for predictable events
24. Wait for predictable events
25. But we’re still making a lot of requests.
26. HTTP isn’t free ★ Every request has headers
27. HTTP isn’t free ★ Every request has headers ★ Keep an eye on that !
28. HTTP isn’t free ★ Every request has headers ★ Keep an eye on that ! ★ Batch overhead where possible
29. Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent requests
30. Concatenate external files ★ Reduce HTTP overhead ★ Reduce concurrent requests
31. And small is beautiful.
32. Minify concatenated files ★ uglifyjs is pretty good ★ closure compiler is really good ★ Hint: build tools support these
33. Serve compressed content ★ Browsers support gzip
34. Serve compressed content ★ Browsers support gzip ★ Servers do, too!
35. Stylesheets? Same tricks. ★ won’t block ★ each triggers a request ★ cssmin is pretty good
36. Preprocessing ★ Use a preprocessor (SASS, Stylus, LESS) ★ Concatenation, minification are free Optimize for dev time!
37. Inline small scripts ★ Bundle HTTP overhead with page request ★ The price: caching
38. Did someone say caching?
39. Caching: the Big Idea ★ Less distance == faster ★ Keep content as close as possible
40. Caching: the bad news There are only two hard things in Computer Science: cache invalidation and naming things. —Phil Karlton
41. Enable browser caching ★ HTTP can help
42. Enable browser caching ★ HTTP can help ★ Use header (http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/)
43. Enable browser caching ★ HTTP can help ★ Use header ★ Set if content will change
44. What about content that always changes?
45. Enable browser caching ★ HTTP can help ★ Use header ★ Set if content will change ★ Use with dynamic content
46. We can tell the browser even more.
47. Browser caching Describe app dependencies in a manifest
48. Browser caching Describe app dependencies in a manifest (https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache)
49. Browser caching ★ static assets
50. Browser caching ★ static assets ★ declare paths that require access
51. Browser caching ★ static assets ★ declare paths that require access ★ provide a
52. Use a Content Delivery Network ★ located near the users ★ replicate automagically ★ == fast
53. Use a Content Delivery Network Share common assets with everyone else ★ cdnjs.com ★ jsDelivr.com ★ Google Hosted Libraries
54. Use a Content Delivery Network ★ Failure happens
55. Use a Content Delivery Network ★ Failure happens ★ So keep a local fallback handy
56. Server-side caching On the application server ★ Minimize disk I/O ★ Cache popular files in memory Optimize for dev time!
57. Summing up ★ Bandwidth: how big is the pipe? ★ Volume: how much needs to be delivered? ★ Proximity: how far away are the ends?
58. Summing up ★ Bandwidth: avoid blocking behaviors ★ Volume: minimize request count and size ★ Proximity: use browser caching and a CDN
59. Summing up ★ Bandwidth: avoid blocking behaviors ★ Volume: minimize request count and size ★ Proximity: use browser caching and a CDN ★ Optimize for dev time!
60. Thank you! rj zaworski, versal inc. · @rjzaworski · github.com/rjz