Why Performance Matters
June 27, 2019
Why Performance Matters
June 27, 2019
More Decks by Bilal Çınarlı
See All by Bilal Çınarlı
Other Decks in Programming
See All in Programming
See All Featured
Why does Performance Matter?
Bilal Çınarlı Frontend Architect Software Engineer @Adidas @bcinarli github.com/bcinarli bcinarli.com
Some stats before start
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/
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/
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
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/
What is performance?
Objective measurements of time to load, frames per second and
time to interactive Perceived user experience of load time and runtime
of the features that can impact the performance
…and continuously measuring the actual and perceived speed of the
application, optimising and monitoring the performance
Why we bother?
It is all about retaining the user, and increasing the
Underperforming applications can annoy users, can lead to unresponsive app
state or inaccessible inputs that leads to lose your visitors
Case studies that show high performing sites engage and retain
users where low performing sites had a negative impact on business goals
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
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
53% of visits to mobile sites are abandoned after 3
seconds according to research from Google's DoubleClick.
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
One of the key facts as importance of the performance
is improving the conversion
AliExpress reduced load time by 36% and saw a 10.5%
increase in orders and a 27% increase in conversion for new customers.
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
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
User experience is another driving factor to your performance
First Paint First Meaningful Paint Time To Interactive
People are also important!
Data costs money for people on their mobile data plans
The sum of transfer size kilobytes of all resources requested
by the page.
In addition to saving your users money, fast and lightweight
user experiences can also be crucial for users in crisis.
How to improve Performance?
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.
Discover performance opportunities with Lighthouse
Reduce your text-based resource sizes by minifying them. Also compress
those files with Gzip or Brotli
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/
Videos are faster to load than Animated GIFs
Lazy-load your images as they needed
Serve responsive image sizes and correct dimensions depending on the
device. Mobile devices do not need bigger images!
the biggest problem that slows down your site
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
can parse and execute faster than one big file
Remove unused code from your sources, by importing only needed
part and tree-shaking
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" ]
Your styles have also effects on your page load. Your
page will only render as quickly as your slowest stylesheet.
Extract critical CSS and load them first. Defer loading the
Continuously monitor your application to find new improvement opportunities
• Web Performance https://developer.mozilla.org/en-US/docs/ Learn/Performance • Why performance matters? https://developers.google.com/
Thank you @bcinarli