Asynchronous CSS, Deferring JS Prevents Menu dropdown, and inserts blank spacing into Recent Posts

[capoeiravalente]

Good day,

First and foremost, you have an incredible plugin. I have used it to replace a range of optimisation plugins that I have used in the past, that I found very difficult to leave, but have realised that Litespeed LS the only way to move forward. Services such as Optimole for Images, Autoptimise for JS and CSS efficiencies, SWIFT Performance for Caching...a host of services that your plugin works incredibly well in place of.

One of the biggest advantages that I am desperate to make use of is your Critical CSS, which prompted me to register with your QUIC.cloud Service - can't wait to get my site running as optimally as it can.

I have moved my hosting over to JohnnyVPS (https://johnnyvps.com/) at his recommendation, because of his use of Litespeed Enterprise, which is enabled and fully operational on his hosting servers.

My issue is that with all the configuration and settings available, I have experienced unpredictable loading issues when it comes to CSS and JS, specifically around the Menu Dropdown (JS?), and the Elementor Recent Posts widget, which puts in an additional white space (CSS?).

The best way to explain the issues is via screen shots and video, which are as follows:

I have attached screenshot of the issue:

1. Menu_Dropdowns.jpg - highlighted issue of no menu dropdown
2. Recent_posts_Blank_Spacing.jpg - highlighted issue of blank spacing

I have recorded the issues for your attention, and have uploaded them via WeTransfer:

https://we.tl/t-uIih925YjT

1. 20200617_Litespeed_Settings.mp4 - current settings and replicating the issue
2. 20200617_Litespeed_Follow_up.mp4 - Issue persists after removing Async Javascript

Current settings that should be needed are attached in the two following PDF documents:

1. WP Server Stats - PHP Information ‹ Capoeira Valente — WordPress.pdf - Everything related to the configuration, settings etc of the server environment and PHP
2. WP Server Stats - Database Information ‹ Capoeira Valente — WordPress.pdf - All database settings and information

My environment can be made open for you to troubleshoot. I appreciate that there is a config issue I am missing, but I am unable to diagnose what it is. The videos capture the issue being replicated.

The site, just in case, is https://capoeiragp.co.za

I have bypassed the Cloudflare proxies for the time being (image attached for verification)

Please may you let me know if you need anything else - really looking forward to making the most of Litespeed!

Kind regards
Justin

 

[capoeiravalente]

An update - issue not yet resolved, but I think it is the caching that might be the issue....

I posted new content and layouts onto the Homepage, cleared all LS Caches (even though none were enabled), and the new content didn't display. Closed and opened my browser, emptied its browser cache, and nothing happened (fault with the menu and the white spacing also remained).

Deactivated LS and reactivated it, then cleared the cache (again), closed and opened browser, went to website and the problem was still there, then I pressed CTRL+F5 and new content appeared, plus dropdowns worked and white spacing disappeared.

Browsed website, and then went back to Homepage which had reverted back to old version (no longer showing the new content), with broken dropdowns and white spacing. Pressing Refresh (F5) resolves, until I leave the Homepage by browsing other site pages, and when I go back to it, it reverts back to the old version.

Definitely Caching, definitely Litespeed Plugin. Possibly affecting rendering of Asynch CSS?

 

[capoeiravalente]

Update - Resolved, but with Questions:

Issue appears to be resolved. Clearing the cache via cPanel for Litespeed Enterprise removed any conflicts, and site is now running as it should, without issue. So questions present themselves regarding this development:

1. Why doesn't "Purge All" from the Wordpress Plugin not purge the cache from LS Enterprise?
2. Do I need Browser and Public caching enabled in the Wordpress Plugin if the server is also doing it?
3. Which option is faster - do I really need the plugin at all?
4. What are the optimal settings for LS Enterprise which I can configure via cPanel?
5. What conflicts exist / should I avoid between the LS Wordpress plugin, and LS Enterprise Server?

I note with interest (concern) that my Google Page Speed performance has not changed, now that LS is enabled and there are no conflicts.

Any comments from Litespeedtech?

 

[serpent_driver]

1. Why doesn't "Purge All" from the Wordpress Plugin not purge the cache from LS Enterprise?

"Purge all" will purge the cache. If it doesn't wait some seconds. Depending on server performance it can take a little bit longer, but "Purge all" doesn't remove cache from disk. This will be done by batch process later. To check if cache has been purged check cache header only.

2. Do I need Browser and Public caching enabled in the Wordpress Plugin if the server is also doing it?

Browser cache and public caching is something complete different. You can/should enable both for best performance.

3. Which option is faster - do I really need the plugin at all?

Browser cache is not the same like HTTP Cache controlled and managed by LScache. Browser cache is mostly used for static files like css, javascript and other static files. https://developer.mozilla.org/de/docs/Web/HTTP/Headers/Cache-Control. LScache only caches dynamic content generated by PHP.

4. What are the optimal settings for LS Enterprise which I can configure via cPanel?

Normally there is no need to configure anything in cPanel.

What conflicts exist / should I avoid between the LS Wordpress plugin, and LS Enterprise Server?

There are no known conflicts between plugin and LSWS. Plugin controls and manages only how and what should be cached. It doesn't cache. Caching is the job of LSWS.

 

[capoeiravalente]

Thank you so much for your feedback, really appreciate it.

Great to know that LScache deals with PHP, while the Plugin takes care of everything else, really informative, thank you!

Going forward, when I need to clear the cache, I will Purge All, then clear the LSCache from the disk, and finally purge from Cloudflare.

Great information, thank you for your feedback!

 

[serpent_driver]

You don't need to remove the cache from disk. "Purge all" is everything what is needed.

To understand what WP cache plugin is good for, open developer console in your browser (F12) and open network tab. The first request is the main document. It is generated by PHP and only this main document will be cached like in every other HTTP cache. All other requests are mostly static sources. These static sources cannot be cached by LSWS, but you can optimize loading behaviour of these static sources with optimize settings in cache plugin.