Litespeed and Cloudflare Conflicts

[dollsdelhi]

Hey
There is a weird issue that is arising with my website here.
I am using Litespeed Cache Plugin on my Wordpress website with Landio Theme & The Website is also using Cloudflare CDN(Not plugin).
Now When I am testing my website with my aggressive optimizations with LSC plugin the Pagespeed score is 99 (check ).
But here is a catch
My INP(interaction to next Paint) falls down here drastically.

Also there is one more weird situation here.
* When someone visits the website the first contentful paint loads quickly and the browser shows it loading completely. BUT it loads again and then only the text and image elements on frontend are started to load.
The FCP image is a background image loaded by CSS.
I checked the lighthouse and found that "Cloudflare rocketloader" was the first thing that is loaded and all the Litespeed cache files are loaded later to it.


Although when I disable the Litespeed plugin, this double page load issue does not show up.

What is the reason for this or is this some kind of bug?

Please help me out!!

I have also sent the report from the plugin Toolbox; here are the details

Report number: SECFEPAA
Report date: 05/30/2024 00:56:53

 

[serpent_driver]

Now When I am testing my website with my aggressive optimizations with LSC plugin the Pagespeed score is 99

There is no guarantee that every preset will work with every theme or plugin. Generally speaking, the more optimizations, the greater the risk that something will stop working. That's why you should use the recommended preset, but even then you may need to make adjustments to the settings, which unfortunately cannot be generalized.

When someone visits the website the first contentful paint loads quickly and the browser shows it loading completely. BUT it loads again and then only the text and image elements on frontend are started to load.

This is caused by the Guestmode feature, also called "Cheat Mode".
https://blog.litespeedtech.com/2021/06/01/guest-mode-for-wordpress-in-lscwp-v4-0/

I checked the lighthouse and found that "Cloudflare rocketloader" was the first thing that is loaded and all the Litespeed cache files are loaded later to it.

You should't use 3rd party plugins or functions for optimizations additional to the LiteSpeed cache plugin. This also causes conflicts!

 

[dollsdelhi]

There is no guarantee that every preset will work with every theme or plugin. Generally speaking, the more optimizations, the greater the risk that something will stop working. That's why you should use the recommended preset, but even then you may need to make adjustments to the settings, which unfortunately cannot be generalized.

Here Aggressive does not means about the default presets. Here I am telling about tested aggressive. To get the best score. But where is the INP lost in this? That remains the bigger question.
I am basically looking for the right kind of solution here. If you have Let me know!

 

[serpent_driver]

Can you please explain what you mean by "INP"?

 

[dollsdelhi]

Can you please explain what you mean by "INP"?

Interaction to Next Paint

 

[dollsdelhi]

Basically when you website in initially loaded and you start scrolling or clicking which will in-turn generate or load further content of your page, that is Interaction to next paint.
Correct me if I am wrong

 

[serpent_driver]

The INP is not about loading, but about displaying content when this content is visible in an accordion through a click event, for example. Google does think response time is important, which in my opinion is just another stupid way to drive users crazy. Regardless, the response time for the INP is influenced by several factors, so the performance of a device plays a role, but also the amount of Javascript. So if you think the INP on your site is bad, then I would contact your theme manufacturer and/or check the number of plugins you have installed, because the solution lies in using as much Javascript as necessary, but as little as possible. An optimization plugin can reduce the CSS or can minify HTML, but not the amount of Javascript. Regarding the theme used, the problem is too much HTML code, which is used too much in page builder themes in particular. But WordPress has a general problem with too much code.

 

[dollsdelhi]

So
One Wise man said "THERE IS NO PROBLEM WITHOUT A SOLUTION"

I am wandering for that SOLUTION

 

[dollsdelhi]

Obviously Wordpress is there and 50% of the web is Wordpress.
And of that at least 80% are page builder based themes on those websites.

So if the problem is arising, one must look for the right solution. Thats why I am knocking doors

 

[serpent_driver]

Question: If the cause of all problems, especially with WordPress, is too much code of everything, then what is the solution? The answer is not another plugin or a plugin that corrects the mistakes that WordPress, theme and plugin manufacturers have made poorly.

I'm sorry I can't give you the answer you want because there is no technical function for your problem. Reduce the number of plugins you have and use a theme that produces less code.