Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    Tags

    Testing Cloudflare – bypassing cache

    Testing Cloudflare – bypassing cache

    Cloudflare is a really amazing tool. By changing your DNS settings to point to CF servers and enabling static caching, your page will be loading much faster, using less server bandwidth and the TTFB (time-to-first-byte) will improve.

    In this article, we will find a solution for disabling CloudFlare caching directly from your browser. It’s a handy trick for testing.

    Automatic Platform Optimization for WordPress

    APO (Automatic Platform Optimization) allows Cloudflare to serve a WP site from its edge network. Edge servers store (cache) content in strategic locations in order to take the load of the origin server.

    By moving static assets like images, as well as HTML and JavaScript files as close as possible to the requesting client computer, an edge server cache is able to reduce the amount of time it takes for a web resource to load.

    Enabling an API in WordPress can be done in 3 steps: Confirm DNS Records, Change nameservers and activate the Cloudflare WordPress plugin.

    cf-cache-status

    How to know if CloufFlare is working? You can feel that website is loading faster, but to be sure that traffic is handled from CF, we can inspect page Response Headers. Browser Developer Tool / Network – filter ‘Doc’ type – and then Headers Tab.

    The parameter cf-cache-status set to HIT means that cache is working and we’re connecting directly to the CloudFlare server to get the HTML of the site.

    Dynamic elements caching

    When configuring CloudFlare cache, it is important to understand that page contents will be cached as static. All dynamic elements that previously relied on using backend rendering (without Client side javascript rendering) will stop working or will return the old state (example: data from 1 hour ago, instead of live).

    We have enabled caching in the CF panel, and we would now like to test our website. Some components are easy to test, we can see immediately that data is outdated and the component should be rewritten to use client-side rendering.  However, sometimes we’re not sure how a website should look like (without cache enabled).

    Turn off caching

    One method to disable caching is to turn it off in the Cloud Flare panel. However, we need to wait for propagation changes and this setting will impact all site visitors. In addition, our browser cache / windows DNS cache can still serve us the old (cached) website version. Not really a comfortable way of testing.

    Bypassing CF cache

    The developer tool (Developer console) in Chrome Browser provides a checkbox for disabling cache. When checked, it ignores cached website versions and getting live HTML from the origin server.

    The solution to bypass Cloudflare cache is to check “Disable cache” (Network Tab), keep DevTools open and refresh the page. When Checking Response Headers we’re seeing: cf-cache-status: BYPASS. So, we’re seeing original page contents without static cache.

    It’s a really useful trick when testing dynamic components or just testing if CF doesn’t cache too much on our website.

    disable cache at browser network tab

    That’s it for today’s guidelines. Make sure to follow us for other useful tips, and don’t forget to subscribe to our newsletter.

    Do you need someone to implement this solution for you? Check out our specialists for hire in the outsourcing section. Are you considering a global project and are uncertain how to proceed? See how we do it.

    Comments
    2 response
      • Thank you for your comment. If you’re still seeing `cf-cache-status: HIT` even after enabling the “Disable cache” option in the Chrome Developer Console, it suggests that the page is still being served from the cache.

        Here are a few things you might want to check:

        1. Developer Tools Open: Please ensure that you have the Developer Tools open when you refresh the page. The “Disable cache” option only works while the Developer Tools are open.

        2. Hard Refresh: Try performing a hard refresh (Ctrl + F5 on Windows/Linux, Command + Shift + R on Mac). This is intended to clear the cache for the specific page you’re on and fetch everything from the server again.

        3. Incognito Mode: Try opening the page in Incognito mode. Incognito mode doesn’t use the cached files from your previous browsing sessions.

        4. Clear Browser Cache: Clear your browser’s cache manually. This can usually be done in your browser’s settings.

        5. Cloudflare Development Mode: You can also try enabling Development Mode in your Cloudflare dashboard. This will temporarily bypass the cache allowing you to see changes to your site in real time. Please note that Development Mode only lasts for 3 hours or until it’s manually disabled.

        6. Page Rules: Ensure there are no Page Rules set up in your Cloudflare settings that may be causing caching to occur despite your efforts to disable it.

        I hope these suggestions help.

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    Digital marketing without third-party cookies – new rules
    • Technology
    • Trends

    Digital marketing without third-party cookies – new rules

    February 21, 2024 by createIT
    eCommerce healthcheck
    • Services
    • Trends

    eCommerce healthcheck

    January 24, 2024 by createIT
    Live Visitor Count in WooCommerce with SSE
    • Dev Tips and Tricks

    Live Visitor Count in WooCommerce with SSE

    December 12, 2023 by createIT
    Calculate shipping costs programmatically in WooCommerce
    • Dev Tips and Tricks

    Calculate shipping costs programmatically in WooCommerce

    December 11, 2023 by createIT
    Designing a cookie consent modal certified by TCF IAB
    • Dev Tips and Tricks

    Designing a cookie consent modal certified by TCF IAB

    December 7, 2023 by createIT
    Understanding the IAB’s Global Vendor List (GVL)
    • Dev Tips and Tricks

    Understanding the IAB’s Global Vendor List (GVL)

    December 6, 2023 by createIT
    Effortlessly transform JSON data into a clear schema
    • Uncategorized

    Effortlessly transform JSON data into a clear schema

    December 5, 2023 by createIT
    Anatomy of WordPress malware: a technical deep dive
    • Dev Tips and Tricks
    • Technology

    Anatomy of WordPress malware: a technical deep dive

    December 4, 2023 by createIT
    Initializing CMP with the Stub Script and cmpapi.js
    • Dev Tips and Tricks

    Initializing CMP with the Stub Script and cmpapi.js

    November 29, 2023 by createIT

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us