Jump to content
Search Community

Most effective YET performant way of loading a Hero image animation

sam_tween_journeyer test

By sam_tween_journeyer
in GSAP

Moderator Tag
 Share
Go to solution Solved by OSUblake,

Recommended Posts

sam_tween_journeyer test

sam_tween_journeyer

Posted
Posted

Top of my <body> tag I have a hero image, which on mobile is guaranteed to fill 100vh, the full screen.

 

I want to guarantee the animation loads before the user scrolls down whilst maximising UX.

 

To accomplish this I presently load the HERO background texture jpg first.  I compressed the jpg from 52.1kb to 29.1kb, with some disappointing loss of grainess.

 

To accelerate its loading I then converted it to base64 and embedded it inline in the html.  This ballooned the html file size by 40kb to a total of 139kb - YIKES! This means overall the user is downloading an extra 10kb, than if I kept the image as an external file.

 

But I can guarantee its loaded for the animation beginning.

 

I then load this

  

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src='../javascript/SplitText.min.js'></script>

<script>
animation blah
</script>

Then I continue with the page's html.  It's a long page, there's a lot of it.  And more javascript in <script> tags at the bottom of the page to manage accordions and other animations not immediately required.

 

Is this optimum?  I presume those downloads block the page loading further. 

Is there a way to load those 2 gsap libraries async in the html header, and only have the <script>animation blah</script> execute once they've loaded?  What javascript would I use to detect that?

 

Am I making the right decisions for maximum performance?

Link to comment
Share on other sites
OSUblake test

OSUblake

Posted
Posted

Hi Sam,

 

How to optimize your site goes way beyond the scope of support we offer in these forums, and there is no silver bullet as every situation is unique. If you're looking for different way to load scripts, I would suggest looking into different ways of loading JavaScript, for example, using async or defer.

 

https://flaviocopes.com/javascript-async-defer/

 

Link to comment
Share on other sites
sam_tween_journeyer test

sam_tween_journeyer

Posted
  • Author
Posted

Cheers Blake for the link.

 

I'm hesitant to use async at all because I fear the gsap libraries may not be ready in time for the animation in the script tags.  They're losing concurrently to the html parsing I believe.

 

Am I misunderstanding how this works?

 

Every situation is different, well... my scenario of wanting to prioritise a hero animation and not caring so much about later animations, must be very common.

Link to comment
Share on other sites
  • Solution
OSUblake test

OSUblake

Posted
  • Solution
Posted
30 minutes ago, sam_tween_journeyer said:

I'm hesitant to use async at all because I fear the gsap libraries may not be ready in time for the animation in the script tags.  They're losing concurrently to the html parsing I believe.

 

Using defer they execute in the order they appear in the DOM.

 

1 hour ago, sam_tween_journeyer said:

I want to guarantee the animation loads before the user scrolls down whilst maximising UX.

 

I personally have never tried anything like that as it seems like bad UX in my opinion. 

 

If I need to make sure the user can't scroll before until something has loaded, then I would probably do something like a loading screen. But a loading screen only makes sense on certain types of websites, like a portfolio site.

 

But if you want the hero animation to play as soon as it loads, then I would probably put the GSAP scripts in the head, inline the image, and then immediately after that, add your script tag that does the hero animation. 

 

 

  • Like 1
Link to comment
Share on other sites
sam_tween_journeyer test

sam_tween_journeyer

Posted
  • Author
Posted

Cheers, implemented, moved script tags to head.

 

I experimented with  

<link rel="preload" href="used-later.js" as="script">

 

As described here

https://developers.google.com/web/updates/2016/03/link-rel-preload

 

But found it didn't work in Chrome, only loading via Script tags worked.

 

So great! Optimisation optimised!  Thanks Blake.

 

Happy New Year

x

Sam

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...