Web Performance - Jorge Ferreiro - Twitter London Js Roundabout

Web Performance - Jorge Ferreiro - Twitter London Js Roundabout

“Why is my website slow?”, “How can I improve the loading time?”, “How does the browser render a website?”, “What techniques can I apply to boost the speed of my website?”.

We will see in details the three parts that affect your web performance (network requests, browser parsing, and browser rendering), and we will cover everything from loading non-blocking Javascript, reducing bundle sizes, cache content and more techniques.
- - -

Subscribe: https://www.ferreiro.me/newsletter

on https://www.twitter.com/jgferreiro
on https://www.linkedin.com/in/jgferreiro/
on https://www.instagram.com/jgferreiro/

523f2560aefa80575be1aff88ec240dd?s=128

Jorge Ferreiro

April 02, 2019
Tweet

Transcript

  1. @JGFERREIRO / #TWITTERPerf WEB PERFORMANCE EXPECTATIONS VS REALITY Twitter London

    - April 2th 2019
  2. @JGFERREIRO @JGFERREIRO #twitterPerf 53% >3 seconds Google: 53% of mobile

    users abandon sites that take over 3 seconds to load
  3. @JGFERREIRO @JGFERREIRO #twitterPerf

  4. @JGFERREIRO @JGFERREIRO #twitterPerf

  5. @JGFERREIRO @JGFERREIRO #twitterPerf

  6. @JGFERREIRO @JGFERREIRO #twitterPerf

  7. @JGFERREIRO #TwitterPerf Frontend Eng @Eventbrite
 Past Backend @Amazon Host @devsInDepth

    and 360 Writer and #hamilton fan Jorge Ferreiro
  8. Madrid Twitter HQ

  9. @JGFERREIRO @JGFERREIRO #TwitterPerf R&D - Madrid

  10. @JGFERREIRO @JGFERREIRO #TwitterPerf

  11. @JGFERREIRO @JGFERREIRO #TwitterPerf What are you gonna learn today? •

    My expectations Vs Reality • Tools. • How does the browser work? • 7 Lessons learned • Gift!!
  12. @JGFERREIRO @JGFERREIRO #TwitterPerf #TwitterPerf

  13. @JGFERREIRO @JGFERREIRO My expectations vs the Reality. 1.

  14. @JGFERREIRO #TwitterPerf Just Google “7 Tips to improve my website”

    and all problems solved!!!
  15. @JGFERREIRO #TwitterPerf

  16. Critical path!

  17. Critical path!

  18. @JGFERREIRO #TwitterPerf Web Performance is ALL about measuring, and understanding

    your business needs Takeaway + Reality
  19. @JGFERREIRO @JGFERREIRO THINK. MEASURE. COMPARE. REPEAT. 1. @JGFERREIRO #twitterPerf

  20. @JGFERREIRO @JGFERREIRO Web Performance Tools 2.

  21. Page Insights by Google

  22. Google Audits

  23. Node perf_hooks
 (also works in Chrome!)

  24. const {performance} = require('perf_hooks'); perfomance.mark(‘start’); // NB: Here you put

    all the different // operations you want to measure. perfomance.mark(‘end'); perfomance.measure('My operations name', 'start', 'end') Node perf_hooks $ node perfomance_test.js $ node —-trace-opt perfomance_test.js $ node —-trace-opt —-trace-deopt perfomance_test.js
  25. @JGFERREIRO @JGFERREIRO How does the browser work?
 Desmystifying the magic

    3.
  26. None
  27. @JGFERREIRO @JGFERREIRO Get HTML from the Server 1. www.myWebsite.com

  28. @JGFERREIRO @JGFERREIRO HTML transformation 2.

  29. Speed up web performance <html> <head> <title>Hello :)</title> <meta charset="UTF-8">

    <link rel="stylesheet" </head> <body> <p>Hello, <span>web perf <div> <img src="" /> </div> </body> </html> Photo credit: Render-tree Construction, Layout, and Paint @JGFERREIRO Document Object Model (DOM)
  30. Speed up web performance <html> <head> <title>Hello :)</title> <meta charset="UTF-8">

    <link rel="stylesheet" </head> <body> <p>Hello, <span>web perf <div> <img src="" /> </div> </body> </html> Photo credit: Render-tree Construction, Layout, and Paint @JGFERREIRO Document Object Model (DOM)
  31. @JGFERREIRO @JGFERREIRO CSS Transformation 3.

  32. body { font-size: 16px; } p { font-weight: bold; }

    span { color: red; } p span { display: none; } img { float: right; } Speed up web performance Photo credit: Render-tree Construction, Layout, and Paint @JGFERREIRO CSS Object Model (CSSOM)
  33. @JGFERREIRO @JGFERREIRO Generating the Render Tree 4.

  34. @JGFERREIRO @JGFERREIRO #twitterPerf DOM + CSSDOM = Render Tree

  35. Photo credit: Render-tree Construction, Layout, and Paint

  36. @JGFERREIRO @JGFERREIRO Painting! 5.

  37. @JGFERREIRO @JGFERREIRO #TwitterPerf 1. Network request 2. Parsing 3. Rendering

    3 key concepts
  38. Parsing is SUPER time consuming Parsing + Compiling

  39. @JGFERREIRO #TwitterPerf Takeaway Shipping less code reduces the time for

    parsing, compiling, and executing the code
  40. @JGFERREIRO @JGFERREIRO 6 Lessons Learned 4.

  41. @JGFERREIRO #TwitterPerf There is no Silver Bullet for web performance.

    Disclaimer and biggest lesson learned
  42. @JGFERREIRO #TwitterPerf Don’t do a premature optimization… Find your real

    business needs Takeaway
  43. Empathy with your users 1.

  44. @JGFERREIRO @JGFERREIRO #TwitterPerf

  45. @JGFERREIRO @JGFERREIRO #TwitterPerf

  46. @JGFERREIRO @JGFERREIRO #TwitterPerf SLOW access to Internet (Developing countries) Expensive

    internet fares. Cheap phones/COMPUTERS
  47. @JGFERREIRO #TwitterPerf Code for everybody and have a team culture

    of testing in multiple devices and simulate bad internet access
  48. Don’t overwork!
 Load when you need 2.

  49. None
  50. Lazy loading!

  51. @JGFERREIRO @JGFERREIRO #TwitterPerf Not only lazy loading images…

  52. @JGFERREIRO @JGFERREIRO #TwitterPerf

  53. 3. Modern images formats WebP (no PNG), JPG2000…

  54. @JGFERREIRO #TwitterPerf Images are one of the main reasons why

    your website takes more time to print. Takeaway
  55. @JGFERREIRO @JGFERREIRO #TwitterPerf JPEG2000, WebP, JPEG XR

  56. <picture> <source srcset="img/pic.webp" type="image/webp"> <source srcset="img/pic.jpg" type="image/jpeg"> <img src="img/pic.jpg" alt="Alt

    Text!"> </picture> Speed up web performance https://css-tricks.com/using-webp-images/
  57. Be careful with infinite lists… 4.

  58. @JGFERREIRO @JGFERREIRO #TwitterPerf Messages project. My first React App :P

    https://github.com/ferreiro/messages
  59. import InfiniteCardList from ‘../components/InfiniteCardList' const isInfiniteScrollActivated = false; // State.

    User Settings const onAddMessage = (message) => { /* Logic. */ }; const onRemoveMessage = (message) => { /* Logic. */ }; const onFavoriteMessage = (message) => { /* Logic. */ }; <InfiniteCardList loadLimit={20} messages={[]} isInfiniteScrollActivated={isInfiniteScrollActivated} onAddMessage={onAddMessage} onRemoveMessage={onRemoveMessage} onFavoriteMessage={onFavoriteMessage} /> Infinite Scrolling React bit.ly/ferreiro-scroll
  60. @JGFERREIRO #TwitterPerf Infinite lists are greedy. Be careful with them!

  61. Simplify your code. Write less… 5.

  62. @JGFERREIRO #TwitterPerf The less you write, the faster the parser

    will finish. Remove unnecessary dependencies and code. Takeaway
  63. @JGFERREIRO @JGFERREIRO #TwitterPerf div:nth-of-type(3) ul:last-child li:nth-of-type(odd)*{ font-weight:bold } CSS Shorter

    Selectors, fast loading. Avoid THIS…!
  64. @JGFERREIRO #TwitterPerf The shorter your CSS selectors, the faster the

    browser will apply the styles Takeaway
  65. Take a coffee with Backend folks… 6.

  66. @JGFERREIRO @JGFERREIRO #TwitterPerf

  67. @JGFERREIRO @JGFERREIRO #TwitterPerf Cache on the Backend FERREIRO.me/GO/DAILYFOCUS

  68. @JGFERREIRO @JGFERREIRO #TwitterPerf Quick Recap 1. Measure. Compare. Take action

    2. Don’t prematurely optimize. 3. Less code = better! 4. Be empathic with your customers
  69. @JGFERREIRO @JGFERREIRO #TwitterPerf Resources 1. Addy Osmani's 18-Point Web Performance

    Checklist 2. http://ferreiro.me/go/perfomance 3. Frontend masters web perfomance. 4. https://developers.google.com/web/ updates/2016/07/infinite-scroller
  70. @JGFERREIRO @JGFERREIRO Concatenate and group CSS and JavaScript files Minify

    your production assets Optimize and compress your images Image sprites Load your CSS styles and JavaScript asynchronously Use SVG whenever you can Revisit dependencies + ferreiro.me/go/perfomance
  71. @JGFERREIRO @JGFERREIRO THINK. MEASURE. COMPARE. REPEAT. 1. @JGFERREIRO #twitterPerf

  72. @JGFERREIRO - jorge@ferreiro.me Thanks! Questions?