SlideShare a Scribd company logo
Performance beyond
Page Load
Apoorv Saxena
@apoorv_saxena
Kickstart the talk!
Let the data speak!
Not impressed ?
At EdgeConf 2012,
Facebook confirmed this when it
mentioned that in an A/B test, it slowed
down scrolling from 60fps to 30fps,
causing engagement to collapse.
What is smooth interaction?
Devices refresh their screen 60 times a second.
Thus, frame budget for smooth interaction is 16ms
(1 second / 60 frames = 16.66 ms / frame)
Though, browser has got some householding work as well,
which leaves us with about 10ms in total.
Jank
When failing to meet the frame budget of
10ms, we come across
Rendering Performance
Let’s build smooth interaction experiences
16ms isn’t a lot of time
In a Nutshell..
Pixel Pipeline
Layout
width overflow height
padding font-family margin
display vertical-align border-width
border clear top
position bottom font-size
float left text-align
overflow-y right line-height
font-weight white-space min-height
Painting
color border-style
visibility background
text-decoration background-image
background-position background-repeat
outline-color outline
outline-style border-radius
background-size box-shadow
Composting
Tools at hand
FPS meter
Profiling with Timeline
Show Paint Rectangles
Things we intend to achieve
Smooth Scrolling
What can cause Jank during scroll?
Processing that consumes more than 16ms:
● Time consuming operations e.g. Garbage Collection event.
● JavaScript triggered operations that consume lot of time e.g.
Layout Thrashing
● Loads of repainting on the screen, reason can be attributed
to JS / CSS or both.
Smooth Animation
What can cause Jank during animation?
Triggering any other operation that can
cause the animation to exceed its frame
budget.
Smooth Interaction
What can cause Jank during interaction with page?
Synchronous operation(s) inside the event
handler that exceeds the current frame
budget.
Best practices related to
Rendering Performance
Avoid Memory Leaks
Reducing DOM calls
Writing / Reading frequently to/from DOM is a bad
practice
Forced Synchronous Layout
DOM write operation followed by a DOM read operation
for a layout property of a DOM element
Layout Thrashing
Forced synchronous layout in quick succession
Demo: Animations example
How to avoid
Layout Thrashing
Library: FastDom
Eliminates layout thrashing by batching DOM
read/write operations,
Potential Scroll Bottlenecks
Demo: Repaint on Scroll
Debounce Input Handlers
Reduce Paint Areas
Avoid Paint Storms
How to run Animations at
60fps ?
GPU Acceleration
Canvas is
hardware accelerated
JS Animations
CSS Animations
Demo: SnowFlake Animation
Style Calculations
Reference: CSSTriggers.com
Web Animations API
Demo: SnowFlake Animation
GIFs and Performance
Performance Audit
Materialup
Performance Audit
Time
Thank you.

More Related Content

What's hot

Blazor - C# for the web
Blazor - C# for the webBlazor - C# for the web
Blazor - C# for the web
Wekoslav Stefanovski
 
Building JavaScript Apps for Force.com with EmberJS
Building JavaScript Apps for Force.com with EmberJSBuilding JavaScript Apps for Force.com with EmberJS
Building JavaScript Apps for Force.com with EmberJS
Salesforce Developers
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize images
Shogo Sensui
 
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
Scott Abel
 
Responsive Design Lessons
Responsive Design LessonsResponsive Design Lessons
Responsive Design Lessons
Daniel Naumann
 
Degrafa Top 5 Features
Degrafa Top 5 FeaturesDegrafa Top 5 Features
Degrafa Top 5 Features
Juan Sanchez
 
Tools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In FlexTools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In Flex
Pek Pongpaet
 

What's hot (7)

Blazor - C# for the web
Blazor - C# for the webBlazor - C# for the web
Blazor - C# for the web
 
Building JavaScript Apps for Force.com with EmberJS
Building JavaScript Apps for Force.com with EmberJSBuilding JavaScript Apps for Force.com with EmberJS
Building JavaScript Apps for Force.com with EmberJS
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize images
 
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
 
Responsive Design Lessons
Responsive Design LessonsResponsive Design Lessons
Responsive Design Lessons
 
Degrafa Top 5 Features
Degrafa Top 5 FeaturesDegrafa Top 5 Features
Degrafa Top 5 Features
 
