Jank Free Must-Sees!
Strapped for time or just getting started with eliminating jank from your projects? These are our must-see resources!
Modern browsers try to refresh the content on screen in sync with a device's refresh rate. For most devices today, the screen will refresh 60 times a second, or 60Hz. If there is some motion on screen (such as scrolling, transitions, or animations) a browser should create 60 frames per second to match the refresh rate.
Jank is any stuttering, juddering or just plain halting that users see when a site or app isn't keeping up with the refresh rate. Jank is the result of frames taking too long for a browser to make, and it negatively impacts your users and how they experience your site or app.
Strapped for time or just getting started with eliminating jank from your projects? These are our must-see resources!
From memory consumption to image decoding, Chrome provides a complete range of tools for debugging and profiling your project's performance.
For times where you need to dig into even more detail you can use Chrome Tracing.
Chrome Dev Summit 2013: 60FPS Layout and Rendering
CSSConf 2013: Jank Busting
Gone in 60 Frames Per Second
JSConf.eu 2013
Google I/O 2013: Jank Busting
Google I/O 2012: Jank Busting
The Breakpoint Ep. 4 — The Tour De Timeline
The Breakpoint Ep. 6: Accelerating Load Time, Run Time, and JS tooling
Velocity 2012 about:tracing lightning demo
Mobile Web Thursdays: Performance on Mobile
Fast responses to user interactions help make your apps feeling fluid and a joy to use.
Painting is the process of filling in the pixels for your page. Everything from CSS to image decoding and resizing has consequences for paint performance.
Before the browser can paint anything it has to first apply all the styles to your elements and figure out every element's geometry on the page.
Super slick animations and interactivity are a critical piece of making high quality and engaging projects.
Want to know how other developers have fought to make their apps jank free?
