Documentation

Best practices for launchpad performance

To optimize the speed and performance of your websites, we recommend some best practices for the store launchpads.

Developing a high-performance digital commerce site requires constant monitoring and optimization. Fast-loading websites enhance user experience, increase conversion rates, and reduce bounce rates. A performance-first approach helps you stay competitive as browsers evolve, SEO guidelines change, and customer demands rise. Our store launchpads provide a solid foundation for site speed and performance; however, we have best practices to help you further optimize and maintain performance.

You are responsible for optimizing and maintaining your site, the store launchpads provide only a base to start from.

The store launchpads are designed with the following for performance optimization:

  • Server-side rendering (SSR): the first page loads are fast, even on slower networks.
  • Code splitting and lazy loading: only the code needed for a page or action is sent.
  • Edge delivery with Netlify CDN: your site is served fast, globally.
  • SEO-ready markup: metadata and page structure are rendered on the server.
  • Frontend Studio enforcement: ensures image dimensions and layout consistency, which improves cumulative layout shift (CLS).

The API Hub, our orchestration layer between your backend and frontend, is built with the following for performance:

  • Parallel queries: no waiting on sequential calls.
  • Lean payloads: fetches only what's needed.
  • Avoid over-fetching: reduces data size sent to the browser.
For more information about launchpad performance, see the Frontend Performance Deep Dive.

Measuring performance

It is imperative to measure your performance to ensure your site stays optimized. To do this, we recommend using tools such as Google Lighthouse to monitor the quality of your webpages, Chrome DevTools to analyze your site's layout shifts and JavaScript execution, and WebPageTest to run deep synthetic tests from real-world locations.

Google Lighthouse

Google Lighthouse is an open-source, automated tool that helps you improve the quality of web pages. You can run it on public web pages or pages that require authentication. We use Lighthouse to monitor and maintain page speed performance across mobile and desktop.

Lighthouse scores fluctuate due to inherent variability in web and network technologies. Factors such as server response times, network conditions, and browser extensions can impact scores. Aiming for simplicity, fewer requests, and smaller payloads can help you achieve the performance metrics you desire. The following Core Web Vitals from Google are benchmarks for frontend performance:

  • Largest Contentful Paint (LCP): how fast the main content loads.
  • Interaction to Next Paint (INP): how responsive the site feels during user interactions. This replaced the First Input Delay (FID) Core Web Vital in 2024.
  • Cumulative Layout Shift (CLS): how stable the layout is as it loads.
  • Time to First Byte (TTFB): how fast the server starts to respond.
All these metrics contribute to Google Lighthouse scores and Chrome User Experience Report (CrUX) scores, which influence user experience and SEO rankings.

Best practices

When using or amending the store launchpad codebase, remember the following performance best practices.

Optimize images

  • Use next-gen image formats, such as WebP or AVIF.
  • Serve responsive images with srcset.
  • Lazy load non-critical images.
  • Compress images without reducing quality.

Optimize code

Optimize rendering and layouts

  • Keep third-party code in check.
  • Avoid layout shifts (especially from fonts or images).
  • Reduce the number and size of requests.

Enable caching

  • Enable long-term browser caching for static assets.
  • Use service workers if offline support is needed.

Consider backend implications

  • Check for dependent API calls that block rendering.
  • Try not to fetch lists and then fetch details for each item.
  • Avoid relying on slow legacy systems.

Avoid common issues

  • Be careful when using third-party scripts — such as tag managers — that can block rendering.
  • Don't have large homepage payloads with too many components.
  • Avoid huge banners without blurred or placeholder loading.
  • Avoid unnecessary JavaScript libraries that don’t drive real business value.