New to the community? Start here

[Hummingbird Pro] Delay JavaScript execution until user interaction

1

Delay the execution of external/internal JavaScript until user interaction occurs like mouse movement, touch, scroll, keyboard input, etc.

There could be options to choose which scripts to apply this to and on which pages.

Wed, 24 Feb 2021 14:48:46
More Hummingbird Pro discussions
Hummingbird Pro
  • Erick Fogtman
    • Asado God

    Hey Julian ,

    It seems today was an inspired one for your feature ideas, you gotta love those days ????.

    I understand how this can be useful in some specific cases but I would like to ask you again (as I did on the preload on hover thread) if you personally used this feature with another plugin and had good results.

    I’m curious as to how much of a difference delaying the JS vs deferring it (which Hummingbird currently offers) does. I’d run some tests on my end as well to see how it behaves and how Core Web Vitals are affected too.

    Regards,
    Erick

    • Julian
      • Click Here

      Haha, they’ve been on my mind for a little while. I’m unloading them all on you now :smiley:

      From the same author of Flying Pages there’s… Flying Scripts. To be honest I have not done any speed tests with this one or anything and you can’t just use it on every script without things breaking. This is something that requires some care and manual testing, just like asset optimization. If you take a quick look at the plugin to see how it works and you look at the reviews, it looks like people are getting really good results with it.

  • Tony G
    • Mr. LetsFixTheWorld

    Julian – I dunno if you are familiar with the mechanics of exactly how JS is scanned and executed in a page. I’ve recently had to update my knowledge on this topic, and I’m really glad I did.

    Specifically, when you say “Delay the execution of external/internal JavaScript until user interaction occurs” – JS loads in one cycle of page loading, and that includes initialization code, but it doesn’t actually “execute” JS until there is an event – exactly as you say.

    So I’m thinking you really mean “Delay the LOADING of JavaScript”. There are a few ways to do this, but with regard to the response by Erick Fogtman – DELAY is probably what you’re looking for.

    Thanks for confirming that Erick – I haven’t looked at this part of Hummingbird recently and was wondering about it.

    If there is any confusion or curiosity about Async vs Delay JS loading, check out this video and let me know if it helps: https://youtu.be/BMuFBYw91UQ

    Another way to change how JS loads is to create the request after the page has been loaded, and/or to try to use modularized JS in the server that isn’t fully loaded on initialization. Either of these techniques require special coding – I don’t believe there is tooling to automate handling like this. So if you see a problem with the performance of specific scripts, see if you can work with the developers to get them to refactor the code. This is usually something done later in the development cycle, and only after problems are recognized, so it’s not something a developer would usually take initiative to optimize unless and until mentioned by (you) a user. The way we write JS has changed a few times in recent years, so well-established code might be using older techniques that really could be optimized … if there is adequate motivation.

    Developers – I’m hoping to get a reality check – does all of that agree with your experience and/or understanding? Thanks.

    • Julian
      • Click Here

      Hey Tony G ,

      I dunno if you are familiar with the mechanics of exactly how JS is scanned and executed in a page

      Can’t say I’m an expert :grin:

      Though, from the plugin’s FAQ (Flying Scripts):

      How is it different from defer?
      defer tells browser to download the script when found and execute it when HTML parsing is complete. When you include a script in Flying Scripts, those scripts won’t be executed until there is a user interaction.

      It apparently does delay the execution of scripts until there is user interaction. Now I’m not sure if this would be a good supplement to deferring scripts? I don’t know enough about it.

      That video you linked to did a good job explaining the differences between async and defer. I wasn’t aware of the differences before.

      • Tony G
        • Mr. LetsFixTheWorld

        It does sound like Flying Scripts takes Delay to the next step. Thanks. I would hope the FS people would provide some more info, benchmarks, etc, to help people understand what’s happening and the benefits. This would help to avoid the need for each interested site manager to do their own research.