2x faster PDPs by disabling JS animations

Most Shopify themes use Javascript to load images (or display them). This is convenient for devs, but bad for performance. The browser has built-in optimisations that Javascript override, and it results in delays and extra CPU cost.

This post walks through replacing JS with HTML + CSS. Exact same effect, but 2x faster. The swap takes about 10 minutes

How JS-Driven Image Fades Slow Down Your PDPs

The common pattern looks like this:

• Every image starts at opacity: 0.
• A JavaScript module listens for each image's load event.
• When the event fires, the script removes a --loading class, which triggers a CSS transition from opacity: 0 to opacity: 1.

It works. But there's a gap between "image is downloaded" and "image is visible" that doesn't need to exist:

That third step is the expensive one. The script has to have already loaded, parsed, and executed, and Shopify themes typically load these as deferred modules, so they're competing with every other script on the page for main thread time. On a slower phone, or a page with a lot of other JS running, the gap between "image ready" and "image visible" can stretch well past what the image download itself took.

This also invalidates any "preloading" you do on images. Since loading them earlier won't matter - they are blocked until JS is ready.

How To Check If Your Theme Does This

You can confirm this pattern is running on your store in a couple of minutes:

1. Open a product page and inspect a gallery image in DevTools.

2. Look at the class list. Anything like *-loading, *-fade, or an inline opacity: 0 style is the tell. Screenshot 2026-06-18 at 10.16.05

3. Open the Network tab, filter by JS, and look for a deferred script with a name like media-fade.js, image-fade.js, or similar that runs on every page load.

4. Throttle to Fast 4G, reload, and watch the image. A visible flash from invisible to visible, rather than the image just appearing as it downloads, is that script doing its job.

Where To Find Your Code

Quick walkthrough if you haven't touched your theme code before:

1. From Shopify Admin, go to Online Store → Themes. Screenshot 2026-06-18 at 10.13.43
2. Find your current theme and click the Actions menu (the three dots).
3. Click Edit code to open the built-in code editor in your browser. Screenshot 2026-06-18 at 10.13.54

Inside the editor, your CSS lives under Assets (this is where the shimmer styles in Step 1 below get added), and your Liquid templates live under Sections and Snippets (this is where the image markup in Step 2 lives).

Important! CREATE A DRAFT THEME FIRST. Don't edit your live theme directly. From the Actions menu, click Duplicate before you touch any code, then click Edit code on the duplicate instead. Make every change there, preview it, and only publish it once you've tested everything below. Editing the live theme means every save goes out to real shoppers immediately.

Step-by-Step: Swap JS Fade-In For CSS Shimmer

1. Add the shimmer CSS

Drop this into your theme's base stylesheet:

:root {
  --skeleton-shimmer-color-1: #f0f0f0;
  --skeleton-shimmer-color-2: #e4e4e4;
  --skeleton-shimmer-speed: 1.4s;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

[data-shimmer] {
  background: linear-gradient(
    90deg,
    var(--skeleton-shimmer-color-1) 25%,
    var(--skeleton-shimmer-color-2) 37%,
    var(--skeleton-shimmer-color-1) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer var(--skeleton-shimmer-speed) ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-shimmer] {
    animation: none;
    background: var(--skeleton-shimmer-color-1);
  }
}

The prefers-reduced-motion block matters. Shoppers who've turned off animations at the OS level should get a static placeholder, not a spinning gradient.

2. Add data-shimmer to the image wrapper, not the image

<div
  class="product-media"
  style="--ratio: {{ media.aspect_ratio }}"
  {% if loading == 'lazy' %}data-shimmer{% endif %}
>
  <img
    src="{{ media.preview_image | image_url: width: 1600 }}"
    loading="{{ loading }}"
    decoding="async"
    alt="{{ media.alt | escape }}"
  >
</div>

The attribute goes on the wrapper div, never the img tag. The shimmer needs to sit underneath the image, not on it.

Important! If you skip step 3 below, the shimmer stays visible behind a transparent or partially-loaded image even after it's finished loading. The wrapper has to clip its contents and the image has to fully cover it.

3. Make the wrapper clip, and the image cover it fully

.product-media {
  position: relative;
  overflow: hidden;
}

.product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4. Delete the JS

Remove the script tag:

<script src="{{ 'media-fade.js' | asset_url }}" type="module" fetchpriority="low"></script>

Then strip every loading class from your image markup, anything like media-fade-img, media-fade-img--loading. Once nothing in your CSS references those classes, delete the JS file from your assets folder and remove it from your import map.

5. Skip the shimmer on above-the-fold images

Images already visible when the page loads don't need a loading animation, they should just load eagerly:

.product-grid__item--0 [data-shimmer],
.product-grid__item--1 [data-shimmer],
.product-grid__item--2 [data-shimmer],
.product-grid__item--3 [data-shimmer] {
  animation: none;
  background: none;
}

This step is optional, but skipping it means shoppers see a shimmer flash on images that load practically instantly anyway.

Testing and Verification

1. Throttle to Fast 4G in DevTools and reload a product page. The shimmer should already be visible before the image request starts, not after.
2. Confirm the image appears the instant it finishes downloading, no flash, no delayed opacity transition.
3. Open the Sources or Network tab and confirm the old fade script is gone entirely, not just unused.
4. Open the Rendering tab, force-emulate prefers-reduced-motion: reduce, and confirm the shimmer becomes a static color instead of animating.
5. Open the Performance panel and record a trace while the page loads. The Main thread track should be clear of the long task that used to belong to the fade script.

Common Issues

• Shimmer still visible after the image loads. The wrapper is missing overflow: hidden, or the image isn't covering the full wrapper. Check object-fit and confirm both width and height are set to 100%.
• Shimmer never disappears on a broken image. That's expected. A broken image has nothing to paint over the shimmer, so the gap stays visible, which is more honest than a JS version that silently removes the loading class regardless of whether the image actually succeeded.
• New images from a slider or quick-view don't get the shimmer. If you're using a JS-driven carousel that re-renders slides, make sure data-shimmer gets applied at render time in the slider's own template, not only in the initial server-rendered HTML.

Real results from launch

This store relaunched a few weeks ago with a long list of speed work behind it, and CVR lifted +20% off the back of it. That number is from the launch as a whole, not from this one change.

This shimmer swap shipped afterward, and even though the site was already optimised, it resulted in a 2x speed increase for PDP. We are expecting another CVR boost from this alone.

Most stores have several of these small "JS doing something CSS already does" swaps sitting in their theme. None of them alone will fix a 12-second load time, but they add up, and they're cheap to find once you know what to look for. If you want a full breakdown of what's slowing your store down, book a site speed audit.