Slide 1

Slide 1 text

Why does Performance Matter?

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Some stats before start

Slide 5

Slide 5 text

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/

Slide 6

Slide 6 text

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/

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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/

Slide 9

Slide 9 text

What is performance?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Why we bother?

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

User experience is another driving factor to your performance

Slide 27

Slide 27 text

First Paint First Meaningful Paint Time To Interactive

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

People are also important!

Slide 30

Slide 30 text

Data costs money for people on their mobile data plans

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

How to improve Performance?

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

Discover performance opportunities with Lighthouse

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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/

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Videos are faster to load than Animated GIFs

Slide 41

Slide 41 text

Lazy-load your images as they needed

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Continuously monitor your application to find new improvement opportunities

Slide 53

Slide 53 text

• 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

Slide 54

Slide 54 text

Thank you @bcinarli