Why Performance Matters

Transcript

1. Why does Performance Matter?
2. Bilal Çınarlı Frontend Architect Software Engineer @Adidas @bcinarli github.com/bcinarli bcinarli.com
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
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
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/
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