Improving store performance with Preact

Enabling Preact in your FastStore project can reduce the package size used in the project and improve performance. Preact is a lightweight alternative to React that improves performance by reducing the size of the JavaScript bundle. Enabling Preact decreases the overall build size in a FastStore project, resulting in faster page load times and better performance.

This is an experimental feature.

Before Preact	After Preact
${"base64":" ","img":{"width":662,"height":502,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":31989,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/before-preact___aa7837e2280b911dd89fe3df3171f298.png"}}$	${"base64":" ","img":{"width":673,"height":487,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":30663,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/after-preact___d5254919671e8304591421d3ec542610.png"}}$
The initial load times for store pages varied significantly, with some pages requiring up to 159 KB of JavaScript to load initially. This resulted in slower performance and longer wait times for users. Additionally, the shared JavaScript bundle was 94.1 KB, further contributing to the initial load size.	Preact optimized store performance by reducing the initial JavaScript load size for all pages. While some pages still required around 100–120 KB of JavaScript, this is an improvement compared to the previous 159 KB. The shared JavaScript bundle was also reduced to 58.7 KB. These optimizations led to faster load times and overall better performance for the store.

Before you begin

Make sure the @faststore/cli package from your project is updated to the latest version. To do so, follow the instructions in Updating the '@fastore/cli' package version.

Instructions

Open your FastStore project code.
Go to faststore.config.js file and add the preact flag in the experimental section:

_10experimental: { _10 nodeVersion: 18, _10 cypressVersion: 12, _10 preact: true _10}
Open the terminal and run yarn dev to start the development server with Preact enabled.
Run yarn build in your terminal to create a production-ready build and compare the size of the built store with Preact enabled. A smaller size indicates potential performance improvement.