Submit a ticketBack to Frontastic.cloud

Improving application performance

Suggest Edits

When creating a top-performing site, performance optimizations are crucial. Below are some ideas and tools so you can improve the performance of your projects. While we try to implement as much as possible in the framework itself, there are some decisions only you can make.

Deferred components

You can reduce the overall build size of your JavaScript as some Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. can be deferred since they're not relevant to search engines.

To defer the loading of a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. you can use our asyncComponent helper inside the tastics.js file.

To do this, find the usual import of a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. which looks like this:

import CheckoutTastic from './checkout/tastic.jsx'

And replace with the following lines:

import asyncComponent from 'frontastic-catwalk/src/js/component/asyncComponent'
const CheckoutTastic = asyncComponent({
     import: () => {
    return import('./checkout/tastic.jsx')
     },
     height: { desktop: 690, tablet: 530, mobile: 542 }, 
})

Everything will stay the same. The height will be used to reserve some space for the Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. during asynchronous rendering to reduce the screen flickering. Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. wrapped into asyncComponent will be put into their own chunks by the default webpack configuration.

To analyze the build size and find out which Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. have the most effect on the build size you can analyze the build size yourself:

  1. In a shell, go into the project folder you want to analyze
  2. Run ant package
  3. Inspect build/bundleSize.html (HTML report) or build/bundleStats.json (webpack bundle statistics)

With this, it should be possible for you to optimize imports, libraries, and decide which Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. should be deferred.

Stream data optimizations

Data fetched from backend systems as configured in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. are crucial to Frontastic as we don't store any data ourselves but load all data from third-party systems. We already implement some optimizations ourselves:

  • Only load data sourcesdata sources - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. assigned to Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.
  • Load all <glossary:data sources>> in parallel
  • Optionally cache data sourcesdata sources - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site.
  • Limit fetched item count

Still, the data fetched has to be transmitted to the Server Side Rendering and to the Client, so it can make sense to optimize the data. This can already be done using an API decorator but we have an additional concept that knows more about the context of the data source, the StreamOptimizer.

Stream optimizer

A stream optimizer will receive the data of all data sources and some context information:

  • The current page folder and page version
  • The current context (customer, project, session, …)
  • The Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. currently using this data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site.
  • The data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. itself and its parameters

Based on this information you can programmatically decide if you want to remove data from the data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site..

It's very common, for example, that everything which refers to product lists needs a lot less data about a product than a Product Detail Page needs. While Frontastic by default also provides all product lists with all the product data, we can use a stream optimizer to limit the transmitted data. For this we must do 2 things:

  1. Create the optimizer
  2. Register the optimizer

1. Create the optimizer

The optimizer is a PHP class that will receive all data from all data sourcesdata sources - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. and can return updated data based on this. In this case, we remove a lot of information from the products in a product-list stream because those aren't necessary for any of the product lists in our project:

namespace My\StreamOptimizer;
use Frontastic\Catwalk\FrontendBundle\Domain\StreamOptimizer;
use Frontastic\Catwalk\FrontendBundle\Domain\StreamContext;
use Frontastic\Catwalk\FrontendBundle\Domain\Stream;
use Frontastic\Common\ProductApiBundle\Domain\Product;
use Frontastic\Common\ProductApiBundle\Domain\Variant;
class MinimalProduct implements StreamOptimizer
{
    /**
     * @return mixed
     */
    public function optimizeStreamData(
        Stream $stream, 
        StreamContext $streamContext, 
        $data
    ) {
        //Ignore all streams but product lists
        if ($stream->type !== 'product-list') {
            return $data;
        }
        foreach ($data->items as $index => $product) {
            $data->items[$index] = new Product([
                'productId' => $product->productId,
                'slug' => $product->slug,
                'name' => $product->name,
                'variants' => [
                    new Variant([
                        'sku' => $product->variants[0]->sku,
                        'price' => $product->variants[0]->price,
                        'images' => $product->variants[0]->images,
                        'attributes' => array_intersect_key(
                            $product->variants[0]->attributes,
                            //Product attributes we want to keep 
                            array_flip(['designer', 'badges'])
                        ),
                    ])
                ]
            ]);
        }
        return $data;
    }
}

In this stream optimizer, we create new products with a very small data subset from the existing products. While this seems irrelevant, stripping data will help a lot because it reduces time spent in encoding and decoding data and the amount of data transmitted over the network.

Based on the Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. using the current data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site., you can decide which attributes you want to keep. Take a look at the StreamContext for all this context information.

2. Register the optimizer

The next thing you need to do is register the optimizer inside the dependency injection container using the service tag frontend.streamOptimizer.

<service id="My\StreamOptimizer\MinimalProduct">
     <tag name="frontend.streamOptimizer" />
</service>

Now, all product lists will be stripped down on the server. You should see less data in the frontend and have increased performance overall.

Default implementation

Since the optimizer implemented above is a very common case, we provide you with a simple default implementation that you can use by adding the following to your dependency injection container configuration:

<service id="Frontastic\Catwalk\FrontendBundle\Domain\StreamOptimizer\MinimalProduct">
     <argument type="collection">
    <argument>designer</argument>
    <argument>badges</argument>
     </argument>

     <tag name="frontend.streamOptimizer" />
</service>

Updated 5 months ago

Did this page help you?