Performance and Core Web Vitals

The theme 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 theme 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.

What the theme is built to hold

These are the budgets the theme is developed and tested against, measured on a clean install:

Installing the theme does not hand you those numbers. The budgets cover theme code only. Your images, your video, and your installed apps all move the result, and on most stores they move it more than the theme does.

Measuring your own pages

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

Treat the score as a range, not a number:

• The same page measured twice in a row commonly moves by 10 to 15 points. Run it three times and compare the middle result.
• Automated and headless tools score lower than the Lighthouse panel in Chrome, typically by 12 to 15 points, because they render without graphics acceleration. A score from a command line tool is useful for comparing two versions of your own page, not for judging the page against a target.
• A busy computer drags the score down as well. Close other applications before you measure.

What matters is the direction of travel. Measure before a change and after it, on the same page, with the same tool, and see which way it moved.

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

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

• Enable reveal animations fades sections in as they scroll into view. On by default.
• Enable scroll effects drives the parallax and pointer-linked motion. On by default.
• Enable page transitions fades between pages as a visitor moves through the store. Off by default. It does not run on the first page a visitor opens, so it does not affect the LCP of a cold visit.
• 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 and they skip themselves on low-powered devices and for visitors who have asked for reduced motion. If you are chasing the last few points, 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 the theme 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 element the report names as the largest paint. 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.
• 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.
• Field data in PageSpeed Insights (what real visitors experienced) is the number that reaches Google's ranking, and it only appears once your store has enough traffic. The lab score above it is a simulation.