Optimizing image delivery

How to optimize data

Performance is key for all sites. Not only does it improve SEO, but it increases sales and customer happiness. But companies must recognize the challenges that are involved. In this series, we’ll go through the main areas of site performance, how you can improve the performance of your site, and the trade-offs you’ll have to make when it comes to performance versus customer experience.

In this article of the series, we’ll look at optimizing your data.

Recap

In our last article, we looked at data aggregation and how Frontastic fetches all the data from all of the data sources according to the configuration in the Frontastic studio. As we know, this can easily be a lot of data, and business users might not always take care of optimizing the data when creating new landing pages, for example. So Frontastic already optimizes the data source fetching by:

  • Only loading a data source that is connected to at least one Frontastic component
  • If all connected Frontastic components have a limit configuration (for example, display only the 5 items in a product slider) limit the retrieved data source
  • Load all data sources in parallel

How to optimize your data even more

But as developers of a site have even more knowledge about the site, they can even optimize the data sources beyond what Frontastic can do out of the box. The size of the transferred data is very important, which is why Frontastic tries to keep this at the required bare minimum, and why you should too. The data is transferred, even while being compressed, to the Server Side Rendering server during the initial request and then also to the visitors’ browser. In every subsequent request, it will also be transferred to the visitors’ browser. While we use JSON to encode this data, which can be well compressed and doesn’t have too much overhead, it still helps a lot to reduce the data size. When inspecting the data flow, it’ll still seem like a lot of data because Frontastic puts all data into a single response to reduce the number of network round trips.

Stream data optimizers

Frontastic allows you to register any number of data source stream optimizers and each will work on a single data source type — there can, of course, be multiple data source optimizers for the same data source type. The data source optimizers will be called before passing the data to the visitors’ browser and also before passing the data to the Server Side Rendering, but after your decorators already processed and enhanced the data.

The data source optimizers receive a lot of context about the current page, so the developer can decide how far they can optimize the data source. A simple example would be: If the data source is only used by a product slider which only displays the name, brand, price, and a single image, then it can throw away all the other data from the product data source. This can easily reduce the data size by 80%.

The context contains information about:

  • All Frontastic components actually using this data source
  • The current page folder and page
  • The current user context  (project, customer, login state, …)
    – Optional data source parameters, like limits applied by the API hub

With this information, the developer can decide on how to modify the data source. Frontastic provides a data source optimizer for product lists out-of-the-box that lets you define an include-list of product attributes that then strips out everything except those attributes. This can be useful from time to time, but in most cases, you’ll handcraft those stream optimizers to optimize the data sources for your site:

Optimizing the stream data to the required minimum can be a great way to achieve an even better Lighthouse Score and provide the best user-perceived performance for your site.

Portrait Catherine Jones

Catherine Jones

Catherine’s the Lead Editor at Frontastic. She’s worked in many different positions at different levels but always with a customer focus and is always looking to create the best experience for users.

Related

operational efficiency as metric for headless commerce

Operational efficiency: The future metric for headless eCommerce platforms

,
This blog post explores how operational efficiency will be the future metric for headless eCommerce platforms. If you've moved to headless or are planning towards headless transition then this article will serve as the best guide for you.
Read more

Frontastic architecture: Frontastic studio

,
In our architecture blog series, we'll look at each part of the Frontastic architecture, how it works, and what you can do with it. In this post, we'll focus on the Frontastic studio.
Read more

Progressive web apps vs native apps: Pros and cons

,
Just because websites are online storefronts doesn't mean you should ignore improving your user's experience. If anything, that fact alone should encourage you to offer up-to-date website experiences. This blog post explains why brands need to experiment when developing digital experiences.
Read more

Stay in the loop

Subscribe to our newsletter to keep up-to-date on all the latest Frontastic news.