Shopware 6 CMS: Optimizing Performance with Partial Loading

Shopware 6 offers a powerful CMS system called Shopping Experiences, built on a flexible structure of pages and layouts. But sometimes, you might not need the entire content of a CMS page on your storefront. This is where partial loading comes in, a feature that allows you to retrieve specific sections of a page, improving performance and efficiency.

Understanding the Structure

Imagine a CMS page as a hierarchy. At the top, you have sections, which contain blocks. These blocks hold elements, the building blocks of your content. Each element can have its own configuration options.

Here’s a simplified example of a CMS page in JSON format:

{
  cmsPage: {
      sections: [{
          blocks: [{
              slots: [{
                  slot: "content",
                  type: "product-listing",
                  /* ... */
              }]
          }, /* ... */]
      }, /* ... */]
  }
}

Why Use Partial Loading?

In my project, I needed to only display certain CMS elements when users scroll to them. To achieve this, I implemented a JavaScript function that lazy loads the content on scroll events. This helps to reduce the size of the Document Object Model (DOM), leading to improved SEO performance.

How Partial Loading Works

Shopware 6 provides different API endpoints for various partial loading scenarios:

Load CMS Page Content: This endpoint retrieves the HTML of a specific CMS page, excluding the header and footer.

GET /widgets/cms/{cmsPageId}
Content-Type: text/html
Accept: text/html

Load Navigation Page: This endpoint returns all sections of a category or listing page, perfect for displaying product listings with filters.

GET /widgets/cms/navigation/{cmsPageId}
Content-Type: text/html
Accept: text/html

Load Navigation Page Slots: Need even more granularity? Use this endpoint to target specific slots within a category page by specifying slot IDs in the query string. This allows you to load only the filter section, for example.

GET /widgets/cms/navigation/{cmsPageId}?slots={slotID_1|slotID_2}
Content-Type: text/html
Accept: text/html

Product Switch Variant CMS Element: This endpoint focuses on product elements. It returns the buy box product element associated with a provided product ID.

GET /widgets/cms/buybox/{productId}/switch
Content-Type: text/html
Accept: text/html

Benefits of Partial Loading

Improved Performance: By loading only the necessary content, you reduce the amount of data transferred, leading to faster page load times. Enhanced Flexibility: Partial loading gives you more control over the content displayed on your storefront, allowing for a more customized experience. Optimized Development: By focusing on specific content sections, developers can build more efficient and targeted functionalities.