Home Troubleshooting Performance and Core Web Vitals

Performance and Core Web Vitals

Last updated on Jun 20, 2026

Performance and Core Web Vitals

Reign is built to load fast, but the content you add decides the final score. This article explains how your choices (number of slides, autoplay video, images, and installed apps) affect page speed and Google's Core Web Vitals, and which Reign settings to check when a page feels slow. The motion controls covered here live in the Animations panel under Theme settings.

What Core Web Vitals measure

Core Web Vitals are three signals Google uses to grade how a page feels to a visitor:

  • Largest Contentful Paint (LCP): how long until the main content appears. Usually driven by your hero image or video.
  • Interaction to Next Paint (INP): how quickly the page responds when a visitor taps or clicks.
  • Cumulative Layout Shift (CLS): how much the layout jumps around while loading.

You can measure a live page with Google PageSpeed Insights or the Lighthouse tab in Chrome. Run the test on the published URL, not the theme editor preview, because the editor adds extra scripts that slow it down.

How your content affects speed

The theme code is fixed. The content you configure is what moves the score. The biggest factors:

Images

Large image files are the most common cause of a slow LCP. Before you upload:

  • Export images at the size they display, not at full camera resolution.
  • Use a compressed format. Shopify serves modern formats automatically once you upload a reasonable source file.
  • Give every section its intended image. An empty image slot can fall back to a placeholder that still costs bandwidth.

For sizing, blur, and layout shift, see Images, sizing, and layout shift.

Hero slideshow

Each slide you add is more to load. On a slideshow section:

  • Keep the slide count modest. Two to four slides is plenty for most stores.
  • The first slide loads first and counts toward LCP, so put your lightest, most important slide first.
  • Auto-rotate slides advances slides on a timer, and Rotate every sets the interval. Rotation does not slow the initial load, but a very short interval can feel busy and hurt the interaction signal.

Video

Video is the heaviest media a section can hold. On any section or block with a video:

  • Autoplay starts the video on load and forces it to play muted. An autoplay background video downloads immediately and competes with your main content for bandwidth, which can push LCP up.
  • Loop restarts the video when it ends. It has little load cost on its own.
  • Prefer a short, compressed clip. If a still image tells the same story, use the image.
  • Add a Poster image where the block offers one so visitors see something while the video loads.

Animations

Reign's motion is controlled globally in the Animations panel under Theme settings:

  • Enable reveal animations fades sections in as they scroll into view.
  • Enable scroll effects drives the parallax and scroll-linked motion.
  • Pause animations in theme editor stops motion while you work in the editor. It does not change the live storefront.

These animations are tuned to be light. If you are chasing the last few points on a slow device, turning them off is an option, but it is rarely the main cause of a poor score.

Apps

Installed apps add their own scripts to every page, and Reign has no control over that code. Apps are the most common reason a fast theme scores poorly. To check:

  • Review your installed apps and remove any you no longer use.
  • After removing an app, confirm it left no leftover code. Some apps ask you to remove a snippet manually.
  • Re-run your speed test after each removal so you can see which app cost the most.

Steps to diagnose a slow page

  1. Open the live page in a private browser window (not the theme editor).
  2. Run Google PageSpeed Insights on that URL.
  3. Read the LCP value and the "Largest Contentful Paint element" it names. That tells you which image or video to optimize first.
  4. Check the list of installed apps for scripts flagged as render-blocking.
  5. Make one change, then test again. Changing several things at once hides which one helped.

Tips

  • Test the mobile score, not only desktop. Most visitors are on phones, and Google grades mobile.
  • The theme editor preview is always slower than the live site. Judge performance from the published URL.
  • A new store with few apps and right-sized images starts in good shape. Scores usually drop over time as apps and heavy media pile up, so re-test after big changes.