While Magento 1 had no standard way to declare if a block of content was dynamic or static, in Magento 2 the interaction of these two concepts has dramatically improved. In Magento 1 developers had to set a parameter in the PHP code to indicate if it should be cached or not and optionally use a time period for how long it can be cached. If no parameters were set, Magento 1 would default to not caching the block. Unfortunately, most of the blocks of content generated by Magento 1 did not have these settings enabled – resulting in slow page loading.
In Magento 2, making changes to PHP code to mark a block as cacheable or not is not required. Developers merely need to add an attribute to the XML layout file for their extension or theme which flags the block as not cacheable: cacheable=”false”. As a result, Magento 2 is supposed to be faster.
Before we begin, lets to go over the meaning of content caching and dynamic content in Magento 2. First, both of them work in opposition to each other. Content Caching is a mechanism used by Magento to speed up the generation of the web page. Dynamic Content refers to sections of an HTML page which change based on a condition at the time a page is rendered in the browser. Dynamic Content can make the generated HTML difficult or impossible to cache. When blocks of HTML are cached, generally blocks which are dynamic are skipped. When the page is actually generated, Magento can retrieve each of the cached blocks quickly so it only has to process the dynamic content blocks. When a full page is cached, the dynamic content blocks must be marked in some manner so that Magento can perform extra processing to replace these blocks with the correctly generated content.
Examples of Dynamic Content in Magento 2?
Some examples of dynamic content are customer log on status, mini carts, and mini wishlists. These items will be different based on a condition or combination of conditions. Log on status will change based on if the customer is logged on. For every customer who is not logged on it will display some information on how to log on. If the customer is logged on it will display information specific to that customer. For example, a mini cart will display a generic block of HTML if the customer does not have any items in their cart and it displays a more detailed block when there are items in their cart. A mini wishlist typically will be displayed in a sidebar and it will display different HTML based on if the customer is logged on and whether or not the customer has any items in their wishlist.
Examples of Content Caching in Magento 2?
A web page generated by Magento 2 consists of multiple blocks of a block is a snippet of HTML which will be positioned on the web page based on the layout defined for that page. The shopping cart icon at the top of every page and the wishlist for a specific customer are both examples of blocks. A block of HTML can contain other blocks of HTML. For example, the product page will display a block of HTML which contains product information. That block is made up of other blocks – a header for product information, an information block, a pricing block, and a toolbar block which contains the buttons for the product such as “add to cart” and “add to wishlist”. Magento 2 is able to cache the HTML generated for many of these blocks of HTML. It can also cache the HTML generated for the entire page. This can speed up the generation of the web page tremendously, and therefore, the page will appear on the screen sooner.
Methods Of Content Caching in Magento 2
Magento 2 does not provide only one mechanism of content caching, it provides four. These are:
1) Server Block Caching
2) Client Block Caching
3) Server Page Caching
4) Varnish Page Caching
As great as it sounds, in practice it requires mastering up to three very different caching systems in order to determine why pages do not load properly. Since it is not reasonable to use both Server Page Caching and Varnish Page Caching for a specific installation of Magento you only need to master one of them. It is not possible to disable Client Block Caching. In addition, using any caching mechanism other the Client Block Caching can create issues with Client Block Caching.
1) Server Block Caching
The simplest type of caching is server side block caching. Server side block caching will save generated HTML for a block in the server cache. The next time that block is needed for a web page instead of generating the HTML again Magento 2 can simply use the HTML generated in the past. Block caching must be enabled for each block by the extension that generates that block. This means that the extension developer must have written code to support that caching.
2) Client Block Caching
Magento 2 includes the knockout.js library. With knockout.js instead of sending HTML generated for each block – Magento 2 will send a generic snippet of HTML. After the page is loaded by the web client, the web browser will replace this generic snippet with data specific to that customer. The generic snippet of HTML uses a template format defined by knockout.js which contain the default HTML, nothing in the cart, and then a hidden section to be used as a template for carts with data in them. Knockout.js allows for intelligent data loading, where the web client will cache the data locally so a new data load is only needed when the data has changed.
Comparison:
Server Block caching can be difficult to implement for some blocks – such as the cart block which can be different for every user. The developer who writes the code for that block will need to program special intelligence in order to maintain a separate cached block for every customer. This means many blocks which are customer specific do not include any caching logic – leading to slow page generation.
Client Block caching allows for much faster page generation on the server. However, this means that the customer will see the default HTML for a block momentarily before the customer data for that block is loaded. In addition, if knockout.js fails to run or the customer data sent by the server is corrupted somehow then the customer specific HTML will not be displayed. For one Magento 2 website, we discovered this would occur for the shopping cart icon/dropdown if inventory management is enabled and the shopping cart contains an item with the desired quantity greater than the quantity available. The result being that on all pages the customer would see the default “nothing in your cart” message leading to confusion.
It should be noted that these features are not configurable. The website owner is not able to specify precisely which blocks should use client block caching. If the extension developer enabled a block for client-side caching Magento 2 can only generate HTML specific for client caching. This means that to disable it, the website owner will need to have their theme customized to generate HTML that does not use client side caching.
3) Server Page Caching
Magento 2 is also able to cache an entire page. For this to work, blocks which contain content which can be different depending on the situation must declare that they are “dynamic” in their layout definition file. Magento 2 will then replace those blocks of HTML before caching the page with an indicator that the block must be generated dynamically. Then when the page is loaded, Magento 2 will replace each indicator with blocks generated specifically for that request.
4) Varnish Page Caching
If a website is using the Varnish Reverse Web Proxy in order to speed up web page loading, Magento 2 is able to generate HTML for pages with specific instructions identifying dynamic blocks of HTML. The Varnish server will then contact the Magento 2 server in order to load those dynamic blocks – while the rest of the HTML will be stored on the caching server.
Comparison
Server page caching can provide dramatic improvements in page generation provided that the web page does not contain a large number of dynamic blocks. However, it does require the page to be generated by PHP which is much slower than HTML that can be sent directly by the web server. Varnish is a much faster system – designed specifically for the caching of HTML. Even the dynamic blocks which are contained in a website can have their HTML cached by the server in some instances. The problem with Varnish is that it must be specifically configured to be used with Magento 2 as well as having the Varnish server maintained. At one point during one of our deployments, the Varnish server crashed in an odd manner which allowed some pages to be loaded but not others. If you are going to use Varnish, make sure your provider has expertise in maintaining and troubleshooting that system.
Compared to where Magento 1 was when it was released, Magento 2 is way ahead of its game. Although complex, as everything else with Magento 2, the multiple contents caching and dynamic content options make Magento 2 a great option for the mid-size merchant.
Front End Developer
