How to check Page is loaded from the cache in Magento 2

Hello friends, In this blog, we are going to check page is loaded from the cache in Magento 2.

In Magento 2, you can check if a page is loaded from the cache by inspecting the HTTP headers. When a page is loaded from the cache, the “X-Magento-Cache-Debug” header will indicate whether the page is a cache hit or a cache miss. Here’s how you can check it:

Open the page you want to check in your web browser.
Right-click on the page and select “Inspect” or “Inspect Element” to open the browser’s developer tools.
Go to the “Network” tab in the developer tools.
Refresh the page by pressing the F5 key or using the browser’s refresh button.
Look for the request corresponding to the page you’re inspecting in the list of network requests. It usually has the same URL as the page you’re on.
Click on the request to view its details in the panel below given in the screenshot.
In the request headers section, look for the “X-Magento-Cache-Debug” header.
If the “X-Magento-Cache-Debug” header has the value “HIT,” it means the page was loaded from the cache. If the value is “MISS,” it means the page was not found in the cache and was generated dynamically.

Note that the presence of the “X-Magento-Cache-Debug” header may depend on your Magento 2 configuration and the cache system you are using. Make sure that the Full Page Cache (FPC) is enabled and configured correctly in your Magento 2 installation for this header to be available.

How to Configure Full Page Cache in Magento 2?

1. Go to Stores > Configuration > Advanced > System > Full Page Cache.
2.  Select the Caching Application: Built-in Application or Varnish Caching.
3. Set the TTL for public content to define the timeout for the page cache. It is set to 86400 by default which is approximately 24 hours. After the time expires, page data is updated.

How to verify using code?

To check if a page is loaded from the cache in Magento 2, you can use the following code in your custom Magento module or theme:

Create a block file named CacheCheck.php in app/code/Vendor/Module/Block

<?php
namespace Vendor\Module\Block;

class CacheCheck extends \Magento\Framework\View\Element\Template
{
    protected $cacheState;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Framework\App\Cache\StateInterface $cacheState,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->cacheState = $cacheState;
    }

    public function isLoadedFromCache()
    {
        return $this->cacheState->isEnabled('full_page');
    }
}

Create a template file for the block class (e.g., cache_check.phtml) in app/code/Vendor/Module/view/frontend/templates

<?php if ($block->isLoadedFromCache()): ?>
    <p><b>This page is loaded from cache.</b></p>
<?php else: ?>
    <p><b>This page is not loaded from cache.</b></p>
<?php endif; ?>

Add the block to your layout file (e.g., default.xml) in app/code/Vendor/Module/view/frontend/layout

<referenceContainer name="content">
    <block class="Vendor\Module\Block\CacheCheck" name="cache.check" template="Vendor_Module::cache_check.phtml" />
</referenceContainer>

Once you have completed these steps, the block will be added to the content area of your page, and it will display a message indicating whether the page is loaded from the cache or not.

Note: This approach assumes you are using the built-in Magento Full Page Cache. If you are using a custom cache implementation or a different cache type, you may need to adjust the code accordingly.

You can check if caching is working or not by simply running this curl command

curl -I -v –location-trusted '<magento-website-url>'
OR
curl -I '<magento-website-url>'

This will return headers as given below screenshots.

Hope this will help you in managing caching in your Magento 2 projects.

You can get more magento2 (Adobe Commerce) articles here.

Thanks 🙂