Tools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In FlexTools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In Flex
 

Similar to Performance beyond page load (jQuery Conference)

Hacking to be performant
Hacking to be performantHacking to be performant
Hacking to be performant
Apoorv Saxena
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
FITC
 
Advanced #4 GPU & Animations
Advanced #4   GPU & AnimationsAdvanced #4   GPU & Animations
Advanced #4 GPU & Animations
Vitali Pekelis
 
Fast but not furious: debugging user interaction performance issues
Fast but not furious: debugging user interaction performance issuesFast but not furious: debugging user interaction performance issues
Fast but not furious: debugging user interaction performance issues
Anna Migas
 
Wp7 performance challenges
Wp7 performance challengesWp7 performance challenges
Wp7 performance challenges
Gergely Orosz
 
#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography
Harald Kirschner
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
Bastian Grimm
 
Analyse your web performance
Analyse your web performanceAnalyse your web performance
Analyse your web performance
Ron Apelbaum
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
Paul Bakaus
 
GTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.comGTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.com
Rabius Sany
 
How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdf
Andrea Verlicchi
 
High performance in react native
High performance in react nativeHigh performance in react native
High performance in react native
Viet Tran
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
 
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
Justin Dorfman
 
NordicJS: Fast but not Furious: Debugging User Interaction Performance Issues
NordicJS:  Fast but not Furious: Debugging User Interaction Performance IssuesNordicJS:  Fast but not Furious: Debugging User Interaction Performance Issues
NordicJS: Fast but not Furious: Debugging User Interaction Performance Issues
Anna Migas
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Jason Harwig
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
Danny Calders
 
Netflix Webkit-Based UI for TV Devices
Netflix Webkit-Based UI for TV DevicesNetflix Webkit-Based UI for TV Devices
Netflix Webkit-Based UI for TV Devices
Matt McCarthy
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performance
kaven yan
 
Html5 game using impact js
Html5 game using impact jsHtml5 game using impact js
Html5 game using impact js
Ha Bogay
 

Similar to Performance beyond page load (jQuery Conference) (20)

Hacking to be performant
Hacking to be performantHacking to be performant
Hacking to be performant
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
Advanced #4 GPU & Animations
Advanced #4   GPU & AnimationsAdvanced #4   GPU & Animations
Advanced #4 GPU & Animations
 
Fast but not furious: debugging user interaction performance issues
Fast but not furious: debugging user interaction performance issuesFast but not furious: debugging user interaction performance issues
Fast but not furious: debugging user interaction performance issues
 
Wp7 performance challenges
Wp7 performance challengesWp7 performance challenges
Wp7 performance challenges
 
#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
 
Analyse your web performance
Analyse your web performanceAnalyse your web performance
Analyse your web performance
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
GTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.comGTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.com
 
How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdf
 
High performance in react native
High performance in react nativeHigh performance in react native
High performance in react native
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
 
NordicJS: Fast but not Furious: Debugging User Interaction Performance Issues
NordicJS:  Fast but not Furious: Debugging User Interaction Performance IssuesNordicJS:  Fast but not Furious: Debugging User Interaction Performance Issues
NordicJS: Fast but not Furious: Debugging User Interaction Performance Issues
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
 
Netflix Webkit-Based UI for TV Devices
Netflix Webkit-Based UI for TV DevicesNetflix Webkit-Based UI for TV Devices
Netflix Webkit-Based UI for TV Devices
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performance
 
Html5 game using impact js
Html5 game using impact jsHtml5 game using impact js
Html5 game using impact js
 

Recently uploaded

一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
k4ncd0z
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
Infosec train
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
Integrating Physical and Cybersecurity to Lower Risks in Healthcare!
Integrating Physical and Cybersecurity to Lower Risks in Healthcare!Integrating Physical and Cybersecurity to Lower Risks in Healthcare!
Integrating Physical and Cybersecurity to Lower Risks in Healthcare!
Alec Kassir cozmozone
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 

Recently uploaded (14)

一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
Integrating Physical and Cybersecurity to Lower Risks in Healthcare!
Integrating Physical and Cybersecurity to Lower Risks in Healthcare!Integrating Physical and Cybersecurity to Lower Risks in Healthcare!
Integrating Physical and Cybersecurity to Lower Risks in Healthcare!
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 

Performance beyond page load (jQuery Conference)