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. 2.

    @JGFERREIRO @JGFERREIRO #twitterPerf 53% >3 seconds Google: 53% of mobile

    users abandon sites that take over 3 seconds to load
  2. 11.

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

    My expectations Vs Reality • Tools. • How does the browser work? • 7 Lessons learned • Gift!!
  3. 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
  4. 26.
  5. 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)
  6. 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)
  7. 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)
  8. 39.
  9. 47.

    @JGFERREIRO #TwitterPerf Code for everybody and have a team culture

    of testing in multiple devices and simulate bad internet access
  10. 49.
  11. 54.

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

    your website takes more time to print. Takeaway
  12. 56.
  13. 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
  14. 62.

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

    will finish. Remove unnecessary dependencies and code. Takeaway
  15. 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
  16. 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
  17. 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