Litespeed + CloudFlare cache – Expired JS files

  • Resolved soupia18

    (@soupia18)


    2 years, 9 months ago

    Hey everyone!
    I am after ideas and tips to help solve the following issue.

    I am using Litespeed LSCache plugin – not with quic.cloud – on Litespeed server and also a CloudFlare pro plan.
    I am compressing and combining files on the WP site with the LSCache plugin and also have LSCache enabled (or disabled in order to troubleshoot).

    **On the CloudFlare side I have enabled the following:**
    Argo Smart Routing
    Caching Level: Standard
    Browser Cache TTL: Recently changed it to: Respect Existing Headers
    Argo Tiered Cache: Recently re-enabled
    Page Rules: Cache Level: Cache Everything for the front-end pages

    **Speed Optimisation settings**
    Image Resizing: Off
    Polish: Lossless + WebP
    Auto Minify: Everything is off.
    Brotli: On
    Automatic Platform Optimization for WordPress: On + Cache By Device Type
    Enhanced HTTP/2 Prioritization: On
    Mirage: On
    Rocket Loader: Off

    Now the issue that I am facing is that from time to time, on certain pages, their assets files remain cached on CloudFlare, therefore the visitors browsers load those files, while that have expired and are non existent on my website/server anymore – returning a 404 error.

    It seems that somehow the Litespeed Cache has purge them and generated new ones with a new URL, but CloudFlare still serves the old ones.
    This is only a problem with combined, minified JS files so far, and not with any CSS files. This causes problems in using the front of the pages, since functionality is broken.

    I have tried various different configurations but despite all my efforts, I am still experiencing similar issues. I have to go and Purge CloudFlare’s cache, in order to get a fresh copy of the pages’ content and links to their assets.

    Since the problem occurs in some pages and only after some days and I need to keep searching the pages in order to spot if this has occurred, it makes it hard to tell what effects can specific configurations have – so overall it’s hard to re-produce, to debug and diagnose and reach to a solution.

    So, I was hoping if I could get any helpful tips or other ideas, or suggestions for a proper configuration for the two technologies. I could even be confused and thinking or trying the wrong things – so I would appreciate any suggestion that would take me into the right direction.

    *I posted this exact same question at CloudFlare’s forum to get feedback from there too.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter soupia18

    (@soupia18)

    I have to add that the issue many not occur with all the browsers at the same time and maybe with all the users. So, I might experience the issue with Chrome but not with Firefox and/or a customer might be getting the issue, while I am not.

    Thread Starter soupia18

    (@soupia18)

    An example of an expired JS file that ends ups to a 404 error.
    Now this occurs on Firefox and Opera, but Chrome is loading correctly.

    wp-content/litespeed/js/61f7dc494f2fdc5dd17dd7f4e97e8265.js?ver=4627f

    And these are the headers of the file:
    cache-control private, no-cache, no-store, must-revalidate, max-age=0,no-transform

    cf-cache-status BYPASS
    cf-ray 6e19a373a9726f32-ATH
    content-length 1238
    content-type text/html
    date Tue, 22 Feb 2022 16:37:21 GMT
    expect-ct max-age=604800

    nel {“success_fraction”:0,”report_to”:”cf-nel”,”max_age”:604800}
    pragma no-cache
    referrer-policy no-referrer-when-downgrade
    report-to {“endpoints”:[{“url”:”https:\/\/a.nel.cloudflare.com\/report\/v3?s=4tilqvfvTZ13k638iKtPtSqw2IPSOtZRBbqlJxdpIgKlFbwCK2r%2FKH7M4i%2FZ9tdJCav29kE25sBrwMXMQuSxk94epkjJjpBI4%2FMBx19JJnzkNcpCNLAES4%2FMMtzt9ZrjQX82w62XczCvqvfwgcm8wK%2Bqzg%3D%3D”}],”group”:”cf-nel”,”max_age”:604800}

    server cloudflare
    strict-transport-security max-age=31536000
    vary User-Agent, Accept-Encoding
    x-content-type-options nosniff
    X-Firefox-Spdy h2
    x-turbo-charged-by LiteSpeed
    x-xss-protection 1; mode=block

    At the same time in Chrome, I am loading the correct combined js file
    /wp-content/litespeed/js/78945092b38ddd396dd11264f2ad6e93.js?ver=4627f

    Plugin Support qtwrk

    (@qtwrk)

    Did you enable page cache on CF ?

    and also please provide the report number , you can get it in toolbox -> report -> click “send to LiteSpeed”

    Thread Starter soupia18

    (@soupia18)

    Report number: ETANODNP

    In CloudFlare, I had enabled the Cache Everything (html cache) – which I disabled recently to test.
    At the same time, I used the APO service – because from my research it was the only way for CloudFlare to cache separate versions of the webpages per device, otherwise I was getting desktop layout elements on mobile devices and the opposite.

    So – after having post here and in Cloudflare – and after re-considering the whole issue – I guess what I am looking for is a proper way to cache my pages in CloudFlare’s network servers and keep it synced when there is a change in the origin – e.g. like when a combined JS file from WP LSCache plugin has regenerated.

    How, could I signal this to CloudFlare to re-cache a specific page when this happens?

    On another note, I see that a js file can be regenerated without doing anything particular on that page (not after saving it anything else).

    Plugin Support qtwrk

    (@qtwrk)

    unfortunately you can’t

    features like this won’t work with other cache layer like CF APO or cache everything

    if you want to use CF page cache , you will need to disable these options.

    Thread Starter soupia18

    (@soupia18)

    That’s sad

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Litespeed + CloudFlare cache – Expired JS files’ is closed to new replies.