In terms of optimization, is it better to do animations using canvas or with JavaScript and CSS?

Question

Google is forever updating their algorithm for SEO. It came to mind that page size (according to Google AMP) plays a big part as it affects loading time. The question is for the sake of file size and loading time, is it better to animate using the canvas or stick with the norm of JavaScript and CSS?

Please elaborate on your opinion/experience.

Answer 1

Animations using Canvas require use of JS.
Using Css or Svg can be done with or without JS.

Animations or not, JS can be used to build dynamically all or part of html code, for reduce file size/loading time, in measure of quantity of JS to handle this (with eventual advantage of cache possibility, if data/code goodly separated)... in the other hand, all dynamic content added with JS is not well loved by search engines, and could potentially be absent among browsers not providing JS or let user desactivate it ^^

For file size/loading time, I think Canvas, Css or Svg doesn't make great differences by themselves, but the attention should be given to ressources linked needed, as essentially images. By this point of view, Svg has a big advantage by handling vector based image at first (can handle bitmaps, as textures for example, but not the first purpose).

For file size (meaning html source code, not ressources linked) as for loading time, each of three animation solutions should be compare in each context, the better way being never the same :P