Performance Tips
Be careful which CSS properties you animate
Many CSS properties trigger layout events when changed. That means that changing one property can sometimes cause
the entire page to be re-rendered, which imposes a significant performance hit. CSS Triggers is a website
that lets you quickly check which CSS properties are expensive to animate. (Spoilers: transform and opacity are just about the only
CSS properties that can be freely maniuplated with little overhead).
Minimize active <video> tags
For animations that are always the same, pre-rendering them as webm video (which supports alpha transparency)
is an option. However, care must be taken to remove these <video> nodes from the DOM when they are not in use.
Even if a <video> tag is not currently playing, simply having it in the DOM can impact performance.
Use sprite sheets when appropriate
For short pre-rendered animations, a sprite sheet might be the best solution.
If done right, they can be smaller in size and perform better than their <video> counterpart.
There are many libraries and tools out there for sprite sheet creation, but
EaselJS (javascript Canvas2D library) and
TexturePacker (sprite sheet creation program) are a good place to start.
A <div> is (generally) faster than a picture or video
Videos and sprite sheets can be nice shortcuts to speed up production time, but if your graphic is
struggling to maintain a solid framerate then you may need to consider breaking it down into smaller parts.
A handful of <div>s will generally perform better than a video or sprite sheet, as long as you aren't
applying too many performance-intensive CSS styles. Use CSS Triggers as a reference to
know how expensive it is to animate various CSS properties.
Minimize alpha pixels
Alpha (transparency) is expensive to render. Try to keep your images and videos with alpha cropped as much as possible.
Avoid multiple CSS masks
CSS masks have their uses, but layering
multiple masks in a scene can lead to significant performance reductions.
When possible, use a culling div with overflow: hidden instead.
Compress your images
Compressed images won't help framerate, but they will improve load times. Compressing your PNGs with a service such as TinyPNG can result in dramatically reduced filesizes. Be careful when compressing images with subtle gradients, as some detail may be lost.
Keep <canvas> tags above 256x257 total pixels
In Chrome, <canvas> tags are only hardware accelerated when their total size is at least 256x257 pixels.
Below this size, canvases are software rasterized and can severely reduce the framerate and performance of a graphic.