Fine tune your performance!
Performance on any website is key.
It shows who actually cares about the website or feature they are building compared to people who just want it live.
By performance, I don’t just mean loading times, whilst that is a huge factor, I mean the response time to user interactions. The time is takes to render a slider moving or that amazing animation you spent hours working on.
Imagine being in a car and pressing the brake peddle, you want it to work straight away. If not, well, you might just say hi to that tree in front of you. Whilst no-one is going to be hurt if your websites’ performance isn’t on top of its game it will instead have a huge affect on the user experience.
It shows you care deeply about every little interaction that a user might take.
60fps is your target!
Always aim for that 60fps target.
60fps is what your iPhones’ scroll at. If you used an app and a table view didn’t respond to well, you would notice.
Your animations should be the same.
Even a single frame can be noticeable. And we don’t want that. We want it to be 60fps.
Flipboard understand that DOM interactions are slow and can kill any time of performance tuning instantly. So instead, they made React Canvas. A ReactJS component that uses the
<canvas> to improve performance.
Ignore all the accessibility issues with this for a second and think how amazing that is.
The below image is Flipboard mobile in action. Notice how it doesn’t drop below 60fps at any point.
Animations are fast and so is rendering. You can scroll through a list with animations happening at the same time and not drop a single frame.
Repaints in the browser are expensive operations. It’s drawing every single element again. All because you changed a single CSS property. NOT COOL!
Think about what CSS properties you are animating or changing.
Can it be done with
opacity? These two properties help greatly with 60fps!
Check out CSS triggers to see what triggers repaints.