Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why Performance Matters

Why Performance Matters

Bilal Çınarlı

June 27, 2019

More Decks by Bilal Çınarlı

Other Decks in Programming


  1. 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/
  2. 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/
  3. 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/
  4. Objective measurements of time to load, frames per second and

    time to interactive Perceived user experience of load time and runtime
  5. …and continuously measuring the actual and perceived speed of the

    application, optimising and monitoring the performance
  6. Underperforming applications can annoy users, can lead to unresponsive app

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

    users where low performing sites had a negative impact on business goals
  8. 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
  9. 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
  10. 53% of visits to mobile sites are abandoned after 3

    seconds according to research from Google's DoubleClick.
  11. 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
  12. AliExpress reduced load time by 36% and saw a 10.5%

    increase in orders and a 27% increase in conversion for new customers.
  13. 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
  14. 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
  15. In addition to saving your users money, fast and lightweight

    user experiences can also be crucial for users in crisis.
  16. 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.
  17. 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/
  18. Serve responsive image sizes and correct dimensions depending on the

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

    the biggest problem that slows down your site
  20. 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
  21. Use code-splitting to split your JavaScript into smaller chunks that

    can parse and execute faster than one big file
  22. 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" ]
  23. Your styles have also effects on your page load. Your

    page will only render as quickly as your slowest stylesheet.
  24. • 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