mirceapiturca / Sections

Shopify sections for everyone. Tooltips, FAQ, Quiz, and App Performance
https://sections.design
MIT License
173 stars 80 forks source link

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

Open NebularNerd opened 2 years ago

NebularNerd commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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. :)