Loading and weight optimization

wordpress

(Vincent) #1

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


(Hans-Gerd Claßen) #2

reduce filesizes, filerequests …
svg inlinecode may bloat …
any third party libraries?
iFrames involved?

you may attach a samplefile …


(Vincent) #3

Thank you Hans-Gerd !
Here is the website
https://www.m2iformation.ovh

And the exported files from Hype
html5.zip (613.8 KB)


#4

Are you using advanced exporting? There are two options that can significantly reduce the size of a Hype project…

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.)


(Vincent) #5

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


(Hans-Gerd Claßen) #6

The Hypefiles are quite good. The main problem seems to resist in surrounding stuff …
https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fwww.m2iformation.ovh%2F


#7

Thank You @h_classen… did not know about the “Page Speed Insights” tool. :pray:


(Jonathan Deutsch) #8

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:

<script type="text/javascript" charset="utf-8" src="https://https://www.m2iformation.ovh/html5/html5.hyperesources/megamenuhtml5solutions1190x420_hype_generated_script.js?57169"></script>

And

<script type="text/javascript" charset="utf-8" src="https://https://www.m2iformation.ovh/html5/html5.hyperesources/megamenulistingv5ovh_hype_generated_script.js?97936"></script>

Note the extra https:// in there.

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.


#9

Good things to know :mag_right: Thank You!


#10

Ah, that’s right… this would affect storage space, not loading.

Wow, nice!

That is good to know.


#11

Do you know about the developer tools in the browser? If you have that open, while the page is loaded, you can better see what’s causing the slowdown.

…and just a general comment, I use WP Super Cache. (I’m not familiar with WP Rocket.) I like it, loads pages like it’s stored locally on my desktop. :smile:


(Loves Hype) #12

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.

regards