Cache randomly breaks styling

Mike1 · Nov 4, 2017

Hi

I have litespeed wordpress cache installed on approximately 400 websites, and one thing I have noticed is that it randomly caches broken versions of pages.

I cannot replicate this behaviour but i come across it almost every day where a clients site has some cache problem which has broken the styling.

Now if i login to the wp admin and visit the page it fixes the problem, even for those that are not logged in.

see attached screenshot of a homepage where the styling is broke and then 2 normal inner pages where the styling is correct.

any ideas on why this is happening and how to fix it... its getting to a stage where i might have to stop using litespeed cache plugin and go back to wp-rocket

lclarke · Nov 6, 2017

Hi, Mike.

Do you have any of the optimization functions enabled? (minify, combine, etc.) It could be something in the home page CSS that is not reacting well to being minified or combined.

Can you share the site's environment report (LiteSpeed Cache > Environment Report) so that we can have a look at your settings?

Thanks!

Mike1 · Nov 6, 2017

Hi Lisa

on this site no optimisation options are selected.

also, i get this happening on many websites... its not necessarily the homepage that has the error, it can happen to any page or post in the site, but as i say its completely random and i cannot reproduce it... i just come across sites that have the problem now and again.

here is the report for this site:

Code:

Server Variables
    SERVER_SOFTWARE = LiteSpeed
    DOCUMENT_ROOT = /home/hypn0therapymin2/public_html
    X-LSCACHE = on,crawler
    LSWCP_TAG_PREFIX = cd6

LSCache Plugin Options
    version = 1.5
    radio_select = 1
    purge_upgrade = true
    cache_favicon = true
    cache_resources = true
    mobileview_enabled = false
    mobileview_rules = false
    login_cookie =
    check_advancedcache = true
    debug = 0
    admin_ips = 127.0.0.1
    public_ttl = 86400
    front_page_ttl = 86400
    feed_ttl = 0
    403_ttl = 3600
    404_ttl = 3600
    500_ttl = 3600
    purge_by_post = A.F.H.M.PT.T
    excludes_uri =
    excludes_cat =
    excludes_tag =
    nocache_cookies =
    nocache_useragents =
    crawler_include_posts = true
    crawler_include_pages = true
    crawler_include_cats = true
    crawler_include_tags = true
    crawler_excludes_cpt =
    crawler_order_links = date_desc
    crawler_usleep = 500
    crawler_run_duration = 400
    crawler_run_interval = 600
    crawler_crawl_interval = 302400
    crawler_threads = 3
    crawler_load_limit = 1
    crawler_domain_ip =
    crawler_custom_sitemap =
    crawler_cron_active = false
    timed_urls =
    timed_urls_time =
    log_file_size = 30
    heartbeat = true
    debug_cookie = false
    collaps_qs = false
    log_filters = false
    log_ignore_filters = gettext
gettext_with_context
get_the_terms
get_term
    log_ignore_part_filters = i18n
locale
settings
option
    cache_priv = true
    cache_commenter = true
    cache_rest = true
    cache_page_login = true
    cache_uri_priv =
    cache_browser = false
    debug_level = false
    private_ttl = 1800
    excludes_qs =
    css_minify = false
    css_combine = false
    css_http2 = false
    css_exclude =
    js_minify = false
    js_combine = false
    js_http2 = false
    js_exclude =
    optimize_ttl = 604800
    html_minify = false
    optm_qs_rm = false
    optm_ggfonts_rm = false
    optm_css_async = false
    optm_js_defer = false
    optm_emoji_rm = false
    cdn = false
    cdn_ori =
    cdn_url =
    cdn_inc_img = false
    cdn_inc_css = false
    cdn_inc_js = false
    cdn_filetype = .aac
.css
.eot
.gif
.jpeg
.js
.jpg
.less
.mp3
.mp4
.ogg
.otf
.pdf
.png
.svg
.ttf
.woff
    cdn_exclude =
    hash = aAlgqLX1evKPi3z8xGPCVcxw9Ab5agZN
    esi_enabled = false
    esi_cached_admbar = true
    esi_cached_commform = true
    optm_excludes =
    optm_exclude_jquery = true
    cdn_remote_jquery = false
    media_img_lazy = false
    media_img_lazy_placeholder =
    media_iframe_lazy = false

