Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Sign up for free
Why Performance Matters
June 27, 2019
Why Performance Matters
June 27, 2019
More Decks by Bilal Çınarlı
See All by Bilal Çınarlı
Independently together: better developer experience & App performance
Developer Experience: How happy are your engineers?
Micro Applications: Divide & Conquer
Lightning Fast Web Applications
WebAssembly - is it the future for the Web?
Design Systems and Component Based Frontend
Future Proof Frontend Coding
Fast by Default: Modern Loading Practices
Other Decks in Programming
See All in Programming
JUnit 5 wird 5
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
Idiomatic Kotlin - IntelliJ IDEA Conf 2022
Modern Web Apps with Spring Boot & Angular
20年ものの巨大レガシープロダクトを PHP 8.0にアップデートした際の対策と得られた知見
2年かけました！大規模サービスをJava製CMSからPHP+Laravelの構成にリプレイスし、運用している話 / Replaced service from Java CMS to PHP and Laravel architecture
XP頻出英単語 / XP vocabulary
See All Featured
Facilitating Awesome Meetings
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Building Flexible Design Systems
The Pragmatic Product Professional
jQuery: Nuts, Bolts and Bling
What the flash - Photography Introduction
The Invisible Customer
Making Projects Easy
Statistics for Hackers
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