High Performance Animations

Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. True story. A recent animation-heavy prototype I once made was, at first, quickly thrown together by animating top/left, scrollTop […]

Gone In 60fps – Making A Site Jank-Free

To highlight how widespread rendering is a performance bottleneck, we’re going to walk through a detailed case study of Pinterest.com. Learn about common paint issues in modern sites and equally as importantly — how to diagnose them. We’ll also look at changes Pinterest made to get up to a 40% improvement in rendering times. A […]

Why mobile web apps are slow

It may prove to be a very stupid idea, but this article is my attempt to talk reasonably about a topic that has so far spawned 100% unreasonable flamewar-filled bikeshed discussions. A lengthy, yet highly informative, and very in-depth article on why exactly JS-heavy web apps run slow on mobiles. Goes into depth on garbage […]

Jake Archibald – Rendering without lumpy bits

Right, we’ve got a new project, we have to calculate and draw 500,000 pixels, and the deadline is in 16.67 milliseconds. When we’re done, we’ll do it again, and again. Web performance has always been about delivering those pixels on time, but the target has shifted. Optimising pure JavaScript (loops, string concatination, arithmetic) is more […]

“We’ve been conditioned for web apps to suck.”

There is no single explanation [for why people choose a native app over a web based version]. The reason browser apps lose this fight is because of a raft of small things. It’s death by a thousand cuts. Tiny Little Knives → (via cameronmoll) Related: It’s not a web app. It’s an app you install […]

Browser Repaint Performance

To hit 60fps, we sometimes need to go beyond JavaScript as the sole performance bottleneck for our pages and spend more time investigating paint and layout issues – styles might actually be the core cause of our sluggish performance. The H shortcut within the Developer Tools sure comes in handy! DevTools: Visually Re-engineering CSS For […]