--- title: On-page optimizations description: Learn how to make Hydrogen pages as fast as possible. source_url: html: https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations md: https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations.md --- ExpandOn this page * [Render responsive images](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#render-responsive-images) * [Lazy load below-the-fold images](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#lazy-load-below-the-fold-images) * [Optimize font loading](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#optimize-font-loading) * [Use pre-fetching](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#use-pre-fetching) * [Use the View Transitions API](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#use-the-view-transitions-api) * [Preload critical assets](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#preload-critical-assets) * [Implement optimistic UIs](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#implement-optimistic-uis) # On-page optimizations After implementing a [data loading strategy](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/data-loading), 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. *** ## Render 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`](https://shopify.dev/docs/api/hydrogen-react/latest/components/image) component to automatically render the optimal image for each visitor. ```js // Do this // Not this ``` Images rendered with the [`Image`](https://shopify.dev/docs/api/hydrogen-react/latest/components/image) component default to being responsive automatically, and expect an `aspectRatio` prop, which ensures your image doesn't shift within a layout. *** ## Lazy 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. ```js // Lazy load for off-screen images ``` *** ## Optimize 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)](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint) 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](https://developer.chrome.com/docs/lighthouse/performance/font-display) 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](#preload-critical-assets). *** ## Use 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. ```js // Prefetches when the user hovers or focuses the link View Products // Prefetches when the link is in the viewport, useful for mobile View Products // Prefetches when the link renders (use with caution, can consume large amounts of data, especially on mobile) View Products ``` *** ## Use the View Transitions API The [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) creates fluid, app-like transitions between pages or states in your store. [Check out an example](https://mdn.github.io/dom-examples/view-transitions/mpa/). You can leverage this API by adding the [`unstable_viewTransition`](https://remix.run/docs/en/main/components/link#unstable_viewtransition) prop to Link components. ```js // Uses the View Transitions API for smoother transitions View Products ``` *** ## Preload 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](https://remix.run/docs/en/main/route/links) export to generate link elements which fetch assets in advance: ```js // 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 }, ]; } ``` *** ## Implement 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`](https://shopify.dev/docs/api/hydrogen/2024-04/hooks/useoptimisticcart) and [`useOptimisticVariant`](https://shopify.dev/docs/api/hydrogen/2024-07/hooks/useoptimisticvariant) utilities. ```js 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

Nothing in cart

; return `Cart quantity: ${cart.totalQuanity}` // This value is optimistic/instant! } ``` *** * [Render responsive images](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#render-responsive-images) * [Lazy load below-the-fold images](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#lazy-load-below-the-fold-images) * [Optimize font loading](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#optimize-font-loading) * [Use pre-fetching](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#use-pre-fetching) * [Use the View Transitions API](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#use-the-view-transitions-api) * [Preload critical assets](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#preload-critical-assets) * [Implement optimistic UIs](https://shopify.dev/docs/storefronts/headless/hydrogen/performance/on-page-optimizations#implement-optimistic-uis)