Skip to main content

On-page optimizations

After implementing a data loading strategy, you can further enhance your store's performance with on-page optimizations.

This guide describes some of the most effective ways to improve page load speed.

Anchor to Render responsive imagesRender responsive images

Customers browse your store on a variety of screen sizes. High resolution images take more time to transfer and should be reserved for high resolution screens.

Use Hydrogen’s built-in Image component to automatically render the optimal image for each visitor.

// Do this
<Image data={image} sizes="(min-width: 45em) 50vw, 100vw" aspectRatio="4/5" />

// Not this
<img src={image.url}" ... />

Images rendered with the Image component default to being responsive automatically, and expect an aspectRatio prop, which ensures your image doesn't shift within a layout.

Anchor to Lazy load below-the-fold imagesLazy load below-the-fold images

Online stores traditionally feature a lot of images, which significantly contributes to how fast a page can load.

By only loading images that are actually visible to the user, lazy loading can significantly improve the performance of a website, especially on slower internet connections.

// Lazy load for off-screen images
<Image data={image} loading="lazy" />

Anchor to Optimize font loadingOptimize font loading

Stores typically have a number of fonts for their brand. Fonts are heavy and can impact performance.

  • Use a limited number of web fonts: The more fonts you use, the more HTTP requests your browser will need to make, which affects the First Contentful Paint (FCP) metric.
  • Prioritize font display: Use the font-display CSS property to control how fonts are displayed while they are loading. You can use the swap value to display a fallback font and avoid a flash of invisible text until the web font is loaded. It's important to choose appropriate fallback fonts that are similar in size and style to minimize layout shifts when the font swaps.
  • Use font preloading: Font preloading is a technique that allows you to start loading a font before it’s needed. You can use the link tag to preload fonts and other assets.

Anchor to Use pre-fetchingUse pre-fetching

Pre-fetching loads resources before they're explicitly needed. Hydrogen comes with built-in support for link pre-fetching, which can significantly enhance perceived performance when navigation between pages.

// Prefetches when the user hovers or focuses the link
<link to="/products" prefetch="intent" />View Products

// Prefetches when the link is in the viewport, useful for mobile
<link to="/products" prefetch="viewport" />View Products

// Prefetches when the link renders (use with caution, can consume large amounts of data, especially on mobile)
<link to="/products" prefetch="render" />View Products

Anchor to Use the View Transitions APIUse the View Transitions API

The View Transitions API creates fluid, app-like transitions between pages or states in your store. Check out an example.

You can leverage this API by adding the unstable_viewTransition prop to Link components.

// Uses the View Transitions API for smoother transitions
<link to="/products" unstable_viewTransition />View Products

Anchor to Preload critical assetsPreload critical assets

When a browser first loads your store, it parses the HTML and then starts downloading all of the required assets (images, fonts, JavaScript).

Preloading allows you to prioritize the loading of certain assets. By declaring assets upfront, you can make sure your most important resources are downloaded as soon as possible.

Use the links export to generate link elements which fetch assets in advance:

// Images
export function links() {
return [
{
rel: "preload",
href: "/images/hero-banner.png",
as: "image",
},
];
}

// CSS
export function links() {
return [
{
rel: "preload",
href: "/styles/hero-banner.css",
as: "style",
},
];
}

// Fonts
export function links() {
return [
{
rel: "preload",
href: "/fonts/my-font.woff2",
as: "font",
type: "font/woff2",
crossorigin: true
},
];
}

Anchor to Implement optimistic UIsImplement optimistic UIs

When a customer performs an action that requires a network request (for example, add to cart), they usually see a loading state, or no change at all, until the action resolves.

Optimistic UI is a pattern that assumes a server request will be successful and updates the UI immediately, without waiting for a response from the server. This technique can significantly improve the perceived performance of your storefront, especially for actions that typically succeed.

Hydrogen includes hooks to implement optimistic UIs. Refer to the useOptimisticCart and useOptimisticVariant utilities.

export function Cart({cart: originalCart}) {
// `useOptimisticCart` adds optimistic line items to the cart and optimistically
// calculates the total quantity until the server responds.
const cart = useOptimisticCart(originalCart);

if (!cart?.lines?.nodes?.length) return <p>Nothing in cart</p>;

return `Cart quantity: ${cart.totalQuanity}` // This value is optimistic/instant!
}
Was this page helpful?