Adobe Animate HTML5 Canvas Animation Too Large for Web (need to optimize for load speed)

Question

I have just created my second interactive, Adobe Animate HTML5/Canvas project and I am very proud of it. The problem is, I know nothing about animating efficiently and conservatively when it comes to file formats, sizes, and excess data. I am wondering what steps I have to take to make this published HTML/Javascript project load without staring at a white screen for over a minute (please be patient, IT WILL LOAD EVENTUALLY). None of the Adobe Animate published code has been altered. I know I have to fix my images but do you guys see anything else that may speed this up other than adding a preloader?

http://weatherphases.epizy.com

I have run my page through PageSpeed Insights and still have no idea where to start. Let me know if you need screenshots, code, images, or any other information since I only have a link posted.

Answer 1

The majority of the load delay in your animation seems to come from loading images, with SpriteSheetUtils.extractFrame causing an additional delay. Your image sizes could be reduced by using something like tinypng to optimise them.

extractFrame is an expensive operation because it creates a new html image object and copies data from an internal canvas to it. The creators suggest replacing it with gotoAndStop in most cases: SpriteSheetUtils.extractFrame