Why Performance Matters

Transcript

1. Why does Performance Matter?
   

   View Slide

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

   View Slide

3. View Slide

4. Some stats before start
   

   View Slide

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/
   

   View Slide

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/
   

   View Slide

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
   

   View Slide

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/
   

   View Slide

9. What is performance?
   

   View Slide

10. Objective measurements of
    time to load, frames per second and time to interactive
    Perceived user experience of load time and runtime
    

    View Slide

11. Latency, application size, JavaScript performance,
    number of resources are some of the features
    that can impact the performance
    

    View Slide

12. …and continuously measuring
    the actual and perceived speed of the application,
    optimising and monitoring the performance
    

    View Slide

13. Why we bother?
    

    View Slide

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

    View Slide

15. Underperforming applications can annoy users,
    can lead to unresponsive app state
    or inaccessible inputs
    that leads to lose your visitors
    

    View Slide

16. Case studies that show high performing sites
    engage and retain users
    where low performing sites had a
    negative impact on business goals
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. 53% of visits to mobile sites are abandoned after 3
    seconds according to research from Google's DoubleClick.
    

    View Slide

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
    

    View Slide

21. One of the key facts as importance of
    the performance is improving the conversion
    

    View Slide

22. AliExpress reduced load time by 36%
    and saw a 10.5% increase in orders and
    a 27% increase in conversion for new customers.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. https://www.thinkwithgoogle.com/feature/testmysite
    

    View Slide

26. User experience is another driving factor
    to your performance
    

    View Slide

27. First Paint
    First Meaningful
    Paint
    Time To Interactive
    

    View Slide

28. View Slide

29. People are also important!
    

    View Slide

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

    View Slide

31. The sum of transfer size kilobytes of all resources requested by the page.
    

    View Slide

32. In addition to saving your users money,
    fast and lightweight user experiences
    can also be crucial for users in crisis.
    

    View Slide

33. How to improve Performance?
    

    View Slide

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.
    

    View Slide

35. Discover performance opportunities with Lighthouse
    

    View Slide

36. View Slide

37. Reduce your text-based resource sizes
    by minifying them.
    Also compress those files with Gzip or Brotli
    

    View Slide

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/
    

    View Slide

39. View Slide

40. Videos are faster to load than Animated GIFs
    

    View Slide

41. Lazy-load your images as they needed
    

    View Slide

42. Serve responsive image sizes
    and correct dimensions depending on the device.
    Mobile devices do not need bigger images!
    

    View Slide

43. Nowadays, JavaScript is heart to modern applications,
    yet it is the biggest problem that slows down your site
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

47. Use code-splitting to split your JavaScript
    into smaller chunks that can
    parse and execute faster than one big file
    

    View Slide

48. Remove unused code from your sources,
    by importing only needed part and tree-shaking
    

    View Slide

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"
    ]
    

    View Slide

50. Your styles have also effects on your page load.
    Your page will only render as quickly as your slowest
    stylesheet.
    

    View Slide

51. Extract critical CSS and load them first.
    Defer loading the non-critical styles.
    

    View Slide

52. Continuously monitor your application to find new
    improvement opportunities
    

    View Slide

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
    

    View Slide

54. Thank you
    @bcinarli
    

    View Slide