> For the complete documentation index, see [llms.txt](https://help.appplaza.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.appplaza.app/speed-optimizer/speed-up/page-loader.md).

# ⏳ Page loader

{% hint style="info" %}

### Who can use this feature?

Page loader is available on the **Pro** and **Expert** plans.
{% endhint %}

### 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.

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.appplaza.app/speed-optimizer/speed-up/page-loader.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.