diff --git a/docs/release-notes/2024-12-23-faststore-improvements.md b/docs/release-notes/2024-12-23-faststore-improvements.md index c68daa1919..eead6e9d0f 100644 --- a/docs/release-notes/2024-12-23-faststore-improvements.md +++ b/docs/release-notes/2024-12-23-faststore-improvements.md @@ -7,15 +7,15 @@ createdAt: "2024-12-23T00:00:00.219Z" excerpt: "Improved performance experience for FastStore stores." --- -To boost mobile performance, the FastStore team made several optimizations, which resulted in higher Lighthouse performance scoring for FastStore stores from 64 to 95 after the improvements. +FastStore has undergone significant optimizations to improve mobile performance, achieving a Lighthouse score improvement from 64 to 95. ## What has changed? -The main focus of performance improvements was to optimize the homepage on mobile devices. Below are the key changes introduced: +The main focus of these enhancements is on optimizing the homepage experience for mobile users. Below are the key changes introduced: ### Preact (experimental feature) -[Preact](https://preactjs.com/) is a lightweight alternative to React that improves performance by reducing the size of the JavaScript bundle. +[Preact](https://preactjs.com/) is a lightweight alternative to React that improves performance by reducing the JavaScript bundle size. For implementation details, see the [Improving store performance with Preact](https://developers.vtex.com/docs/guides/faststore/managing-performance-improving-store-performance-with-preact) guide. @@ -29,15 +29,15 @@ Lazy loading has been implemented for sections outside the viewport, such as Car ### Optimizing website load times -To enhance website responsiveness and speed, we implemented the following: +Several techniques have been implemented to enhance loading speeds and responsiveness: -- **Preconnect & Prefetch:** Browser directives that establish early connections to external resources (fonts, images) and prioritize their fetching, resulting in faster loading times. -- **Dynamic Imports:** Using [next/dynamic](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) to load components efficiently, reducing the impact on initial page load size. -- **On-demand Analytics:** Analytics events (triggered by the `sendAnalyticsEvent` method) are now dynamically imported from the `faststore/sdk` library, meaning that these analytics scripts are only loaded when an event is triggered, reducing the initial payload and improving load performance. +- **Preconnect and prefetch:** Browser directives that establish early connections to external resources (fonts, images) and prioritize their fetching, resulting in faster loading times. +- **Dynamic imports:** Using [next/dynamic](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) to load components efficiently, reducing the impact on initial page load size. +- **On-demand analytics:** Analytics scripts, triggered by the `sendAnalyticsEvent` method, are now dynamically imported from the `faststore/sdk` library. This ensures that these scripts are loaded only when needed, reducing the initial payload size. ## Why did we make this change? -Performance is crucial for a positive user experience. While desktop performance was strong, mobile performance needed improvement. This release aims to bridge this gap and ensure a consistent, high-performance experience across all devices. +This release brings significant improvements to mobile performance, ensuring FastStore delivers a consistently high-quality experience across all devices. Desktop performance remains robust, and mobile users will now benefit from enhanced speed and responsiveness. ## What needs to be done?