Cache randomly breaks styling

Discussion in 'LiteSpeed Cache Plugin For WordPress' started by Mike1, Nov 4, 2017.

  1. Mike1

    Mike1 Member

    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

    broke-page.jpg

    normal-page1.jpg

    normal-page2.jpg
     
  2. lclarke

    lclarke Administrator Staff Member

    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!
     
  3. Mike1

    Mike1 Member

    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>
     
    Last edited by a moderator: Nov 9, 2017
  4. lclarke

    lclarke Administrator Staff Member

    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.
     
  5. Mike1

    Mike1 Member

    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
     
  6. lclarke

    lclarke Administrator Staff Member

    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!
     
  7. hai

    hai Active Member

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

    Mike1 Member

    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/
    broke1.jpg pageok.jpg
     
    Last edited by a moderator: Nov 9, 2017
  9. lclarke

    lclarke Administrator Staff Member

    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.
     
  10. Unique_Eric

    Unique_Eric Administrator Staff Member

    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
    1. Disable Combine CSS #LSCache>Settings>Optimize
    2. LiteSpeed Cache Purge All
    3. Check Page shows normal by refreshing the page
    4. Enable Combine CSS #LSCache>Settings>Optimize
    5. LiteSpeed Cache Purge All
    6. 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.
     
    Last edited by a moderator: Nov 9, 2017
  11. Mike1

    Mike1 Member

    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
     
  12. Mike1

    Mike1 Member

    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/
     
    Last edited by a moderator: Nov 29, 2017
  13. NiteWave

    NiteWave Administrator

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

    Mike1 Member

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

    Unique_Eric Administrator Staff Member

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

    Mike1 Member

    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
    broke-page.jpg

    and this page shows you how it should be formatted
    correctly-formatted-page.jpg
     
    Last edited by a moderator: Dec 5, 2017
  17. Ed Ellingham

    Ed Ellingham New Member

    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.
     
  18. lclarke

    lclarke Administrator Staff Member

  19. Ed Ellingham

    Ed Ellingham New Member

    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?
     
  20. lclarke

    lclarke Administrator Staff Member

    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?
     
    Ed Ellingham likes this.

Share This Page