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

Wp7 performance challenges
Wp7 performance challengesWp7 performance challenges
Wp7 performance challenges
Gergely Orosz
 

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

2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960
LightSpeed
 
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
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013
Khoa Quach
 
Maintainable Javascript carsonified
Maintainable Javascript carsonifiedMaintainable Javascript carsonified
Maintainable Javascript carsonified
Christian Heilmann
 

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

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 

Performance beyond page load - CSS Conf Asia 2015