Wordpress Specific Extras
    wordpress version = 4.8.3
    locale = en_US
    active theme = Child Theme
    active plugins = array (
  0 => 'gravityforms/gravityforms.php',
  1 => 'admin-menu-editor-pro/menu-editor.php',
  2 => 'black-studio-tinymce-widget/black-studio-tinymce-widget.php',
  3 => 'disable-xml-rpc/disable-xml-rpc.php',
  4 => 'easy-fancybox/easy-fancybox.php',
  5 => 'hh-dash-widget/hh-dash-widget.php',
  6 => 'hh-force-spamshield/force-spamshield.php',
  7 => 'iwp-client/init.php',
  8 => 'litespeed-cache/litespeed-cache.php',
  9 => 'ml-slider-pro/ml-slider-pro.php',
  10 => 'ml-slider/ml-slider.php',
  11 => 'seedprod-coming-soon-pro/seedprod-coming-soon-pro.php',
  12 => 'simple-social-icons/simple-social-icons.php',
  13 => 'so-clean-up-wp-seo/so-clean-up-wp-seo.php',
  14 => 'tablepress/tablepress.php',
  15 => 'tinymce-advanced/tinymce-advanced.php',
  16 => 'wordpress-seo/wp-seo.php',
  17 => 'wp-spamshield/wp-spamshield.php',
  18 => 'wysija-newsletters/index.php',
)

/home/hypn0therapymin2/public_html/.htaccess contents:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule . /index.php [L]
</IfModule>

# END WordPress
<IfModule litespeed>
###LSCACHE START PLUGIN - Do not edit the contents of this block!###
RewriteEngine on
CacheLookup Public on

###LSCACHE START RESOURCE###
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule wp-content/.*/[^/]*(loader|fonts|\.css|\.js)\.php - [E=cache-control:max-age=3600]
###LSCACHE END RESOURCE###
###LSCACHE START FAVICON###
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule favicon\.ico$ - [E=cache-control:max-age=86400]
###LSCACHE END FAVICON###
###LSCACHE END PLUGIN - Do not edit the contents of this block!###
</IfModule>

lclarke · Nov 6, 2017

Since, as you say, it seems to be a random event, that does make it tough to pinpoint.
One thing I would suggest is updating LSCWP to the latest version.
One possibility:
It could be something completely unrelated to the cache that is causing the pages to render incorrectly. One of your other plugins, perhaps? Is there any other plugin that all of the affected sites have in common?
Or maybe there is a conflict between one of your plugins and LSCWP.
The thing that I find odd is this: "Now if i login to the wp admin and visit the page it fixes the problem, even for those that are not logged in."
Simply logging in and viewing the page fixes the problem? You don't purge the page or anything?
Are you sure the badly-rendered page is being served from cache?
It is hard to troubleshoot without the ability to see the problem in action, unfortunately. Any thing you can think of that these pages have in common with each other would be helpful.

Mike1 · Nov 6, 2017

its also happening to sites with the latest plugin version.

yes simply logging into admin and viewing the page in the admin fixes the problem for a browser thats not logged in... i dont clear the cache... very strange.

ill wait till i see another website that its happening on and post it in this thread

lclarke · Nov 6, 2017

That would be great, thanks. And if it's a site that's non-critical, maybe you can leave it in the broken state for a while so we can have a look. Thanks!

hai · Nov 6, 2017

When you meet the broken pages, can you turn on dev tools and see if there is any css files loading error?

Mike1 · Nov 9, 2017

Hi

here is an example of a broken page

Code:

https://www.josimons.co.uk/reflexology-ealing/

few pages are actually like it at the moment

Code:

https://www.josimons.co.uk/fertility-hypnosis-ealing/
https://www.josimons.co.uk/hypnotherapy-phobias/

and more..

home page is OK

