Hi there,
I’ve three Hype’s animations that have to be loaded with the homepage of my Wordpress website, but the time of loading is very low, even with a WordPress cache plugin (WP Rocket).
How to reduce the size of exported Hype’s files ?
Thank you very much in advance for your help,
Kind regards
Vincent
If you don’t need IE 6-9 support, just uncheck that option. Additionally, since it’s three Hype projects on the same page, you could use the “Use external runtime URL” option. You could just put the Hype script on your website and then link to it there. So, instead of loading the same thing three times, it only needs to be loaded once. (The three projects probably can share the Hype JS file.)
Ho wow, thank you very much also Photix, I didn’t knew this options panel…
I’ll try several exports to find the best one.
I’d already grouped the runtime in one place for the 3 animations, but I’ll try with that method.
Kind regards
Vincent
Ultimately, you will need to measure what is causing the loading to take a while using web inspector tools. Just looking at the network tab, you are loading a significant number of resources, and most are not related to your hype documents. In fact, 2 of the 3 hype animations do not even load on your page! Probably related to typos in your HTML:
This guide is a good starting point to performance analysis.
Correction note: this would not affect load times - if the visitor's browser is not on IE 6-8 then the larger "full" runtime would not be used. This is reflected in the @1x or @2x download sizes shown in the panel. The setting is more for advertisers who need a small zip size because ad system calculations don't take into account real world resource usage and instead just look at files.
Another correction note: as long as the three Hype documents are on the same page (as in, not isolated in iframes) and using the same version, Hype will only load a single runtime. It is smart enough to see if it has already been loaded (or will be loaded) and not download multiple times. This setting would not affect load times for the user's document since they are not using the iframe method to insert the Hype animations.
I see you embedded SVG in your files. Run it through a tool like SVGO before embedding it or even link it as an external file if you are using it across your files and let the browser cache it.
Specially your carte is big and I suspect that you created an animation for every dot. That is highly inefficient. Rather create the animation once and replace the field through JS and have the data in a array. This will reduce that file by at least 100-150kb.