Performance

Follow these tips to improve loading times and Core Web Vitals scores.

Preload Critical Assets

Preloading key images can significantly improve your Core Web Vitals:

First Contentful Paint (FCP) — Preload the store logo so it appears as soon as possible.

Largest Contentful Paint (LCP) — Preload large banners or hero images to speed up main visual rendering.

Add the preload tags in your <head> section:

<link rel="preload" as="image"
      href="{{ image_url(logoUrl, h=175, q=100) }}"
      media="(min-width: 992px)">

{% if logoUrlMobile %}
  <link rel="preload" as="image"
        href="{{ image_url(logoUrlMobile, h=175, q=100) }}"
        media="(max-width: 991px)">
{% else %}
  <link rel="preload" as="image"
        href="{{ image_url(logoUrl, h=175, q=100) }}"
        media="(max-width: 991px)">
{% endif %}

The media attribute specifies the viewport size that triggers the preloading.
In the example above, we preload a different logo for desktop and mobile, with a fallback to the desktop logo if logoUrlMobile is not defined.

Optimize Script Loading

Use async for scripts that don’t require order.

Use defer for scripts that require order but should not block rendering:

Image Optimization

Use responsive images with srcset to serve the right size based on device:

Preload Critical Assets#

Optimize Script Loading#

Image Optimization#

Preload Critical Assets

Optimize Script Loading

Image Optimization