Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreManaging performance
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 PreactAfter 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

  1. Open your FastStore project code.
  2. Go to discovery.config.js file and add the preact flag in the experimental section:
The faststore.config.js file is the legacy filename for discovery.config.js. If you still using the legacy name, please refer to this release note to update it.

_10
experimental: {
_10
nodeVersion: 18,
_10
cypressVersion: 12,
_10
preact: true
_10
}

  1. Open the terminal and run yarn dev to start the development server with Preact enabled.
  2. 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.
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page