> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/faq/performance/store-speed-and-pagespeed-optimization.md). # Store speed & PageSpeed optimization A fast store isn't just about aesthetics — **speed directly affects conversions, search rankings, and how customers perceive your brand**. Every second of delay increases bounce rate and reduces the chance of a completed purchase. Avante is built with performance as a core priority. But your store's speed isn't determined by the theme alone — it's the result of every app, image, video, and setting working together. This guide breaks down what matters most, what you can fix today, and when it makes sense to bring in our dev team. *** ### TL;DR — Quick performance checklist
CategoryBest practices
AppsRemove unused apps and extra tracking tags. Use built-in theme features whenever possible.
ContentKeep pages clean and focused. Fewer sections = faster loads.
VideosUse small, short MP4 files (under 3 MB). Avoid videos at the very top of your page.
ImagesCompress before uploading. Always use mobile image fields in banner sections.
RedirectsAvoid unnecessary or chained redirects. Use clean, direct URLs.
Checkout buttonsDisable dynamic checkout buttons if speed is a top priority.
FontsUse minimal fonts — system fonts are fastest.
SwatchesUse hex color codes instead of image-based swatches where possible.
HeaderKeep header simple — logo, nav links, and announcement bar only.
AnimationDisable Preload links on hover while editing; re-enable before publishing.
{% hint style="info" %} **Before you test:** Speed tools like PageSpeed Insights and GTmetrix must be run on your **live published theme** — not in preview mode. Shopify's theme preview injects an admin toolbar that adds extra scripts and artificially lowers your score. Always **test on the live URL** for accurate results. {% endhint %} *** ### Limit third-party apps Third-party apps are the single biggest performance variable in any Shopify store. Every app you install injects its own JavaScript and CSS — files that load on every page visit, regardless of whether the app is actually being used on that page. A store with 15 apps installed carries 15 sets of extra scripts before a customer sees a single product.
**Best practices:** {% hint style="success" %} **Best practices:** * Before installing any new app, ask whether Avante already has a built-in equivalent — product badges, countdown timers, store selector, quick search, and color swatches are all native to the theme. * Uninstall apps you no longer actively use. Deleting an app from your Shopify Admin doesn't always remove its code — contact the developer to confirm full removal. * When two apps serve overlapping purposes, consolidate to one. * Review your tracking tags regularly. Stale pixels and abandoned integrations accumulate silently and add load time on every page. {% endhint %} *** ### Keep content simple and relevant Page weight isn't just about file sizes — it's also about the number of elements the browser has to build. Each section, product card, and widget adds to the **DOM size**: the total count of HTML elements on the page. As this number grows, rendering slows down even on fast connections.
{% hint style="success" %} **Best practices:** * Limit your homepage to the sections that directly support your conversion goal. A focused homepage of 6–8 sections typically outperforms one with 15+. * Cap the number of products displayed in collection grids. Enable **pagination** for large collections instead of loading everything at once. * Treat your homepage as a rotating display — swap seasonal content in and out rather than adding to it indefinitely. * Social proof widgets, Instagram feeds, and review carousels from third-party apps load external resources. If you use these, consider placing them on a dedicated landing page rather than the homepage. {% endhint %} {% hint style="info" %} **Automatic CSS scoping (April 2025)** Shopify now loads CSS only for sections that are actually present on each page. Previously, every page downloaded stylesheets for every section in the entire theme — even sections that weren't used on that page. This happens automatically for all Online Store 2.0 themes including Avante. No settings to toggle, no code changes needed. **Why this matters:** CSS is render-blocking — the browser can't display anything until all stylesheets are downloaded and parsed. A product page with 5 sections now loads only the CSS for those 5 sections, instead of also loading CSS for all 12 homepage sections. This directly improves First Contentful Paint, especially on mobile. {% endhint %} *** ### Optimize videos Video is one of the most effective storytelling tools in e-commerce — and one of the heaviest. A large video file placed at the top of the page forces the browser to wait before it can paint anything meaningful, pushing your **Largest Contentful Paint (LCP)** score up significantly. {% hint style="success" %} **Best practices:** * Place video sections below the fold — let your hero image or text load first. * Use dedicated video sections from the theme rather than embedding video directly in rich text blocks (product descriptions, blog posts, pages). * Target **under 2–5 MB** for background and hero videos. Compress with [Handbrake](https://handbrake.fr/) or similar before uploading. * For autoplay loops, keep duration under 10 seconds and file size under 10 MB. {% endhint %} {% hint style="warning" icon="lightbulb" %} **Tip:** One well-placed, compressed video is worth more than three large ones scattered across the page. Restraint here pays off in measurable speed gains. {% endhint %} *** ### Optimize images Images typically account for 50–70% of a page's total weight. Compressing them before upload is the highest-return optimization most merchants never do. {% hint style="success" %} **Best practices:** * Compress every image before uploading using [TinyPNG](https://tinypng.com/) or [Squoosh](https://squoosh.app/). Aim to keep product images under 200 KB without visible quality loss. * Match the file format to the content: JPG for photos, PNG for graphics with transparency. * Always upload a separate **Mobile image** in banner and hero sections. Serving a 2400px desktop image to a phone is one of the most common and most avoidable LCP issues. * Add alt text to every image — it improves both Accessibility scores and organic search visibility. * Refer to [Shopify’s Image Optimization Guide](https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips) for additional best practices. {% endhint %} *** ### Minimize redirects Each redirect is an extra round-trip between the browser and the server. On a fast connection it's a minor inconvenience; on mobile or slow networks, redirect chains compound into seconds of visible delay. {% hint style="success" %} **Best practices:** * Audit your navigation links, banners, and email campaigns periodically — point them directly to the correct destination rather than relying on redirects. * When retiring a product or collection, repurpose the URL or merge it into an active page rather than creating a new redirect in a growing chain. * Avoid redirect loops (A → B → A) and chains longer than one hop (A → B → C). {% endhint %} *** ### Accelerated checkout buttons Dynamic checkout buttons (Shop Pay, PayPal, Apple Pay, Google Pay) are a convenience feature — but each payment provider loads its own external script, and these scripts can't be cached or deferred by the theme.
If conversion rate optimization is more important to you than a top PageSpeed score, keep them. If you're optimizing for speed above all else: {% hint style="info" %} **To disable in Avante:** Go to **Theme Editor → Default product → Buy buttons** → toggle off **Show dynamic checkout buttons**. {% endhint %}
{% hint style="success" %} Customers retain full access to all payment methods at the standard checkout step. {% endhint %} *** ### Other settings #### Header The header loads on every single page of your store. Anything you add there multiplies across your entire site. Keep it to the essentials: announcement bar, logo, and primary navigation. Each additional block — especially animated or media-heavy ones — adds to the baseline load of every page. #### Fonts Font files are loaded before the browser renders text, which means font choices directly affect how fast your store feels to load. Avante supports up to 3 fonts — but the fewer you use, the better. * The **Minimal** presets (Basic, Heavy, Uppercase) load a single font file — the most performance-friendly option. * If your heading and body settings use the same font family, Avante automatically avoids loading the file twice. * System fonts (Arial, Helvetica, sans-serif) require no download at all and render instantly. #### Swatches Color swatches defined by **hex codes** load as pure CSS — zero extra network requests. Image-based swatches require one additional HTTP request per color option. For stores with many color variants, switching to hex swatches can reduce page weight noticeably. *** ### What our dev team can optimize Some performance improvements require code-level changes that go beyond what's configurable in the Theme Editor. Staylime offers a **Speed Optimization Audit & Fix** service for merchants who want to push scores as high as technically possible on Shopify. {% hint style="success" icon="money-bills" %} Standard scope (\~8–10 hours at $80/hr) typically includes: * **Asset localization** — loading JS libraries (Swiper.js, etc.) directly from theme assets instead of external CDNs. * **Image delivery** — removing overly large srcset sizes and correcting `loading="eager"` on images that aren't above the fold. * **Render-blocking CSS** — consolidating stylesheets, stripping unused rules, and inlining critical CSS for first-screen sections to speed up First Contentful Paint (FCP). * **Layout shift (CLS) fixes** — adding explicit `width` and `height` attributes to logos, banners, and announcement bars to eliminate content jumping on load. * **Font deduplication** — preventing the same font family from being requested twice when heading and body use the same typeface. * **Accessibility (WCAG)** — adding missing `aria-label` attributes to icon buttons and correcting semantic HTML where needed. {% endhint %} {% hint style="info" %} To request a performance audit, [contact our support team](https://staylime.zendesk.com/hc/en-us/requests/new). Before reaching out, let us know: your target score or metric, whether you're open to removing heavy third-party apps if identified as the main bottleneck, and whether you're comfortable with certain sections being hardcoded if needed (which removes them from the Theme Editor). {% endhint %} *** ### Why you can't get 100/100 on PageSpeed Shopify is a hosted SaaS platform. Certain elements are controlled by Shopify's infrastructure and cannot be changed by theme developers or merchants: {% hint style="warning" %} * **Cache lifetimes** — server caching rules are set by Shopify, not the theme. * **Core scripts** — Shopify injects mandatory tracking scripts (WebPixelsManager) into every store. You can reduce their impact by removing unused Custom Pixels in **Shopify Admin → Settings → Customer events**. * **Third-party app scripts** — scripts from review widgets, chat bots, and tracking pixels load on every page and block the main thread. A theme cannot optimize code injected by an external app. {% endhint %} A score of 60–85 on a well-configured Shopify store with a few apps is normal and does not meaningfully affect real-world load times for customers. *** ### The bottom line Avante is engineered for speed — but the theme is only one part of the equation. The stores that score highest are the ones that treat performance as an ongoing practice, not a one-time fix. {% hint style="success" %} The highest-impact changes are almost always the same: * Remove apps you don't actively need. * Compress images before uploading. * Keep your homepage focused. * Use the theme's built-in features before reaching for a third-party solution. {% endhint %} Do those four things consistently, and Avante will give your customers a fast, polished experience on every visit. --- # 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, and the optional `goal` query parameter: ``` GET https://staylime.com/docs/avante-themes/faq/performance/store-speed-and-pagespeed-optimization.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.