Code:

https://www.josimons.co.uk/

lclarke · Nov 9, 2017

Thanks for sharing the live links.
I'm afraid nothing is jumping out at me, but the development/support team may be able to see something I've missed. They'll be taking a look.

Unique_Eric · Nov 9, 2017

Hi Mike,
Does this broken

Code:

https://www.josimons.co.uk/reflexology-ealing/

page happening is because enabled Combine CSS function?
Then, it should be possible to reproduce. You or user can simply try

Disable Combine CSS #LSCache>Settings>Optimize
LiteSpeed Cache Purge All
Check Page shows normal by refreshing the page
Enable Combine CSS #LSCache>Settings>Optimize
LiteSpeed Cache Purge All
Check Page shows incorrect by refreshing the page

If it reproducible, you can send a ticket to LiteSpeed for diagnosis. It maybe some compatibility issue between LSCache and other Plugins.

Mike1 · Nov 9, 2017

OK the combine css was the problem on the site... however it never use to be like that, the combine css has been enabled for a while.. strange.
but i do still have other sites break... i will post them here when i come across the next one

Mike1 · Nov 29, 2017

Hi

here is another page where the styling has messed up due to the cache

Code:

https://www.ommagazine.com/yoga-at-home-issue-78/

NiteWave · Dec 1, 2017

can you point out where messed up ?
it looks fine when I visit it just now.

Mike1 · Dec 1, 2017

yes its displaying ok now, thats the problem everyday when the cache clears it sometimes clears itself

Unique_Eric · Dec 4, 2017

Hi Mike,
Sites looks good, generally it no need you to clear cache manually at all. Let us know when things happen again.

Mike1 · Dec 5, 2017

Hi

here is another page where the styling has broken

Code:

https://www.woodyoga.co.uk/blog/

screenshot is also included
here is a broke page

and this page shows you how it should be formatted

Ed Ellingham · Feb 8, 2018

Have you made any progress? We're experiencing a very similar issue. It was a site we took over for maintenance and the problem started the following day after installing Manage WP and we set LiteSpeed Cache to "Remove Query Strings", which I've now reverted back. The problem is we never know when it's going to happen and when it does happen our client is clearing the cache right away due to it being kind of a high-profile site.

Today I cloned the site to my server, which also runs LS and LS Cache. I'm hoping it'll happen to my clone so I can spend some time working on it, but I was happy to come across this thread since it fits very well.

lclarke · Feb 8, 2018

The fact that it doesn't seem to happen consistently makes it difficult to say offhand, but it is probably an issue with the CSS optimization options. We've recently written up a troubleshooting guide for issues like this, so if it begins to happen in your clone, you can try to pinpoint the problem with these steps:
https://www.litespeedtech.com/suppo...wiki:cache:lscwp:optimization-troubleshooting

Ed Ellingham · Feb 8, 2018

Thanks Lisa. We have all CSS optimization options disabled. It was like that from the start. The only thing that changed was Remove Query Strings, which has never caused anything like this before for me. Do you think this setting can potentially cause this? Keep in mind...I'm quite aware that you can't give a clear answer. Just...is it possible?

lclarke · Feb 8, 2018

I'm not really an expert on that aspect of things, but I can imagine, if you had a single static resource that was being called twice, but with different query strings each time, then removing the query strings would only cache one instance of that static resource, and that could potentially cause a conflict when the second instance was needed.

For example, say you have these:

Code:

file.css?option=1
file.css?option=2

With Remove Query Strings enabled,

Code:

file.css?option=1

would be cached as simply

Code:

file.css

. Then when

Code:

file.css?option=2

was needed, it would be retrieved from cache as

Code:

file.css

. This would potentially cause an issue because

Code:

file.css

was stored as the option=1 version, not the option=2 version.

That is my educated guess. Does it make sense?

Cache randomly breaks styling

Member

Administrator

Member

Administrator

Member

Administrator

Well-Known Member

Member

Administrator

Administrator

Member

Member

Administrator

Member

Administrator

Member

New Member

Administrator

New Member

Administrator