Magento is a popular ecommerce platform, but it can be slow to load, especially for stores with large databases of products. In their release of Magento 2, Magento has looked to improve performance by creating a system that can be easily integrated with Varnish Cache, a powerful HTTP accelerator and reverse proxy. As more ecommerce shops move to Magento, we’re hearing more questions about how exactly Magento 2 and Varnish Cache work together and how to troubleshoot common Magento-Varnish Cache issues.
Varnish Cache and Magento Setup
Varnish Cache is a type of reverse proxy, which means it sits in front of the Magento database and intercepts requests going back to Magento. Any requests that can be served from Varnish Cache’s caching server will be served to the user from Varnish Cache rather than going back to Magento or your origin server. If your website uses a load balancer, Varnish Cache will sit behind that. The below illustrates the difference between Magento 1 and Magento 2 with Varnish Cache.
Magento 2 Full Page Cache
One common mistake when using Magento 2 is believing that Magento 2’s built in “Full Page Cache” feature is sufficient for performance. The Full Page Cache mode is labelled by Magento as to be used in development mode, as developers are not able to see what is being cached and what is not being cached with this setting. In production, it is strongly recommended all Magento 2 stores use Varnish Cache for optimal performance.
Magento and AJAX
Magento 2 loads content in a way that is very different from Magento 1.x and from many other platforms. This is because Magento 2 heavily relies on AJAX calls for personalization and add to cart functions. AJAX stands for Asynchronous JavaScript And XML and allows webpages or parts of webpages to be updated or customized without being completely reloaded. This means personalization elements such as a user’s account and cart information are loaded after the page has initially loaded via AJAX.
For caching, having AJAX calls for personalization instead of having these elements coded into the HTML document means that much more can be cached, including the full HTML document. As we have mentioned before, caching the HTML document (also called “dynamic content”) vastly improves the speed of websites as the HTML document is the first element of a webpage that is requested and loaded. By caching HTML, the origin server does not have to generate this piece of information for every visitor, which also dramatically reduces server load.
While using AJAX is an excellent feature for performance, since many Magento developers are not used to inserting personalization in this way it can cause problems. When building features and extensions for Magento 2, developers and extension developers must be aware that account information, personalized recommendations, cart size, and more must be inserted by AJAX and not in the HTML.
Installing and Troubleshooting Varnish Cache with Magento 2
Below is a basic guide to installing Varnish Cache for Magento 2 and common issues that arise in deployment.
Step 1: Install Varnish Cache:
First, install Varnish Cache with the default VCL (Varnish Cache Language) for Magento 2. This default VCL is set to cache both static objects and the HTML document out of the box. Check out the Magento docs for this first step.
Step 2: Verify:
Check that Varnish Cache is caching HTML correctly. There are many reasons Varnish Cache may not be caching HTML even if you think it is. Rather than checking just what the browser receives, you need to confirm Magento 2 is sending the correct Cache-Control response headers for HTML documents (such as the homepage) to Varnish Cache. Follow the Magento 2 guidelines to confirm appropriate cache control responses.
Step 3: TroubleShoot Varnish Cache:###
There are several common issues that may arise when first installing Varnish Cache and Magento 2. They are generally found in these areas:
- Codebase: Check your Magento 2 codebase for layout xml configuration issues. If any block is marked: cacheable="false” then Magento 2 will not send appropriate cache-control responses.
- If for example the footer layout block is marked like the above, then no pages will be cached in Varnish Cache
- To review this scan your codebase for any blocks with cacheable="false” attribute s
- Headers: Check Apache / nginx isn’t overwriting cache-control response headers (for text/html documents)
- Check all Apache configuration files (*.conf, .htaccess etc)
- Look inside Apache files for the text “Expires” to find and review all usage of mod expires
- Look inside Apache files for text “Header” to find and review all usage of mod header
- Check all nginx configuration for settings that overwrite response headers
- Magento Cache: Verify the Magento Cache
- Log in to your Magento server, or switch to, the Magento file system owner.
- Enter the following command: rm -rf
/var/page_cache/* - Access one or more cacheable Magento pages.
- Check the var/page_cache/ directory – if it’s empty, the cache is working.
Step 4: Add functionality:
We recommend adding additional functionality to the default VCL including normalizing query strings and overriding cache control response headers. Details on our VCL recommendations can be found here.
For more information on Magento 2 and Varnish Cache, read this community post about how it works in Section. Section has a Magento 2 extension for Varnish Cache that gets you set up on our global delivery network and pulls in the default Magento 2 VCL all within the extension. You can download the extension or contact us with any questions.
