Rocket Loader causes blink/flicker on page load


#1

Hi

my website had flicker on page load, like white blink
after debugging what is the issue, I found it because rocket loader.js
the blink is gone after I block rocketloader.js
and then it coming up again when I unblock it
so now I disabled this feature

I am wondering whether this problem happens on my website only, or also on another websites?
FYI I use Shopify


#2

Rocket loader works by not sending any scripts to the browser, then injecting a rocket loader script into the bottom of the page which goes back and loads all of the scripts it originally prevented from loading.This allows the browser to load and parse the entire original HTML page before any javascript is ran, speeding up “first paint” time.

The above explanation is very minimal and simple, for a more technical breakdown see this SE post.

The cause due to one of the scripts you have on the page - it may rewrite/change a large portion of the HTML, requiring the browser to “re-paint” everything, or it may load/change the stylesheet of many elements (like the main body object) which would also make the browser re-paint.

Rocket loader isn’t for every purpose, and if you encounter issues like this in one of the scripts on the page rocket loader might not be the best fit for your website.


#3

@saiqulhaq is there a URL where we can see this? It doesn’t need to have Rocket Loader enabled but would be happy to take a look.


#4

Hello,
I have enabled RL in our UAT environment and can see similar issue.
during load You can see part of the site loaded and than it looks like very fast site reload.
displate.com - RL is disabled.
If You want just PM me and we can make some tests together on our UAT


#5

ok thanks for your explanation

the website is Shopify store website
I have tried to disable/block the script one by one, but too much scripts loaded by the website
it was not easy to find which script that causes re-render the entire page


#6

Hi

please check this out http://www.hustlerfitness.com/


#7

@saiqulhaq as far as I can see this reload happens without Rocket Loader - here’s the filmstrip from a Chrome page load with Rocket Loader disabled:

You can see the page loads in at 400ms and then blanks out until 1.50s. You’ll need to look at what JS is loading at that time to work out what is causing that double-paint.


#8

I note also Rocket loader blocks jQuery for all WP/Woo themes if your products using increased # of variations. Pages report " Uncaught ReferenceError: jQuery is not defined" so I deselected it.


#9

@user2331 that sounds like some kind of race condition, rather than an issue with Rocket Loader. If you have a URL (doesn’t need to have Rocket Loader enabled) I’d be happy to take a look.


#10

Thank you for replying.

Here it is : https://accessorify.me