⏳ Page loader

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.