SlideShare a Scribd company logo
1 of 72
Download to read offline
Performance beyond
Page load
CSS Conf Asia 2015
Let’s start with a
small survey
How many of you
like
animations
in
Material Design?
But, you won’t like
animations if they’re
NOT smooth
Rendering
Performance
Goal: Build smooth interaction experiences
Let’s start with a
Case Study
Marriage Proposal
Next thing?
E-Shopping
though
what happened next...
Reaction
Bad performance of
Shopping portal
which lead to..
Discussion of the
performance impact
followed by actions
Wait
before that we need to understand what’s happening
technically, right?
Apoorv Saxena
Full stack Engineer, @apoorv_saxena
India
+ Workshops
+ Meetups
Let’s start with Basics
BIOSCOPE
What is smooth interaction?
Devices refresh their screen 60 times a second and even
more than that.
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.
10ms isn’t a lot of time
When failing to meet the frame budget of
10ms, we come across
Jank
Browser rendering
process
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
Paint
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
Compositing
Performance impact
of operations
Layout > Paint > Composite
How to analyse the
performance of a
webpage
For use in Development
Chrome Dev Tools:
FPS meter
Demo
Chrome Dev Tools:
Enable paint flashing
Demo
Chrome Dev Tools:
Timeline
Performance
best practices
CPU
v
GPU
● Not efficient in handling
graphics related operations.
JavaScript utilises CPU followed by
GPU when manipulating DOM style.
s
● Optimized for handling Graphics
operations.
CSS directly utilises GPU for applying
CSS operations and thus hardware
accelerated.
Rule of Thumb:
Use classes to update element styling instead of using
JavaScript
Using CSS for element’s style manipulation:
var player = $(‘#player’);
player.removeClass(‘move--left’);
player.addClass(‘move--right’);
Using JS for element’s style manipulation:
var player = $(‘#player’);
$(‘#player’).css({ left: ‘0px’, right: ‘10px’ });
Code:
Style Calculations
Reference: CSSTriggers.com
Must follow:
I. Understand what impacts rendering performance (Profile)
II. Choose your CSS rules wisely
III. Avoid triggering layout / paint operation repeatedly or
when animating
IV. Prefer using transform and opacity changes (trigger only
composite operation) for animations
Reduce complexity of
CSS selectors
Roughly 50% of the time used to calculate the
computed style for an element is used to match
selectors, and the other half of the time is used for
constructing the RenderStyle (computed style
representation) from the matched rules.
Rune Lillesveen, Opera / Style Invalidation in Blink
.title {
/* styles */
}
// performant
.box:nth-last-child(-n+1)
.title {
/* styles */
}
// less performant
Remove unused
CSS rules
CSS selector parsing is optimized, though unused CSS rules
have a bigger performance impact
Automate using Gulp or Grunt tasks
Reduce number of
elements being styled
Why to paint the entire body, when changes can/should be
limited to that element
Example: Google.com
Measure your style
recalculation cost
Possible Jank condition:
If a user hovers over a long list of
<li> elements while scrolling
li:hover {
background-color: red;
/* Layout / Paint operation */
}
Reduce paint areas
Don’t paint unnecessarily. Avoid Union of Damaged regions.
CSS Animations
Use composite CSS operations inside keyframe definition
such as transform and avoid triggering paint / layout operation
Debounce input
handlers
e.g. disable hover event listener while scrolling
Example
Promote elements
that update frequently
Caution: Don’t promote elements without profiling
Did you know?
Fixed elements having “position: fixed”
property and scrollable elements, are
repainted by the browsers
Example
.moving-element {
will-change: transform;
}
.moving-element {
transform: translateZ(0);
}
GIFs and Performance
Disable animation when not inside the viewport
Live
Performance Audit
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.
Path to Performance
http://perfaudit.com, @perfaudit
Thanks.

More Related Content

What's hot

Extensions +Tools/Softwares For Freelancing
Extensions +Tools/Softwares For FreelancingExtensions +Tools/Softwares For Freelancing
Extensions +Tools/Softwares For FreelancingMehedi Hasan Sobuj
 
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
 
How to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fpsHow to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fpsIntexSoft
 
Wp7 performance challenges
Wp7 performance challengesWp7 performance challenges
Wp7 performance challengesGergely Orosz
 
Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016Octavio Andrés Cifuentes
 
Responsive Design Lessons
Responsive Design LessonsResponsive Design Lessons
Responsive Design LessonsDaniel Naumann
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize imagesShogo Sensui
 
Adm web 01 - html css - a-frame
Adm   web 01 - html  css - a-frameAdm   web 01 - html  css - a-frame
Adm web 01 - html css - a-frameMatthew_W00d
 

What's hot (12)

Extensions +Tools/Softwares For Freelancing
Extensions +Tools/Softwares For FreelancingExtensions +Tools/Softwares For Freelancing
Extensions +Tools/Softwares For Freelancing
 
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
 
How to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fpsHow to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fps
 
Wp7 performance challenges
Wp7 performance challengesWp7 performance challenges
Wp7 performance challenges
 
Autospoting - an automated EC2 spot market bidder
Autospoting - an automated EC2 spot market bidderAutospoting - an automated EC2 spot market bidder
Autospoting - an automated EC2 spot market bidder
 
Blazor - C# for the web
Blazor - C# for the webBlazor - C# for the web
Blazor - C# for the web
 
CSS3 Animations
CSS3 AnimationsCSS3 Animations
CSS3 Animations
 
Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016
 
Responsive Design Lessons
Responsive Design LessonsResponsive Design Lessons
Responsive Design Lessons
 
Speed Up Your Site
Speed Up Your SiteSpeed Up Your Site
Speed Up Your Site
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize images
 
Adm web 01 - html css - a-frame
Adm   web 01 - html  css - a-frameAdm   web 01 - html  css - a-frame
Adm web 01 - html css - a-frame
 

Similar to Performance beyond page load - CSS Conf Asia 2015

Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hatNeil Perlin
 
Spectrum 2015 responsive design
Spectrum 2015   responsive designSpectrum 2015   responsive design
Spectrum 2015 responsive designNeil Perlin
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issuesNeil Perlin
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
 
2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960LightSpeed
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for BeginnersD'arce Hess
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...guest83d3e0
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLDee Sadler
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)clickramanm
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performancekaven yan
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Webaleemb
 
Reworking our-workflows
Reworking our-workflowsReworking our-workflows
Reworking our-workflowsnolly00
 
Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)patrick.t.joyce
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013Khoa Quach
 
Maintainable Javascript carsonified
Maintainable Javascript carsonifiedMaintainable Javascript carsonified
Maintainable Javascript carsonifiedChristian Heilmann
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth makingCathy Lill
 
Redesigning a large B2B website - The FusionCharts revamping story
Redesigning a large B2B website - The FusionCharts revamping storyRedesigning a large B2B website - The FusionCharts revamping story
Redesigning a large B2B website - The FusionCharts revamping storyFusionCharts
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
 

Similar to Performance beyond page load - CSS Conf Asia 2015 (20)

Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
 
Spectrum 2015 responsive design
Spectrum 2015   responsive designSpectrum 2015   responsive design
Spectrum 2015 responsive design
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performance
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
 
What’s Up, EDoc?!
What’s Up,EDoc?!What’s Up,EDoc?!
What’s Up, EDoc?!
 
Reworking our-workflows
Reworking our-workflowsReworking our-workflows
Reworking our-workflows
 
Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013
 
Maintainable Javascript carsonified
Maintainable Javascript carsonifiedMaintainable Javascript carsonified
Maintainable Javascript carsonified
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth making
 
Redesigning a large B2B website - The FusionCharts revamping story
Redesigning a large B2B website - The FusionCharts revamping storyRedesigning a large B2B website - The FusionCharts revamping story
Redesigning a large B2B website - The FusionCharts revamping story
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 

Recently uploaded

React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationDianaGray10
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfwill854175
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemSafe Software
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureAntonio de Llamas
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023Joshua Flannery
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...stockholm university
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerAnchore
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxatharvdev2010
 

Recently uploaded (20)

React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automation
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdf
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data Ecosystem
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for Rotogravure
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey Hightower
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptx
 

Performance beyond page load - CSS Conf Asia 2015