Shopify Non-Composited Animations: Fix the PageSpeed Warning (2026)

Quick Fix with Thunder

What Non-Composited Animations Mean

Browsers render a page in stages: style, layout, paint, and composite. The composite stage is the cheap one. When an animation can be handled there, the browser can move an already-painted layer around without recalculating the whole page. That is why transform and opacity are the safe animation properties.

Non-composited animations force earlier rendering stages. Animating height on an accordion changes layout. Animating left on a drawer moves the box and can trigger layout. Animating box-shadow or filter can repaint a large area every frame. On a fast laptop you may not notice; on a mid-range mobile phone, the animation stutters.

Chrome's Lighthouse documentation explains the warning directly: non-composited animations require more work and can look janky on low-end phones or when the main thread is busy. Shopify stores are especially exposed because app scripts and theme animations often run at the same time.

Common Shopify Sources of the Warning

Step 1: Find the Exact Element

Run PageSpeed Insights and open the "Avoid non-composited animations" diagnostic. Lighthouse usually lists the selector, affected element, or animation name. Copy that selector and search your theme files. Start in base.css, theme.css, section CSS files, and any app or page-builder CSS added to the theme.

Then confirm with Chrome DevTools. Open the Performance panel, record while opening the menu or drawer, and look for purple layout blocks and green paint blocks during the animation. In the Rendering panel, enable paint flashing. If the whole header or product grid flashes on every frame, the animation is repainting instead of compositing.

If the same page also has app-script warnings, use the third-party scripts guide and main-thread work guide. A good animation still stutters if five app bundles are executing at the same moment.

Step 2: Replace top/left Drawer Animations with transform

Mobile menus and cart drawers are the most common Shopify offenders. Many older themes slide drawers by animating left or right. Rewrite that to translate the drawer instead. The visual result is the same, but the browser can put the drawer on its own layer and composite the movement.

/* Before: layout-heavy */
.cart-drawer {
  right: -420px;
  transition: right 280ms ease;
}

.cart-drawer.is-open {
  right: 0;
}

/* After: compositor-friendly */
.cart-drawer {
  transform: translateX(100%);
  transition: transform 280ms ease;
  will-change: transform;
}

.cart-drawer.is-open {
  transform: translateX(0);
}

Use will-change sparingly. It can help the browser prepare a layer for important UI like drawers, but adding it to dozens of product cards wastes memory. Reserve it for interactions that are likely to happen and that cover a meaningful part of the viewport.

Step 3: Replace height Accordions with Grid or transform Patterns

Product detail accordions often animate from height: 0 to height: auto. That forces layout because every frame changes how much space the content occupies. If the accordion is below the fold, this is not always a crisis, but on product pages with many sections it can affect interaction smoothness.

/* Better than height:auto transitions */
.accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 220ms ease, opacity 180ms ease;
}

.accordion__inner {
  overflow: hidden;
}

.accordion.is-open .accordion__content {
  grid-template-rows: 1fr;
  opacity: 1;
}

This pattern still affects layout because the section opens and takes space, but it avoids JavaScript measuring and repeated inline height writes. For critical above-the-fold accordions, consider a simpler instant open or a transform-based reveal inside a fixed-height container.

Step 4: Fix Product Card Hover Effects

Product cards are multiplied across collection pages, so even a small paint-heavy hover effect can become expensive. Avoid animating shadow blur, image filter, margin, or card height. Use a tiny translate and opacity change instead.

/* Before: expensive paint on many cards */
.product-card:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
  margin-top: -6px;
}

.product-card:hover img {
  filter: brightness(.92);
}

/* After: cheap movement and overlay opacity */
.product-card {
  transition: transform 180ms ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card__overlay {
  opacity: 0;
  transition: opacity 180ms ease;
}

.product-card:hover .product-card__overlay {
  opacity: 1;
}

Pair this with the Shopify collection page speed guide. Collection pages already have more DOM, more images, and more product-card JavaScript than most pages. Cheap animation choices matter more there.

Step 5: Remove Scroll-Reveal Effects from Critical Sections

Scroll reveal libraries look polished in demos but often hurt real stores. They attach observers to many elements, add opacity and transform classes during scroll, and sometimes animate large wrappers. Keep them off the first viewport and disable them on dense product grids, long homepages, and app-heavy templates.

If you keep reveal effects, make them simple and respect reduced motion. This is especially important for accessibility and for shoppers on lower-powered devices.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

For broader page-load cleanup, read the excessive DOM size guide and unused CSS and JavaScript guide. Animation problems often hide inside page-builder wrappers and old app code.

Manual Fix vs Thunder Fix

How to Prioritize Animation Fixes

Do not rewrite every animation blindly. Start with elements that appear above the fold, run during page load, or respond to taps: sticky headers, mobile menus, cart drawers, search overlays, hero sliders, and quick-add buttons. These affect perceived speed and interaction quality more than a footer fade-in.

Next, look at repeated components. One animated product card is minor. Forty animated product cards on a collection page can become a measurable performance problem. That is also where image sizing and payload work matter, so check the properly size images guide and enormous network payloads guide.

Finally, compare lab and field data. PageSpeed diagnostics are useful, but your real targets are LCP, INP, and CLS. The Core Web Vitals guide for Shopify explains how to read those metrics, and the complete Shopify speed optimization guide gives the full priority order.

Related PageSpeed Warnings to Check Next

Animation warnings rarely appear alone. If the browser is already repainting on every frame, it may also show high Total Blocking Time, main-thread work, or heavy third-party code. Fixing the animation property helps, but the page will only feel fast when the surrounding scripts stop blocking interactions.

After this pass, run another audit and check efficient cache policy, critical request chains, and Shopify JavaScript optimization. For automated script cleanup, see Thunder's features or Thunder pricing.

FAQ