Making Hype animations load smoothly and removing above the fold blocking

iframe

(Stephen Voisey) #1

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:

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

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

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

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

  2. 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; }

  1. 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 :smiley:


#2

Very cool site!

Vimeo embeds can be placed directly within the inner HTML of a rectangle. Embedding their embed code within an HTML widget results in a double iframe and that causes issues.

We’d be happy to look into this to see why this is happening. Are you setting opacity or display to hide the elements?

Another option is to create a blank scene which transitions to the next scene (either via crossfade or 'instant’ly) when the scene is loaded. This sets up elements in the DOM for scene one and two, and transitions to the next scene only after any preloading has completed.

This is exported if any of these are true:

  • You are supporting IE 6-8 in the export process (only IE 6-8 loads this)
  • You are using Physics

This post has more detail: Banner ad file optimization


#3

I made a draft of the flow (from left to right) for a Hype document load sequence and have been meaning to share it:


(Stephen Voisey) #4

Thanks so much for the detailed response and graph Daniel. Much appreciated and very interesting. Also the kind comment on my site yesterday. I’ll try changing the Vimeo iFrame then and seeing how this goes. Be great if I can inline it all.

I’ll reply on Sunday/Monday regarding the other points and get back to you. Many thanks.