How to optimize private content blocks in Magento 2 for better performance

Chances are, your private content blocks don’t let your store visitors enjoy a seamless shopping experience at maximum speed. In the following article, we describe the most common issue that slows down Magento 2 in terms of private content. Different _isScopePrivate variables degrade the performance of the platform. Let’s see how to optimize private content blocks in Magento 2, improving page speed. You can find more useful tips in this blog post: Magento 2 Developer’s Cookbook. 

Magento 2 private content explained

Magento 2 relies on two content types: public and private. The former type is static data with a long life span. The most evident example of public content is CMS pages. About Us, Contact Info, or even blog posts remain the same for all users. When it comes to product and catalog pages, things may be a little bit more complicated. They mainly provide public product information and static web content which stays the same across all store visitors. However, an individual touch may be added when a customer selects options for a configurable product. The life span of public content from the perspective of caching lasts about a day. After that, the system updates public information.

As you can see, private content is flexible but not sharable data with a short life span. It may be any customer data, like payment information, selected product options, private deals, checkout information, etc.

Magento 2 handles private content on the client-side (e.g., web browser) because it is specific to individual users. A grouped piece of customer information (private data) forms a section, each of which is represented by the key utilized for accessing and managing the data itself.

Magento uses AJAX requests to /customer/section/load/ to load sections. Next, it caches loaded data in local storage in a browser via the following key: mage-cache-storage. The system monitors section changes and loads updated data automatically.

This approach allows you to reload a part of a web page without reloading its entire content and breaking the whole Magento 2 page cache. However, there is a better way to treat private content. The customer-data JS library provides the ability to store private data in local storage most efficiently. Besides, you can create custom rules to invalidate private data as well as synchronize everything with the backend.

When a page is fully loaded, customer-data.js check whether the customer is logged in or not. After that, it sends a request to the server and, after retrieving the corresponding data, determines what information to update. 

Magento 2 private content block performance issue

_isScopePrivate variables in private content blocks provide a negative impact on Magento 2 performance. Why does it happen?

A private content block with the _isScopePrivate variable becomes non-cacheable. This leads to the necessity to trigger additional AJAX requests on each request to Magento.

However, you should reduce AJAX requests associated with non-cacheable elements to optimize private content blocks in Magento 2. This enhancement will free up resources necessary for more business-critical processes: customer registration, making a payment, processing an order, etc. 

Magento 2 private content block performance optimization

The cure for this issue is quite simple. You should replace the _isScopePrivate variables. The official Magento 2 documentation recommends using private content instead.  

Create a section source

Now, let’s see how to create a section source class that retrieves data for the section. There are several official recommendations to follow:

1. Put your code within the following namespace:
   
   
   Vendor/ModuleName/CustomerData

   1	Vendor/ModuleName/CustomerData

2.  Implement the following interface with your classes: SectionSourceInterface.
3. getSectionData – your public method – must return an array with information for a private block.

Check this official example: CompareProducts.php.

Also, add the following code to your di.xml – component’s dependency injection configuration:

Create a block and template

Now, let’s see how to create a block and a template to render private content, displaying user-agnostic data. Note that the UI component replaces this data with user-specific information.

As mentioned above, you should avoid using the $_isScopePrivate property in your blocks since it slows down the performance of your store.

Use Knockout syntax to add placeholders to blocks instead of private data. 

Below, you can see the init scope on the root element:

Where compareProducts is a scope name that you should define in your layout. 

Use the following code to initialize the component:

Check this example for more detail: templates/product/compare/sidebar.phtml.

Configure a UI component

Magento requires UI components to render block data on the storefront. Therefore, you should call the _super()initialization method to initialize the UI component. You can find more information here:

• layout/default.xml
• web/js/view/compare-products.js

This article is based on the following material. You can check them for further details. 

• _isScopePrivate in private content blocks slows Magento performance;
• FPC and private content;
• How to use Private Content or Sections in Magento 2?;
• The Ultimate Guide about Magento 2 Full Page Cache.