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