Store speed & PageSpeed optimization

Optimize Avante store speed: limit apps, compress images and videos, reduce redirects, and learn why a perfect 100 PageSpeed score isn't possible on Shopify.

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

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:

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.

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.

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.

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.

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.

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 or similar before uploading.
For autoplay loops, keep duration under 10 seconds and file size under 10 MB.

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.

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.

Best practices:

Compress every image before uploading using TinyPNG or Squoosh. 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 for additional best practices.

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.

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

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:

To disable in Avante:

Go to Theme Editor → Default product → Buy buttons → toggle off Show dynamic checkout buttons.

Customers retain full access to all payment methods at the standard checkout step.

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.

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.

To request a performance audit, contact our support team.

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

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:

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.

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.

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.

Do those four things consistently, and Avante will give your customers a fast, polished experience on every visit.

Last updated 25 days ago

Was this helpful?