> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/help/performance.md).

# Speed and performance

Keep your Stratum store fast as you add images, sections, videos and apps.

Stratum is built to be fast: system fonts, images that load only when needed, scripts that load only for the sections on the page, and no heavy libraries. What slows a store down over time is usually content and apps. These tips keep it quick.

## Images

Shopify serves every image in several sizes and the browser downloads only the size it needs. Upload one good, large version and let Shopify do the rest.

| Image                              | Recommended upload size                                                                                   |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------- |
| Product images                     | 2048 × 2048 px (square), or 2048 px on the long side                                                      |
| Full-width hero or background      | 2400–3000 px wide                                                                                         |
| Half-width images (image and text) | 1600 px wide                                                                                              |
| Collection images                  | 1200 px wide                                                                                              |
| Logo                               | 2–3 × the width you set in **Logo width on large screens** (for example 360 px for a 120 px logo), or SVG |
| Favicon                            | 32 × 32 px PNG                                                                                            |

**Tips**

* Save photos as **JPG** or **WebP**, graphics as **PNG** or **SVG**. Shopify converts to modern formats automatically for browsers that support them.
* Compress photos before uploading (any "export for web" option works). Files over 1–2 MB are rarely needed.
* Use the same aspect ratio for all product images of a collection; grids look tidier and nothing shifts.

### The first image on the page

The image people see first (usually the hero) decides how fast the page feels. Stratum loads images lazily (only when they come near the screen), except the ones it knows are first:

* The product page's main image, collection, blog and blog post header images, and the first slide of a slideshow load first automatically.
* For a **Content** section background image or an **Image** block at the top of a page, turn on **Load background image immediately** or **Load immediately**.

{% hint style="warning" %}
Only turn on "load immediately" for the one image at the top of the page. Using it further down makes the page slower, because those images compete with the first one.
{% endhint %}

## Fonts

The default **System UI** fonts don't download at all, so text appears instantly. A font from Shopify's library adds a download for each style used (regular, bold, italic). If you change fonts:

* Use the same font family for headings and body if you can.
* Prefer a font that includes the **Heading weight** you chose, so the browser doesn't need extra files.

## Video

* **YouTube and Vimeo** videos in Stratum show a poster image and a play button; the video player only loads when a shopper presses play. Add a **poster image** so the section looks right before that.
* **Uploaded (Shopify-hosted) videos** load their first frame only. Keep background videos short (5–15 seconds), muted and compressed (under 5–8 MB).

## Sections

* A template can hold up to 25 sections, but shoppers rarely scroll through all of them. Each section adds images and sometimes scripts. Remove what doesn't earn its place.
* Product carousels and grids: show 8–12 products rather than 24 on the home page.
* **Recently viewed**, **Product recommendations** and **Complementary products** load after the page, so they don't slow its first appearance.

## Animations and the page loader

Scroll reveals and hover effects are light and don't slow the store. The **page loader** is different: with **Show a page loader** on, your content appears a moment later, which can lower speed scores. See [Animations and motion](/store-wide-design/animations.md#page-loader).

## Apps

Apps are the most common cause of a slow store.

* Remove apps you no longer use, and check that uninstalling also removed their code. Some apps leave scripts behind; the app's support team can help.
* Prefer apps that use **app blocks** and **app embeds** (switched on in the theme editor) over apps that ask to edit theme code.
* Turn off app embeds you don't need in the editor's **App embeds** panel.

## Measuring speed

* Shopify's **Web performance** report (**Analytics › Reports**, or the link under **Online Store › Themes**) shows how fast your store loads for real visitors.
* **PageSpeed Insights** (pagespeed.web.dev) tests any page. Test a product page and a collection page, not only the home page, and look at the mobile result.
* Scores vary from run to run. Look at trends after a change rather than a single number.