Doesn’t Load Until I Scroll – Delayed JavaScript

Image of phone with the title of the article overlaid

I solved a somewhat strange issue on a client’s WordPress website the other day. On their products page, none of the products would load until the visitor scrolled or otherwise interacted with the site. A “loading” icon showed up, but nothing would load until an action was taken.

In this case, they were using the Essential Grid plugin on a website using the “Pro” theme from Themeco. It uses AJAX to generate the product listings.

So why wasn’t it loading?

It was actually Themeco support that figured out it was some kind of caching issue. I further figured out that our WP Rocket plugin was causing the issue. After looking briefly through the settings, it became fairly obvious what was happening.

Why things weren’t loading until scroll?

There is a setting in WP Rocket called “Delay JavaScript execution” found under WP Rocket -> Settings -> File Optimization -> JavaScript Files. I’m sure you can figure out what that does, but here is the explanation from the settings page:

Improves performance by delaying the loading of JavaScript files until user interaction (e.g. scroll, click).

More information is available in the WP Rocket docs.

But essentially it does just what it says: prevents JavaScript from loading until the user interacts with the site.

In our case, AJAX is obviously JavaScript, so the products did not load until the user scrolled, thus triggering the load of JavaScript. It’s worth noting that we didn’t notice the issue on desktop, only mobile. However, it was a very obvious problem.

Additionally, I found that the necessary code to make the hamburger menu work on mobile didn’t load right away either, which caused problems.

This could actually prevent any functionality from working if it relays on JavaScript. So it could prevent your menu, carousel, photos, videos, or anything else from loading until you scroll.

Overall this almost seems like a weird setting to have enabled by default, so if you are running into any issues, I would definitely consider disabling it.

One last note is that you can, if desired, specify specific scripts that should load regardless of this setting. So if you like the performance boost it gives you, but absolutely need certain scripts to load, this is a good option.

About Brian Johnson

Brian Johnson is a website developer and designer living in Minneapolis, Minnesota with a passion for code and WordPress. He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life.

3 Comments on “Doesn’t Load Until I Scroll – Delayed JavaScript”

  1. Thanx a tonn!!!!
    I was facing same problem and couldn’t figure out. This was the actual problem on home page with AI Lab theme.
    Great you shared this and I could solve the issue.

Leave a Reply

Your email address will not be published. Required fields are marked *