Why Performance Matters

Why Performance Matters

80d92d5d0bd0170aebf6e07589a0b571?s=128

Bilal Çınarlı

June 27, 2019
Tweet

Transcript

  1. Why does Performance Matter?

  2. Bilal Çınarlı Frontend Architect Software Engineer @Adidas @bcinarli github.com/bcinarli bcinarli.com

  3. None
  4. Some stats before start

  5. Global digital population (in millions) 1150 2300 3450 4600 Active

    Internet U. Unique Mobile Internet U. Active Social Media U. Active Mobile Social Media U. https://www.statista.com/statistics/617136/digital-population-worldwide/
  6. Number of internet users (in millions) 0 1250 2500 3750

    5000 Asia Europe North America South America Africa Ocenia Internet Users Population https://www.statista.com/statistics/249562/number-of-worldwide-internet-users-by-region/
  7. Mobile Internet Usage https://www.statista.com/statistics/306528/share-of-mobile-internet-traffic-in-global-regions/ Asia Africa Global Europe North America

    Ocenia South America 31,31 37,42 38,21 38,6 47,96 54,08 60,08
  8. Online Shopping in UK (Clothes and Shoes) Clothes and Shoes

    Revenue Average revenue per user 20bn Euro 500 Euro Number of Shoppers buy Clothes Number of Shoppers buy Shoes 29,4m 26m https://www.statista.com/topics/3881/online-shopping-in-europe/
  9. What is performance?

  10. Objective measurements of time to load, frames per second and

    time to interactive Perceived user experience of load time and runtime
  11. Latency, application size, JavaScript performance, number of resources are some

    of the features that can impact the performance
  12. …and continuously measuring the actual and perceived speed of the

    application, optimising and monitoring the performance
  13. Why we bother?

  14. It is all about retaining the user, and increasing the

    revenue
  15. Underperforming applications can annoy users, can lead to unresponsive app

    state or inaccessible inputs that leads to lose your visitors
  16. Case studies that show high performing sites engage and retain

    users where low performing sites had a negative impact on business goals
  17. Pinterest, rebuilt their pages for performance, 40% decrease in wait

    time, 15% increase in SEO traffic and 15% increase in conversion rate to signup https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7
  18. Zalando, uplifted their revenue per session by 0.7% with just

    100msec improvement in their loading time https://jobs.zalando.com/tech/blog/loading-time-matters/index.html
  19. 53% of visits to mobile sites are abandoned after 3

    seconds according to research from Google's DoubleClick.
  20. The BBC found they lost an additional 10% of users

    for every additional second their site took to load https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale
  21. One of the key facts as importance of the performance

    is improving the conversion
  22. AliExpress reduced load time by 36% and saw a 10.5%

    increase in orders and a 27% increase in conversion for new customers.
  23. Walmart saw up to a 2% increase in conversions for

    every 1 second of improvement in load time. Every 100msec improvement also resulted in up to a 1% increase in revenue. https://www.slideshare.net/devonauerswald/walmart-pagespeedslide
  24. Amazon sees a 1% decrease in revenue for every 100msec

    increase in load time. http://radar.oreilly.com/2008/08/radar-theme-web-ops.html
  25. https://www.thinkwithgoogle.com/feature/testmysite

  26. User experience is another driving factor to your performance

  27. First Paint First Meaningful Paint Time To Interactive

  28. None
  29. People are also important!

  30. Data costs money for people on their mobile data plans

  31. The sum of transfer size kilobytes of all resources requested

    by the page.
  32. In addition to saving your users money, fast and lightweight

    user experiences can also be crucial for users in crisis.
  33. How to improve Performance?

  34. When you're building a modern web experience, it's important to

    measure, optimise, and monitor if you're to get fast and stay fast.
  35. Discover performance opportunities with Lighthouse

  36. None
  37. Reduce your text-based resource sizes by minifying them. Also compress

    those files with Gzip or Brotli
  38. Images are the heaviest resources in a page in terms

    of size. Optimise your images by reducing their size and compressing them https://squoosh.app/
  39. None
  40. Videos are faster to load than Animated GIFs

  41. Lazy-load your images as they needed

  42. Serve responsive image sizes and correct dimensions depending on the

    device. Mobile devices do not need bigger images!
  43. Nowadays, JavaScript is heart to modern applications, yet it is

    the biggest problem that slows down your site
  44. https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

  45. https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

  46. Push/Preload the most import resources. Render the initial route as

    soon as possible. Pre-cache remaining assets. Lazy-load other routes and non-critical assets PRPL Pattern
  47. Use code-splitting to split your JavaScript into smaller chunks that

    can parse and execute faster than one big file
  48. Remove unused code from your sources, by importing only needed

    part and tree-shaking
  49. Do not use Polyfills, if you do not need them.

    Serve modern code for modern browsers Browserlist "browserslist": [ "last 1 version", "> 1%", "maintained node versions", "not dead" ]
  50. Your styles have also effects on your page load. Your

    page will only render as quickly as your slowest stylesheet.
  51. Extract critical CSS and load them first. Defer loading the

    non-critical styles.
  52. Continuously monitor your application to find new improvement opportunities

  53. • Web Performance https://developer.mozilla.org/en-US/docs/ Learn/Performance • Why performance matters? https://developers.google.com/

    web/fundamentals/performance/why-performance-matters/ • Case Studies https://wpostats.com/ • https://web.dev/learn • The Cost of Javascript in 2018 https://medium.com/ @addyosmani/the-cost-of-javascript- in-2018-7d8950fbb5d4 • Statistics https://www.statista.com/ Resources
  54. Thank you @bcinarli