⏳ Page loader

Cover your page with a clean loading screen until it's fully ready — so customers never see content jumping around as it loads.

Who can use this feature?

Page loader is available on the Pro and Expert plans.

What is Page loader?

You know that annoying moment when a page is loading and everything jumps — the image pops in, pushes the text down, then a banner appears and shoves it down again? That's called layout shift, and Google scores you down for it.

Page loader hides the messy load behind a simple loader (a spinner or your logo). Once everything's ready, the page reveals all at once — clean, stable, no jumping.

This directly improves your CLS score (Cumulative Layout Shift), one of Google's Core Web Vitals.

Why use Page loader?

• Eliminates visible layout shift — content reveals all at once instead of jumping as it loads.

• Improves your CLS score — directly targets one of Google's Core Web Vitals.

• Looks polished — a clean spinner or your logo replaces a messy, jumpy load.

• Matches your brand — choose presets, sizes, or your store's favicon.

⚙️ How to use Page loader

Step 1: Open Self-optimize

Go to Speed up → Self-optimize.

[Screenshot: Speed up page with Self-optimize tab open]

Step 2: Turn on Page loader

Turn on Page loader. The settings panel opens with a live preview on the right.

[Screenshot: Page loader settings panel expanded with live preview]

Step 3: Pick a loading style

• Loading circle — a spinning indicator. Choose a preset (Minimalist, Bright, or Dark) to match your store, and a size (Small, Medium, or Large).

• Loading logo — shows your store's favicon instead of a spinner.

[Screenshot: loading style options with circle and logo, plus preset and size pickers]

📝 Note: If you pick Loading logo but haven't set a favicon in Shopify yet, you'll see "No favicon found." Upload one in your Shopify theme settings first.

Step 4: Check both views

Use the mobile / desktop toggle in the preview to check both views look good.

[Screenshot: preview pane with mobile/desktop toggle]

Step 5: Apply to your theme

Click Speed up now and pick a theme to apply changes.

[Screenshot: Speed up now button and theme selection modal]

📌 Merchant Notes

• Page loader is the key feature for CLS. Pair it with Lazy load images, Critical CSS, and Preconnect for a full speed boost.

• Always click Speed up now after turning this on to apply the changes.

• Using Loading logo? Make sure you've set a favicon in your Shopify theme settings first.

• This feature requires the Pro or Expert plan.

• For an overview of all optimization features, see Speed up.

Contact us in live chat if you have any problems.