WP Rocket & Cloudflare Rocket Loader => Display issues with elements blue


I have enabled Rocket Loader and it seems to really have a great impact on boosting my website speed. But it also making issues because things become “blue” when they load.

Why does it do that? And how I could remove those impacts?


Check well at the beginning

Your site uses the plugin Autoptimize, which is a great optimization plugin, but it does share some functions with Rocket Loader. RL was created to avoid combining CSS and JS files, which is one of the many functions of AO.

You may want to test your site with RL on, and the “combine JS and CSS” function of AO off, then try the other way around, and compare which works best.

Also, do you use the Cloudflare plugin? It’s a must in case you run AO, as it will purge the cache of Autoptimize whenever it purges the cache of HTML content, something the CF plugin will do automatically when you add or remove content to your site, as long as you set “Automatic Cache Management” to ON at the CF plugin panel.


Which one of those settings do you refer to?


You should try turning off the Aggregate JS-files, and this should automatically disable the second option as well. This way you will be left with only the first option checked, which will handle minifcation, something AO does better (more aggressively) than Cloudflare.

Uncheck the same for CSS files, then make sure to flush both AO cache, whatever page cache your WP installation has, and Cloudflare cache.

Don’t forget to test the suggested setting against keeping everything as is and turning Rocket Loader off.

I did as you told me, but it seems that Rocket Loader is bringing too many issues on my site. I’m using 2 important plugins on the front-end for loading customization, so I think I shouldn’t count too much on this option right? What you think?

It’s hard to say. Every website has a different setup, there are so many elements, it’s hard to take a decision without testing.

I’d test with and without for a day each, with hourly monitoring (GTMetrix, webpagetest.org etc), and compare.

In one of my websites, RL caused a small impact on a normal desktop profile, but a huge impact on a mobile profile under 3G.

You may also want to test different URLs, for instance, home page vs product page. In case it works for one but not for the other, you can always use a page rule to make it run only on specific paths.

Hi @floripare,

I have read a lot about the known conflict that exists between

  • WP Rocket
  • Cloudflare Rocket Loader

When I tried it on my site, Rocket Loader is bringing an incredibly higher performance but… with the downside of some display issues which I reported earlier in the post.

Do you have any idea which parameter in WP Rocket should definitely disabled for making good use of Cloudflare Rocket Loader?


Hi @user7011,

I do not have any experience with WP Rocket. I understand this is a paid plugin, so you’d be better off trying to get help from their support. But perhaps your issue is not even related to it.

Instead, it may have to do with WP Bakery (aka Visual Coposer). I see lots of CSS custom codes prefixed with vc_custom_ in your page, and they may be what’s causing that blueish tint in the background of your images.

It may take some diligence work to find out where these CSS codes are coming from, they may come from your theme or may have been added during the creation of page/post templates, who knows? If you cannot find it by yourself, you should perhaps head to wordpress.org/support/ and see if you can get help on how to solve this.

This topic was automatically closed after 30 days. New replies are no longer allowed.