Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not an issue but an enhancement (maybe for some) #9

Open
NebularNerd opened this issue Jan 5, 2022 · 2 comments
Open

Not an issue but an enhancement (maybe for some) #9

NebularNerd opened this issue Jan 5, 2022 · 2 comments

Comments

@NebularNerd
Copy link

Hi everybody,

I came across this script the other day while tuning my store maximum speed and Google Pagespeed love. Firstly it's great, easy to implement and works straight away. I personally was using the 'scroll' detection but for some pages there's little or no scrolling needed.

Looking around I found another handy speed hack here 'Delay Google Tag Manager' and borrowed the mousemove and touchstart to add to your script. Now whenever someone moves the mouse, touches the screen or scrolls the script triggers and everything pops into life :)

Weirdly on Chrome if you have the dev console open the mousemove fails to work unless you click a button (which then triggers the activity) but if you have a visual thing being hidden, for example I hide my review stars until you scroll,move,touch it's easy to see the script has triggered.

For those looking to experiment you'll need to make the following changes to the script at line 130


function scrollLoad(loadRule) {
        var eventFn = partial(loadOnScroll, loadRule.originalUrl);
        var eventOptions = supportsPassive ? {passive: true} : false;
        window.addEventListener('scroll', eventFn, eventOptions);
        window.addEventListener('mousemove', eventFn, eventOptions);
        window.addEventListener('touchstart', eventFn, eventOptions);

        function loadOnScroll(src) {
          loadScript(src);
          window.removeEventListener('scroll', eventFn, eventOptions);
          window.removeEventListener('mousemove', eventFn, eventOptions);
          window.removeEventListener('touchstart', eventFn, eventOptions);
        }
      }

Hope this helps somebody :)

@mirceapiturca
Copy link
Owner

Hi @NebularNerd ,

Indeed the scroll event will not be triggered on pages that do not overflow. Your solution would ensure that when the user interacts (click, touch) with the page the script will load.

It's a good solution and I will probably add it to the load logic.
Thanks!

@NebularNerd
Copy link
Author

It's been working a treat on my store, I've had pretty good success trimming the fat, especially things like Printful and Klarna that are proper hogs yet are only needed on about 3 or 4 pages, and even then only after a mousemove. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants