Front_End_Confoo.pdf

Transcript

1. Front-end performance Toni Gemayel @TwoGiraffes Monday, March 4, 13
2. Hi There. Monday, March 4, 13
3. Chattanooga, TN. Monday, March 4, 13
4. Lets Talk •Web developers duty •How you can make money •Measuring performance with real users •Javascript tuning •Why you should make a frontend library •Varnish vs. Memcache •& a bunch more Monday, March 4, 13
5. Where should I start •Turn on http compression (gzip) •Cache all of the things •Optimize images (sprites) •Minify your css & js / use a cdn Monday, March 4, 13
6. What is the point of all this front-end performance stuff? As a developer, I already have enough to worry about Monday, March 4, 13
7. Page weight is getting out of hand. Monday, March 4, 13
8. 388 requests? Madness! Monday, March 4, 13
9. Steve Sounders Head of Performance at Google Monday, March 4, 13
10. The golden rule of web performance 80-90% of response time is spent on the frontend. Monday, March 4, 13
11. As web developers, its our job to optimize the web. Yes, that includes the crappy frontend code your designer wrote. Monday, March 4, 13
12. Load times are a developers UX Monday, March 4, 13
13. It also has real implications for your users & your business. Monday, March 4, 13
14. Google now factors page speed into Page Rank Monday, March 4, 13
15. Users are mobile centric now Monday, March 4, 13
16. Monday, March 4, 13
17. Thats probably wrong. Monday, March 4, 13
18. Monday, March 4, 13
19. Thats probably wrong too. But the real point is users are impatient & they expect things to load quickly Monday, March 4, 13
20. Lets start with a story.. Monday, March 4, 13
21. Two Giraffes Monday, March 4, 13
22. Scarheal Monday, March 4, 13
23. •Singapore, Glenns largest market had an average load time of 28 seconds, per page •All it took was a CDN, server tuning & proper frontend optimization •Generated 5 figures of additional monthly sales •Glenn was really, really happy Monday, March 4, 13
24. Web performance is a really good way to charge a lot of money for a little bit of work Monday, March 4, 13
25. There has to be a ton of small businesses doing sales outside of the US who have no idea they have this problem Monday, March 4, 13
26. Banyan.co Monday, March 4, 13
27. When working on a performance critical service, focus on the outliers Monday, March 4, 13
28. Because Banyan is a global service, we need to be fast everywhere Monday, March 4, 13
29. So how do we test things at a Global Scale? Monday, March 4, 13
30. #1 - App Server Response. How long it takes your application to issue a successful response? Monday, March 4, 13
31. #2 - Network Speed. A server response for a 500MB file is fast, but downloading it isn't Monday, March 4, 13
32. #3 - DOM Processing. Great, you've reached the user's browser, now how long does it take the page to load into the DOM Monday, March 4, 13
33. #4 - Page Rendering. Only done after all the "assets" are downloaded. This is usually the final state of the page. Monday, March 4, 13
34. Hard numbers lie Monday, March 4, 13
35. Take for instance Kayak.com Monday, March 4, 13
36. Test your web app at load with blitz.io Monday, March 4, 13
37. Test different browsers from different locations Monday, March 4, 13
38. Make things simple. Monday, March 4, 13
39. Build a frontend framework. Monday, March 4, 13
40. Bootstrap from Twitter Monday, March 4, 13
41. Foundation by Zurb Monday, March 4, 13
42. Helium Monday, March 4, 13
43. Foundation - 200k Bootstrap - 100k Helium - 30k Monday, March 4, 13
44. Allows us to use a CSS preprocessor/ CSS3/image fonts/enforce best practices Monday, March 4, 13
45. Pea.rs Monday, March 4, 13
46. Lets talk about Javascript Monday, March 4, 13
47. Load everything asyncronously Monday, March 4, 13
48. Use ShrinkSafe or other JS compression Monday, March 4, 13
49. CodeKit Monday, March 4, 13
50. If you’re loading alot of assets at once, a browser will block you Monday, March 4, 13
51. Most browsers cap you at 6, the iphone does 6, but most phones cap you at 2 Monday, March 4, 13
52. Split your domains images.x.com, css.x.com, js.x.com Monday, March 4, 13
53. Use Inject.JS from Linkedin. It allows you to cache the JS files in HTML5 local storage which is a huge deal for mobile clients in particular Monday, March 4, 13
54. DOM monster Monday, March 4, 13
55. DOM monster Monday, March 4, 13
56. Cache is king Monday, March 4, 13
57. Varnish vs Memcache. Whats the difference? Monday, March 4, 13
58. Memcache saves your DB from doing a lot of read work, Varnish saves your dynamic web server from CPU load Monday, March 4, 13
59. You can use both. Monday, March 4, 13
60. But you might not want to. Monday, March 4, 13
61. Mostly write? Varnish needs to be purged often & probably not worth the headache. Mostly read? Varnish has you covered. Monday, March 4, 13
62. Similar read & write Memcache will provide info for pages that have a mixture of known and new data allowing you to generate pages faster. Monday, March 4, 13
63. Thank you. Speakerdeck.com/toni toni@getbanyan.co @TwoGiraffes Monday, March 4, 13