Hi folks,
Here are some of my findings regarding making my Hype animation load quickly and smoothly, but also a couple of questions about my own site and a couple of issues I have at the end.
I ran into issues with my animation playing smoothly when the page first loaded so used the following techniques to solve this issue for the most part. In addition one of the most difficult and frustrating issues I found when it came to page performance optimisation, was solving the dreaded ‘above the fold’ render blocking.
This is caused when the page doesn’t render immediately because the browser is waiting for additional resources to load — typically additional scripts. This also affects SEO because Google partially rewards faster loading websites.
Here are the main points I found out and integrated:
-
If your animations are above the fold i.e. needed as soon as the site loads you should inline the Hype scripts, but place this code at the bottom of your HTML file — not at the top.
-
If your animations are not needed straight away then consider adding the async setting to the script call or even setting it to defer — which means the resource is only loaded once the main page is downloaded.
<script src="script.js" async></script>
or
<script src="script.js" defer></script>
- I found out by accident that I didn’t need the full HYPE-590.full.min.js file. Instead I used just the HYPE-590.thin.min.js file.
I’m not sure if this works for every type of Hype animation or if the idea is always to simply use thin.min.js for production sites, but either way this worked for me and saved a lot of KB.
-
If your animation is needed straight away when your site loads, I found other scripts could really affect the animation performance. The worst culprit for me was the live chat script, so I used the javascript setTimeout function to delay this loading and bypass the performance hit.
-
Consider combining scripts that don’t need to be loaded straight away into a separate single javascript file. This in turn isn’t loaded until the page is ready. This is THE best way to eliminate most above the fold blocking issues and made my main animation far smoother.
Here is the script to do this:
function JSOnLoad() { var element = document.createElement("script"); element.src = "delayed.min.js"; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", JSOnLoad, false); } else if (window.attachEvent) { window.attachEvent("onload", JSOnLoad); } else { window.onload = JSOnLoad; }
- Depending on your web server hosting speed and if your animation needs to load immediately, I found it useful to delay the start of animations in Hype by 1 or more seconds. This gave everything a chance to load nicely and then start animating without any juddering.
Couple of questions regarding the animation on my site: https://compass.works
Ideally, I’d like my main hype generated js file to also be inlined, but I ran into an issue when I did this.
My second scene includes a HTML widget with a Vimeo iframe call inside of it. But instead of rendering the Vimeo player, instead I get a local site 404 error.
Is this due to iframe browser security limitations with the script? Is it possible to get around this? Could I set the source of this iFrame after the hype animation is loaded?
Lastly, I found that despite setting my SVG elements to be hidden in Hype before animating, there would be a brief ‘Flash’ as the site loaded.
In most browsers I eliminated this by creating a white SVG rectangle to appear above these and then hide this instead when animation starts.
Any help appreciated 
