How to make sure your Magento 2 full page cache will be in working order for your site!
688
post-template-default,single,single-post,postid-688,single-format-standard,select-core-1.5,pitch-child-child-theme-ver-1.2,pitch-theme-ver-3.4.2,ajax_fade,page_not_loaded,smooth_scroll,grid_1300,vertical_menu_with_scroll,blog_installed,wpb-js-composer js-comp-ver-6.6.0,vc_responsive

How to make sure your Magento 2 full page cache will be in working order for your site!

We have been creating a few Magento 2 extensions and putting them through the Magento Marketplace process.  This has been a pretty enlightening process for us as we submit them various technical bots are evaluating code and trying to QA these before they make it to the human testing process at Magento.  I would also like to say it looks like the Magento quality program is moving along nicely and we can see the effects as we move our extensions through various parts of the process.

The other day my team let me know there was an issue they could not explain and was asked to help.  So it appears one module was getting kicked out with some standard page cache HIT miss errors.  Like this.

Command: vendor/bin/phpunit
Installation issue: http://magento.dev/gear.html page doesn't contain HIT in cache header.
http://magento.dev/gear/bags.html page doesn't contain HIT in cache header.
http://magento.dev/gear/fitness-equipment.html page doesn't contain HIT in cache header.
http://magento.dev/gear/watches.html page doesn't contain HIT in cache header.
http://magento.dev/home page doesn't contain HIT in cache header.
http://magento.dev/enable-cookies page doesn't contain HIT in cache header.
http://magento.dev/privacy-policy-cookie-restriction-mode page doesn't contain HIT in cache header.
http://magento.dev/about-us page doesn't contain HIT in cache header.
http://magento.dev/customer-service page doesn't contain HIT in cache header.
http://magento.dev/storelocator page doesn't contain HIT in cache header.
http://magento.dev/gear/bags/joust-duffle-bag.html page doesn't contain MISS in cache header.

After some research that led us to this blog post by Magento. (I believe this post has an error in it about Dev/Production modes so be careful, read the comments as well)

The notable part of that is that they are automating the testing of the cache hit and miss submission. A fantastic thing, as the full page cache functioning is very critical to a Magento 2 sites speed. So it turns out that as stated in one of the supporting documents.  That if in ANY BLOCK included in the page has cacheable=”false” then that will disable the cache for the entire page.  WOW.  So though I get why this is the implications are pretty huge, and thankfully Magento is testing for this. It means that in any of the layout files anywhere that get included on your pages if you mistakenly include this then the entire page won’t cache.

For example

<block class="Xumulus\Locator\Block\Link" cacheable="false" name="store-locator-link" template="Store_Locator::link.phtml">

In our case, the block was a location service block so the developer was thinking it was best to not cache this.  Well, in this case, it would have invalidated the page cache for every page on the site.  It would have bypassed varnish and simply regenerated every time.  So its a very good thing it was caught!

But since most of us don’t have this nifty little validation tool that Magento has you can do the same test manually.  Simply do this in your local or dev environment.

  1. Place store in Developer Mode
  2. Inspect the page headers in your browsers debug network tab.
  3. Look forX-Magento-Cache-Debug: MISS
  4. 
    

    Refresh the page, it should change to HIT

Rest assured this now has made it into our standard QA process of sites and extensions.  But for you developers out there, beware, as this one is a bit tricky and it’s not at all obvious that this will break the full page cache on any included page.