# Preload Critical Assets

Preload fonts, hero images, and critical CSS to improve LCP.

## Hero Image with `picture` Snippet

Preload the first section's hero image by detecting position with `section.index0`:

```liquid
{%- assign preload = false -%}

{%- if section.index0 == 0 -%}
  {%- assign preload = true -%}
{%- endif -%}

{%- render 'picture',
  image: section.settings.image,
  mobile_width: 768,
  desktop_width: 1920,
  loading: preload
-%}
```

## Resource Hints

```liquid
{% comment %} Preload hero image {% endcomment %}
<link
  rel="preload"
  as="image"
  href="{{ section.settings.hero_image | image_url: width: 1200 }}"
  fetchpriority="high"
>

{% comment %} Preload critical font {% endcomment %}
<link
  rel="preload"
  as="font"
  type="font/woff2"
  href="{{ 'custom-font.woff2' | asset_url }}"
  crossorigin
>
```

Only preload 2-3 assets max — over-preloading has diminishing returns.