Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fantastic Front-End Performance Tricks & Why We Do Them

116 views

Published on

Video and slides synchronized, mp3 and slide download available at URL https://bit.ly/2RpPoJm.

Jenna Zeigen covers the state of the art in front-end performance optimizations— from minimizing file size to preventing thrashing— digging into the way the internet and browsers work to explain why each of these practices is important. Filmed at qconsf.com.

Jenna Zeigen is a Senior Software Engineer at Slack.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fantastic Front-End Performance Tricks & Why We Do Them

  1. 1. *fantastic* frontend performance tricks and why we do them Jenna Zeigen QCon SF 11/5/18 whee!
  2. 2. InfoQ.com: News & Community Site • Over 1,000,000 software developers, architects and CTOs read the site world- wide every month • 250,000 senior developers subscribe to our weekly newsletter • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • 2 dedicated podcast channels: The InfoQ Podcast, with a focus on Architecture and The Engineering Culture Podcast, with a focus on building • 96 deep dives on innovative topics packed as downloadable emags and minibooks • Over 40 new content items per week Watch the video with slide synchronization on InfoQ.com! https://www.infoq.com/presentations/ front-end-performance-optimization
  3. 3. Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide Presented at QCon San Francisco www.qconsf.com
  4. 4. jenna.is/at-qconsf @zeigenvector
  5. 5. Senior Frontend Engineer at Slack Organizer of EmpireJS Organizer of BrooklynJS
  6. 6. Whatchu know 'bout FE? Whatchu, whatchu know 'bout FE? Whatchu know 'bout FE? Whatchu, whatchu know? ♪♪♪
  7. 7. loading + rendering
  8. 8. loading + rendering (keep things small)
  9. 9. loading + rendering (keep things small) (keep things smart)
  10. 10. loading + rendering (keep things small) (keep things smooth) (keep things smart)
  11. 11. but wait how do websites?
  12. 12. 'Cause I’m on the network getting packets Server’s sending me three- hundred and five ♪♪♪ how do websites?
  13. 13. The bigger you send, The harder you fall Take it from me, girl, You gotta start small ♪♪♪ how do websites?
  14. 14. We did everything right, Bytes are on the client side ♪♪♪ how do websites?
  15. 15. Are you listening? (Whoa-oh-oh-oh-oh) Please come back. (Whoa-oh-oh-oh-oh) I’ll tell you what do I need I’ll tell you what do I need Whoa-oh, whoa-oh ♪♪♪ how do websites?
  16. 16. how do websites? document html head body divtitle h1 p “Kitties!” “Cats!”
  17. 17. how do websites? document html head body divtitle h1 p “Kitties!” “Cats!” body div h1 p font-size: 16px font-size: 16px font-weight: bold font-size: 16px color: blue font-size: 16px float: left
  18. 18. how do websites? + document html head body divtitle h1 p “Kitties!” “Cats!” body div h1 p font-size: 16px font-size: 16px font-weight: bold font-size: 16px color: blue font-size: 16px float: left = RenderView Scroll Block Block Block Block Block Text Text
  19. 19. The page was still young When I first saw you ♪♪♪
  20. 20. Well, I'm gonna paint my picture Paint myself in blue and red and green and… a All of the beautiful pixels are very, very meaningful ♪♪♪
  21. 21. Whoa, oh, oh, oh, oh Whoa, oh, oh, oh, DOM’s interactive DOM’s interactive ♪♪♪
  22. 22. keep things small
  23. 23. Harder, Better, Faster, Smaller ♪♪♪ keep things small
  24. 24. minify your html, css, and js Got some files to send over And their length’s insane Remove the whitespace, baby It’ll up your game ♪♪♪ keep things small
  25. 25. var array = []; for (var i = 0; i < 20; i++) { array[i] = i; } https://en.wikipedia.org/wiki/Minification_(programming) keep things small minify your html, css, and js
  26. 26. for(var a=[i=0];++i<20;a[i]=i); https://en.wikipedia.org/wiki/Minification_(programming) keep things small minify your html, css, and js
  27. 27. compress your html, css, and js Shrink it down, gzip it (Don’t reverse it…) ♪♪♪ keep things small
  28. 28. optimize your images All the small things What speed this brings! ♪♪♪ keep things small
  29. 29. optimize your images The picture is far too big to look at kid Your screen’s just not wide enough ♪♪♪ keep things small
  30. 30. optimize your images keep things small <img srcset="miso-320w.jpg 320w, miso-480w.jpg 480w, miso-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="miso-800w.jpg" alt="Miso, a big, red cat">
  31. 31. optimize your images keep things small <picture> <source media="(max-width: 799px)" srcset="miso-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="miso-800w.jpg"> <img src="miso-800w.jpg" alt="Miso, a big red cat"> </picture>
  32. 32. caching Guess they had to change that code Updated that file Which then changed its number So I need the new stuff though Now it’s just some page That I used to know ♪♪♪ keep things small
  33. 33. caching Pull it down, I'm yelling timber Unless it moves or gets enhanced This data, I’m told to remember Until it tells me to forget ♪♪♪ keep things small
  34. 34. only include *necessary* files Well I know that I'll get through this 'Cause I know that I am smart I don't need you anymore I don't need you anymore I don't need you anymore No I don't need you anymore… ♪♪♪ keep things small
  35. 35. only include *necessary* files Shake it, shake it, shake it, Shake it, shake it, shake it, Shake it, shake it, shake it Shake it like a JavaScript bundle Hey ya! ♪♪♪ keep things small
  36. 36. optimize fonts Baby I don't need fancy glyphs To have a good site (Yay system fonts!) ♪♪♪ keep things small
  37. 37. put your assets in a cdn keep things small I feel so close to you right now ♪♪♪
  38. 38. keep things smart
  39. 39. concatenate your css and js Come together, right now Up the speed ♪♪♪ keep things smart
  40. 40. use image sprites and icon fonts Yeah, it's always better When they’re together ♪♪♪ keep things smart
  41. 41. make js non-blocking Scripts go at the bottom Not up here Scripts go at the bottom So the whole page freakin’ here ♪♪♪ keep things smart
  42. 42. make js non-blocking So I don’t take the fall Of a document.write call When I see you, everything stops Never put JS on top ♪♪♪ keep things smart
  43. 43. keep things smart make js non-blocking We can’t stop… ♪♪♪
  44. 44. make js non-blocking And we won’t stop… ♪♪♪ keep things smart
  45. 45. make js non-blocking But yeah does it feel so good 'Cause I get scripts when I want them now And if you could then you know you would 'Cause yeah it just feels so It just feels so good ♪♪♪ keep things smart
  46. 46. put css at the top In your <head> In your <head> Stylesheet, stylesheet, eet, eet, eet ♪♪♪ keep things smart
  47. 47. put css at the top Critical styles inlined To make this page load streamlined ♪♪♪ keep things smart
  48. 48. How you gonna upgrade me? What's higher than One point one? ♪♪♪ keep things smart use http/2
  49. 49. Want you to make me feel Like I'm the only TCP connection in the world ♪♪♪ keep things smart use http/2
  50. 50. These are my compressions ♪♪♪ keep things smart use http/2
  51. 51. Ah, push it Push it good Ah, push it Push it real good ♪♪♪ keep things smart use http/2
  52. 52. keep things smooth
  53. 53. keep things smooth You got the kind of scrollin’ That can be so ~smooth~, yeah Get rid of jank, make it real Or else forget about it ♪♪♪
  54. 54. how do websites, pt 2 + document html head body divtitle h1 p “Kitties!” “Cats!” body div h1 p font-size: 16px font-size: 16px font-weight: bold font-size: 16px color: blue font-size: 16px float: left = RenderView Scroll Block Block Block Block Block Text Text
  55. 55. how do websites, pt 2 RenderView Scroll Block Block Block Block Block Text Text Cause the render’s gonna… rend, rend, rend? ♪♪♪
  56. 56. how do websites, pt 2 RenderView Scroll Block Block Block Block Block Text Text And the painter’s gonna paint, paint, paint… ♪♪♪
  57. 57. how do websites, pt 2 RenderView Scroll Block Block Block Block Block Text Text And the compositor’s gonna composite, composite, composite… ♪♪♪
  58. 58. how do websites, pt 2 Do it alllll agaaaain ♪♪♪
  59. 59. how do websites, pt 2 Layout Painting Compositing this. sick. feat. ♪♪♪
  60. 60. how do websites, pt 2 Loop loop ba-doop loop ba-doop Loop ba-doop ba-doop Ba-doop loop ba-doop loop Ba-doop loop ba-doop, ba-doop, ba-doop ♪♪♪
  61. 61. Here’s to never ending circles And building them on top of me And here's to another no, man You won’t get a render You won’t get a render ♪♪♪ how do websites, pt 2
  62. 62. use requestAnimationFrame keep things smooth Debounce bounce bounce bounce bounce bounce bounce bounce bounce bounce ♪♪♪
  63. 63. use requestAnimationFrame keep things smooth
  64. 64. use requestAnimationFrame keep things smooth Baby, I'm not always There when you call, But I'm always on time And I gave you my all, Now baby, be mine ♪♪♪
  65. 65. use web workers keep things smooth Give it away Give it away Give it away Give it away now ♪♪♪
  66. 66. use web workers keep things smooth When what you have Will take too long Move along, move along Like I know you do ♪♪♪
  67. 67. animate with transform + opacity keep things smooth I, I, I, I, I, I Know how to transform I transform, I transform I'm a transformer I, I, I, I, I, I Know how to transform I transform (I can do it!) I'll transform (I can do it!) I'm a transformer ♪♪♪
  68. 68. animate with transform + opacity keep things smooth Layout Painting Compositing
  69. 69. animate with transform + opacity keep things smooth .moving-element { will-change: transform; }
  70. 70. use a css methodology keep things smooth CSS, take it easy For there is something that we can do. CSS, take it easy BEM it on me Or BEM it on you. ♪♪♪
  71. 71. use a css methodology keep things smooth .box:nth-last-child(-n+1) .title {   /* styles */ } https://developers.google.com/web/fundamentals/performance/rendering/ reduce-the-scope-and-complexity-of-style-calculations
  72. 72. use a css methodology keep things smooth .Box_title--special {   /* styles */ } https://developers.google.com/web/fundamentals/performance/rendering/ reduce-the-scope-and-complexity-of-style-calculations
  73. 73. always measure first
  74. 74. always measure first synthetic measurements Is someone getting the test, the test, the test, the test of you? ♪♪♪
  75. 75. always measure first real user measurements Ain’t it fun Timing in the real world Ain’t it good Testing in their Chrome ♪♪♪
  76. 76. seriously, always measure first
  77. 77. keep things small, keep things smart, keep things smooth
  78. 78. •Front-End Performance Checklist 2018 •Optimizing the Critical Rendering Path •Rendering Performance •Philip Roberts: What the heck is the event loop anyway? •window.requestAnimationFrame() •Using Web Workers •Assessing Loading Performance in Real Life with Navigation and Resource Timing •High Performance Browser Networking •Server Farm to Table, Annotated Resources
  79. 79. Lil' Mama - Lip Gloss Alanis Morissette – Hand in My Pocket The Supremes & The Four Tops - The Bigger You Love, The Harder You Fall Calvin Harris ft. Ellie Goulding - Outside Jimmy Eat World - Sweetness Taylor Swift - Love Story Counting Crows - Mr. Jones Imagine Dragons - Radioactive Daft Punk – Harder, Better, Faster, Stronger Taylor Swift - Blank Space Missy Elliot - Work It Blink 182 - All The Small Things Bright Eyes - The Big Picture Gotye - Somebody That I Used To Know Pitbull ft. Ke$ha - Timber Cher - Believe OutKast - Hey Ya Sia - Cheap Thrills Calvin Harris - Feel So Close The Beatles - Come Together Jack Johnson - Better Together Drake - Started from the Bottom Complete Tracklist
  80. 80. Beyoncé - Love on Top Miley Cyrus - We Can’t Stop Paramore - Misery Business The Cranberries - Zombie Taking Back Sunday - Cute Without the E Beyoncé - Upgrade U Rihanna - Only Girl in the World Usher - Confessions Part II Salt-N-Pepa - Push It Santana ft. Rob Thomas - Smooth Taylor Swift - Shake it Off Katy Perry - Last Friday Night (T.G.I.F) Salt-N-Pepa - Shoop CHVRCHES - Never Ending Circles R. Kelly - Ignition Ja Rule ft. Ashanti - On Time Red Hot Chili Peppers - Give it Away The All-American Rejects - Move Along Gnarls Barkley - Transformer Mika - Relax, Take it Easy Foo Fighters - The Best of You Paramore - Ain't it Fun Complete Tracklist *something witty about a POP server…*
  81. 81. Thanks! jenna.is/at-qconsf @zeigenvector 💙 🐳 🚀 ✨ 🌻🐝 ⚡ 😻 🔥 🌟 🍉 🍕 💖 🐢 🐘
  82. 82. Watch the video with slide synchronization on InfoQ.com! https://www.infoq.com/presentations/ front-end-performance-optimization

×