Performance is one of the most crucial factors for every e-commerce website and Magento 2 is not excepted. Hence, store owners have been continuously searching for the best solution to improve the performance of their website. The better the website performs, the more conveniently customers go shopping and the more money the businessman can earn.
Today, I am glad to come up with a solution that will keep your website stay on top of the performance although it is built on even the most complex content management platform.
This new solution is called the Magento 2 Full Page Cache.
But no matter how complicated it is, don’t worry!!
Take it easy and enjoy this article I spent a lot of time researching.
1. What is the cache?
It’s a small space inside the system hardware or software used to store frequently used data or the final result of a math operation.
The system can get the stored data and display it instantly without calculating again, which results in better performance.
2. Magento 2 Full Page Cache
You might also WANT TO KNOW >>> Magento Full Page Cache extension
Firstly, we need to know how a website works.
When a user requests a website page using a browser such as Chrome or Firefox, the system will calculate and return a page of HTML code. A complete page contains a lot of HTML that comes from a lot of code blocks.
Magento 2 Full page caching stores the fully render HTML code of a page into the memory. The page now can be displayed without rendering again if requested.
Magento uses Full page caching on the server to quickly display category, product, and CMS pages. Full-page caching improves response time and reduces the loading on the server. Without caching, each page might need to run blocks of code and retrieve information from the database. However, once the full-page caching is enabled, a fully-generated page can be read directly from the cache.
In more details, Magento 2 Full Page Cache helps store owners to solve the following issues of performance:
- Reduce server response time and increase time to first-byte score which can benefit the website in Google Speed Insight.
- Reduce the number of requests to the server. Magento 2 Full Page Cache acts like a proxy that stands between clients and servers to return data without server calculation.
- Reduce server loading. A page in Magento generates using a lot of different block of code. By caching these output full-page caching reduces a lot of server resource (disk I/O, CPU usage) which stabilizes the server.
Hence, Magento 2 Full page cache is a must-have function to increase the total website performance a lot.
3. Magento 2 Full Page Cache mechanism
3.1. Server-side and Client-side: 2 methods of caching content
Server-side
Server is a place where the data store.
So how does Full-page Caching work on the server?
- When a user sends a request, the system runs blocks of code and results in a complete rendered page with HTML code.
- Full-page Caching then stores that page with a given identity (cache key) into its memory.
- The page can be read directly from the cache if a request with a matched identity happens.
There are 4 ways to handle back-end cache which will detail in the next section of the article.
Client-side
Client-side refers to the user system or devices such as a PC or laptop. Through a browser, users can access the website and perform actions on it.
Data is handled and processed on the client devices. Magento 2 provides page-cache.js written in JavaScript which can work on any client’s OS such as Windows, Linux or Mac.
It handles and processes the cache data on the client site and synchronizes with the server.
3.2. What data does the Magento 2 full page cache handle?
There are two sections of the data, public content and private content.
- Public content is static data with a long life span. They are static pages (CMS pages) such as About Us, and Contact Info. The product page and catalog page also contain public content. They mainly provide product information or web static content which stays the same across all client users.
The life span (time to live) usually lasts 84000 seconds (approximately one day). New data will be updated after the period expires.
- Private content is flexible data, but not sharable with a short life span. Different client users receive individual data.
Private content is primarily customer data, payment information or private deal, and sale.
3.3. Scope of activities
Full page caching operates on the entire site including CMS Pages, Catalog Pages, and Product Pages. These pages called Cacheable Page.
Things get complicated here since the page content is a mixture of public-content and private-content. The welcome message is one of the examples in this case.
In order to not breaking whole Magento 2 page cache, when you want to reload a part of a webpage without reloading the whole page, AJAX is the first thing that comes in mind.
In Magento 2 we have a better way to treat private data called customer-data.js.
In Magento 1, Full-page cache handles data at the server-side in which each block code implements a function to handle private data and then return a fully generated page.
In Magento 2, after the page finishes loading, customer-data.js will check whether the customer is logged in or not, then send a request to the server. After retrieving data from the server, it will determine which information needs to be updated. Let’s take a look at the example below.
By handling private data using AJAX and customer-data.js, we can ensure that the data is secured so that cacheable content can be safely cached inside the system or third-party software such as Varnish and Redis.
Uncachable page mostly contains private data such as the customer account page and checkout page. Handled data here is much simpler.
Let’s see the sample layout file at Magento_Customer::view/frontend/layout/customer_account_index.xml. Block of code having attribute cacheable set to false will make it uncacheable so that the data will get reloaded every time when the page refresh.
⇒ Caution:
Full-page caching only works if all code blocks are cacheable. In case one block having cachable = false inside the page layout file, Full-page caching won’t store the whole page.
Cache Key
A lot of web-based systems normally use URL as cache key but in Magento, URLs are not unique. To solve the problem Magento implements a method called Context Variables to generate the cache key based on:
- Customer Group
- Selected Language
- Selected Store
- Selected Currency
- Customer logged in or not
Magento then uses these variables to generate a Hash. Below is how Magento 2 add context variables:
- Customer logged in or not: Magento\Customer\Model\App\Action\ContextPlugin::beforeDispatch
- Selected store or language
Magento\Store\App\Action\Plugin\Context::beforeDispatch
- Then generated a hash:
Magento\Framework\App\Http\Context::getVaryString
Adding Context Variables helps developers tell Magento to cache additional content by the way they want.
⇒ Caution:
Each hash will generate a different key. The unique value should not be added as a context variable because it can lead to data overload. Cache HIT percentage is also important when it determines the success rate of caching content for a request. Hence, if context variables have a short life span or high frequency in change, it will reduce the cache HIT rate and slow down the site performance.
⇒ So how does Magento 2 recognized cached content?
Magento 2 uses Cache Tag as an identifier for each block of code. It renders HTML output, allows the Magento Full page cache to check and invalidates the date (private-content invalidating will be handled at the client-side).
Cache Tag is generated at the block level. For example: A CMS page will have the default tag cms_p_ the page id, so the homepage will have the tag look like this: cms_p_2 (home page id is 2).
In the block of code, each class must implement identityInterface and create a function getIdentities(). The function will return a unique identifier for the block.
The getIdentities() function can return as many tags as possible, including child block code identities. For example: if we call the function at a catalog page, it will return cat_c_2 along with several tags like cat_p_2, cat_p_3 (the child identifiers).
Identifier information should be unique and short such as page/block type and id. The identifier should not include duplicate information or frequently changed data. Otherwise, it can lead to the broken Magento 2 page cache and make the whole page not cacheable.
This intervention can help improve user experience and product performance (extension, customization) if they are handled correctly. The cache tag intervention is intended to help handle Cacheable Content processed asynchronously and can intervene individually with each Cache Tag instead of clearing the entire Cache Content.
4. Full page caching deployment strategies
As you know, caching is one of the mightest mechanisms to let your customers get what they want as fast as possible without spending priceless time waiting for pages to load.
Magento 2 supports several cache management solutions. There are 4 methods Magento 2 Full page caching uses to store data.
These methods are used to improve Magento 2 Full page caching performance. It’s not a completely replaced solution. These solutions will not work if Magento 2 full page cache is not enabled.
4.1. File system
This is an out of the box solution. Cached data is stored in magento_root/var/cache/ and magento_root/var/page_cache/ folders. This solution uses hard drives as a storage device and performance will depend on the speed of the hard drives.
Pros:
- Effortless configuration.
- Easy to use. Back-end cache management stays in the admin panel.
- Manually remove files in var/cache and var/page_cache folder without admin panel credentials.
Cons:
- Speed is capped by disk drivers’ performance. An SSD can improve performance but this solution still stays at the bottom of choice for speed.
- Create a lot of files and folders in some limited cases by some servers.
- Consume disk space.
4.2. Database
it is not a well-known solution, and also not recommended for a Magento 2 instance. This solution uses a database such as MySQL to store data. These data can be found at the cache and cache_tag table.
Pros:
- Scalablity
- In case a store is replicated on several servers to balance site load, the database can be used as common cache storage for numerous Magento nodes.
- It is also possible to flush the cache without accessing the Magento Admin Panel by truncating the cache and cache_tag tables. However, you’ll need to have the database credentials.
Cons:
- Not fully compatible with custom cache type. Default cache type works just fine.
- Store caching data with database could lead to server overload. Many records in the related tables grow fast. If there are several websites/stores in a Magento instance, it can reach millions in a few hours and cause a huge database server load. This will inevitably affect site performance.
4.3. Redis
Redis is one of the most popular caching management systems used for not only Magento 2 but all kinds of websites. It keeps data in the server memory (RAM) for the best performance.
Pros:
- RAM is much faster than disk drives, even SSD.
- RAM is optimized for fast access data. Data stored in RAM can be read and written with minimal effort from the server. Searching for specific data on RAM also becomes fast.
- Scalablity.
- Slave/Master replication configuration is available. Redis can act as a standalone server that stores mirrored data for the main server. In case the main storage stops working, the data can be read from another server to keep your business run smoothly.
Cons:
- RAM is hungry because Redis can consume a lot of RAM. Unlike disk drives, RAM just has a small capacity.
- Require a fair amount of server for operating system and developing knowledge to setup and configuration.
- Optimization can be tricky.
4.4. Varnish
This is a breakthrough innovation in caching solution for the web server. Like Redis, it also stores data on RAM but the way Varnish works and handles the data makes it the best caching solution for a website.
The thing here is it caches the web server responses. Therefore, when data is loaded from the cache, visitors’ requests do not even reach a web server and Magento pages are loaded directly from the Varnish.
Pros:
- Fast response. Since requests are handled by Varnish, it reduces web server load significantly.
- Good integration with Magento 2.
Cons:
- Not support for https request with SSL Protocol. As a workaround, an SSL terminator or proxy needs to be set up to decrypt HTTPS traffic from visitors before it reaches Varnish and encrypts the response back.
- Third-party solutions can lead to conflict.
- Require specific knowledge to configure and use. Optimization is also tricky and requires experience.
- RAM hungry.
5. Content Delivery Network
The content delivery network (CDN) is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and high performance by distributing the service spatially relative to end-users.
In Magento 2, CDN can also act as a reverse proxy. It can handle requests from the client and return the data without any request to the main server just like Varnish cache.
5.1. Fastly CDN
Fastly CDN is a 3rd party focused on developing solution groups to accelerate and optimize performance for websites. In Magento 2, Fastly is known for CDN caching solution and the Magento 2 Fastly CDN Integration module.
This module allows using Magento 2 Fastly CDN as a cache for Magento Full page cache pages of websites, css or other data to reduce bandwidth and costs. We can use Magento 2 Fastly custom VCL snippets (Varnish 2.1 compliant) to modify the response returned.
Also, we configure purge options so that cached data can be deleted.
- GeoIP support.
- Force TLS is used to force that your website only works with https.
For example: redirect http requests ⇒ the user’s website will be converted to https.
After installing the Magento 2 Fastly CDN module, the config caching application will add another value.
*Note: you can know Fastly pricing here: https://www.fastly.com/pricing
5.2. Cloudflare CDN
CHECKOUT OUT NOW >>> A full guide on How to Install Cloudflare CDN
This is one of the famous providers at CDN service.
In Magento, you are recommended to use Cloudflare CDN integration on Github. The Cloudflare integration module also provides a good system management interface built-in with the admin panel. It offers the performance and security benefits of Cloudflare such as IP management, and firewall blockers for your online store.
⇒ For more details, please take a look at Cloudflare on Magento Marketplace.
Cloudflare also offers a free package for small websites that do not require high bandwidth or performance. It can help the users get a good overall experience before they purchase a paid service with extras utility (image optimize, http2, DDos protection …).
One more thing should be in your mind: Cloudflare suites for both small up to large scale business.
5.3. Page Cache Warmer
The problem
Even Magento full page cache is properly set up, customers still experience slow load when they visit the page for the first time. The reason is the page hasn’t been cached.
The idea
How about this solution?
“We visit all the pages so that Full-page caching can save them before customers reach”.
Page Cache Warmer will automatically generate page URLs and visit them one by one so that Full-page caching will start saving the pages into its memory.
Solution provider
Two vendors provide Magento Full Page Cache Warmer extension you can install for your website: Amasty and Mirasvit.
6. How to check whether Magento 2 Full Page Cache works?
To verify Magento 2 Full Page Cache working on your Magento installation, we will have different ways to check for each caching method.
6.1. File system
For the default Magento 2 file system solution, you need to make sure that Full-page caching is enabled in the admin panel and folder permissions are correct according to Magento 2 standard installation guide.
Also, you have to check whether var/cache and var/page_cache folder are created.
Furthermore, you set Magento 2 mode to developer, and use the debugging tool of Chrome to inspect header request information. If you see X-Magento-Cache-Debug: MISS (value HIT is also accepted), it means the Magento full page cache works.
6.2. Database
With database solution, you’ll need MySQL admin credentials to check whether the cache data is stored.
6.3. Varnish
First, we need to install Varnish on the server. You can download Varnish cache from https://varnish-cache.org/releases/index.html (we recommend version 5.2.0) and compile it from source code or install via package management of server OS.
⇒ Example for Ubuntu: apt-get install varnish (it may need root permission).
For more about OS, please navigate to this link: https://varnish-cache.org/docs/trunk/installation/index.html
After installation, you can check whether Varnish is working by typing Varnishd -V in console (Linux).
Varnish can be started as a service or direct with the command:
sudo varnishd -a :80 -T localhost:6082 -f /etc/varnish/default.vcl -s malloc,256M -p workspace_backend=256k -p http_resp_size=256k -p http_resp_hdr_len=42000
In which:
- -a: 80 is the Varnish listening port.
- -T localhost:6082 is Varnish proxy server by default
- -f /etc/varnish/default.vcl is Varnish configuration file
- -s malloc,256M is the amount of RAM Varnish can use
- -p workspace_backend=256k
- -p http_resp_size=256k
- -p http_resp_hdr_len=42000 is Varnish response header size.
You can check whether Varnish is working on port 80 by typing this command:
netstat -tupln.
⇒ As a result, Varnish is listening on port 80.
Next, we’ll need to configure Magento 2 to use Varnish as a caching solution by following this Magento 2 documentation. After configuration, you can check Varnish in response header in Magento 2 page (via Varnish).
Alternatively, it is possible to check the curl PHP command to load the page data as follows:
curl -I <location> (location is the URL to the page, e.g. http://139.162.41.40/magento/)
6.4. Redis
Similar to Varnish Cache, Redis is also a 3rd-party software that needs to be configured on the previous operating system before it can be integrated into Magento 2.
To install Redis cache, use this command:
Linux: sudo apt-get install redis-server
You also can compile code from the download source at https://redis.io/download.
After installing, let’s check the operation of Redis on the server with the Redis CLI command. If responding is PONG as shown, the Redis is working.
For Magento 2 using the PHP programming language, you need to install Redis PHP extension to make Redis work with Magento.
sudo apt-get install PHP-redis.
⇒ Follow this instruction to configure Redis cache with Magento: https://devdocs.magento.com/guides/v2.2/config-guide/redis/redis-pg-cache.html
After the configuration is complete, we can see the file env.php of Magento 2 as follows.
BSS Commerce is one of the leading Magento extension providers and web development services in the world. With experienced and certified Magento developers, we commit to bring high-quality products and services to optimize our business effectively.
CONTACT NOW to let us know your problems. We are willing to support you every time.
