SlideShare a Scribd company logo
1 of 66
Download to read offline
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

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 EmberJSSalesforce Developers
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize imagesShogo 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 LessonsDaniel Naumann
 
Degrafa Top 5 Features
Degrafa Top 5 FeaturesDegrafa Top 5 Features
Degrafa Top 5 FeaturesJuan 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 FlexPek 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: Achieving buttery smooth interactions

Hacking to be performant
Hacking to be performantHacking to be performant
Hacking to be performantApoorv Saxena
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin HowlettFITC
 
Advanced #4 GPU & Animations
Advanced #4   GPU & AnimationsAdvanced #4   GPU & Animations
Advanced #4 GPU & AnimationsVitali 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 issuesAnna Migas
 
Wp7 performance challenges
Wp7 performance challengesWp7 performance challenges
Wp7 performance challengesGergely Orosz
 
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 2018Bastian Grimm
 
Analyse your web performance
Analyse your web performanceAnalyse your web performance
Analyse your web performanceRon Apelbaum
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQueryPaul Bakaus
 
GTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.comGTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.comRabius 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.pdfAndrea Verlicchi
 
High performance in react native
High performance in react nativeHigh performance in react native
High performance in react nativeViet Tran
 
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 presentationJustin Dorfman
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
 
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 IssuesAnna Migas
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with CanvasJason Harwig
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & TypographyDanny 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 DevicesMatt McCarthy
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performancekaven yan
 
Html5 game using impact js
Html5 game using impact jsHtml5 game using impact js
Html5 game using impact jsHa Bogay
 

Similar to Performance beyond Page Load: Achieving buttery smooth interactions (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 presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
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

IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119APNIC
 
Tari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T ShirtsTari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T Shirtsrahman018755
 
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119APNIC
 
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119APNIC
 
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)ICT Watch - Indonesia
 
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...ICT Watch - Indonesia
 
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...vmzoxnx5
 
Basic Security.pptx is a awsome PPT on your mobiel
Basic Security.pptx is a awsome PPT on your mobielBasic Security.pptx is a awsome PPT on your mobiel
Basic Security.pptx is a awsome PPT on your mobielpratamakiki860
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 
draft-harrison-sidrops-manifest-number-01, presented at IETF 119
draft-harrison-sidrops-manifest-number-01, presented at IETF 119draft-harrison-sidrops-manifest-number-01, presented at IETF 119
draft-harrison-sidrops-manifest-number-01, presented at IETF 119APNIC
 
Power of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdfPower of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdfrajats19920
 

Recently uploaded (11)

IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
IPv6 Operational Issues (with DNS), presented by Geoff Huston at IETF 119
 
Tari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T ShirtsTari Eason Warriors Come Out To Play T Shirts
Tari Eason Warriors Come Out To Play T Shirts
 
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
Is DNS ready for IPv6, presented by Geoff Huston at IETF 119
 
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
Making an RFC in Today's IETF, presented by Geoff Huston at IETF 119
 
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
 
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
 
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
 
Basic Security.pptx is a awsome PPT on your mobiel
Basic Security.pptx is a awsome PPT on your mobielBasic Security.pptx is a awsome PPT on your mobiel
Basic Security.pptx is a awsome PPT on your mobiel
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 
draft-harrison-sidrops-manifest-number-01, presented at IETF 119
draft-harrison-sidrops-manifest-number-01, presented at IETF 119draft-harrison-sidrops-manifest-number-01, presented at IETF 119
draft-harrison-sidrops-manifest-number-01, presented at IETF 119
 
Power of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdfPower of Social Media for E-commerce.pdf
Power of Social Media for E-commerce.pdf
 

Performance beyond Page Load: Achieving buttery smooth interactions