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 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
_isScopePrivatevariables in private content blocks provide a negative impact on Magento 2 performance. Why does it happen?
A private content block with the _isScopePrivatevariable 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.
The cure for this issue is quite simple. You should replace the _isScopePrivatevariables. 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:
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:
1
data-bind="scope: 'compareProducts'"
Where compareProducts is a scope name that you should define in your layout.
Use the following code to initialize the 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: