Shopify Themes

If you have run your Fuel Themes store through PageSpeed Insights, GTmetrix, or Lighthouse and the score came back lower than you expected, this article is for you. It explains what your theme is already doing for performance, what it cannot control, and a practical checklist you can work through to improve your real-world scores.

Applies to all Fuel Themes themes. Ascension, Distinctive, Habitat, North, Pinnacle, Reformation, and Vision all share the same performance architecture — so every recommendation, checklist item, and scope boundary on this page applies regardless of which theme you are running.

---

Core Web Vitals in plain English

Google measures three things when it ranks your store for speed and stability:

Metric	What it measures	Target
LCP (Largest Contentful Paint)	How quickly the main content of the page becomes visible (usually the hero image)	≤ 2.5 seconds
INP (Interaction to Next Paint)	How quickly the page responds when you tap, click, or type	≤ 200 milliseconds
CLS (Cumulative Layout Shift)	How much content jumps around while the page is loading	≤ 0.1

Your overall PageSpeed score is a blend of these three, plus some secondary metrics. A single metric out of range can drag the whole score down — so optimisation is about finding the specific culprit, not “making the site faster” in general.

---

What your Fuel Themes theme already does

All seven of our themes — Ascension, Distinctive, Habitat, North, Pinnacle, Reformation, and Vision — ship with the following performance practices baked in. You do not need to enable or configure any of these.

For LCP (faster hero / above-the-fold rendering)

• Preloaded critical CSS and JS — the theme tells the browser to start downloading app.css, header.js, and the page’s primary script before they are even requested by the page.
• Preloaded LCP image — on product pages the main product image is preloaded; on collection pages the collection banner image is preloaded. The browser starts fetching them in parallel with the HTML.
• fetchpriority="high" on priority images so the browser knows which image matters most for the first paint.
• Responsive srcset generated for every image, so phones download phone-sized files (not desktop-sized files scaled down).
• Shopify CDN image sizing — the theme never serves full-resolution files, it asks Shopify for the exact size needed per viewport.

For INP (faster tap/click response)

• All non-critical JavaScript is deferred (defer="defer"). The browser finishes painting the page before it starts executing scripts.
• No jQuery or heavy frameworks. Our themes are built with vanilla JavaScript and a small vendor bundle. There is no React/Vue runtime on the page.
• Component-scoped scripts — the script for, say, the cart drawer only loads when the cart drawer is actually used.
• Progressive enhancement — every core storefront action (add to cart, filters, search) works even before the JavaScript has executed.

For CLS (no layout jump)

• Every image has explicit width and height attributes so the browser reserves the space before the file arrives.
• object-position respects Shopify’s focal points so images crop predictably across breakpoints.
• Fonts load with font-display: swap to avoid invisible text on first render.
• Lazy-loaded images use a low-res placeholder the same size as the final image.

General

• Minified assets — CSS, JS, and SVG assets ship minified.
• Lazy loading for all below-the-fold images, powered by lazysizes. There is a theme setting to toggle this off if it causes issues with a specific integration.
• Optional instant-page preloading — a setting called “Preload links” (Theme settings → General) that warms up the next page as soon as a visitor hovers a link. Off by default; turn it on for a measurable navigation speedup.

---

What is genuinely out of theme scope

A Shopify theme controls the HTML, CSS, and JavaScript that the theme itself ships. It has no control over the following, and they are almost always the biggest contributors to a disappointing PageSpeed score.

1. Installed apps

Every app you install typically injects one or more of:

• A blocking <script> tag in the <head>
• A third-party CSS file
• A tracking pixel or analytics beacon
• A chat widget, pop-up, or review widget iframe

A single chat app can add 300–800 ms to INP on its own. A reviews app can add 500 KB to the initial bundle. The theme cannot remove, defer, or otherwise tame these — they are added by Shopify’s app loader at runtime.

How to check: Open PageSpeed Insights → “Reduce unused JavaScript” or “Reduce the impact of third-party code”. The file names will tell you which app is responsible (e.g. cdn.judge.me/…, klaviyo.js, gorgias-chat…).

2. Image sizes you upload

The theme serves responsive sizes, but if you upload a 5000 × 5000 px, 4 MB JPG as your hero, the phone-sized version is still being derived from a 4 MB master file — and the original sits on your CDN adding cost and cache pressure.

Rule of thumb:

• Heroes and banners: 2000 px wide max, compressed to under 300 KB
• Product images: 1500–2000 px wide max, under 250 KB
• Collection thumbnails: 800 px wide max

Use a free tool like Squoosh or TinyPNG before uploading.

3. Number of sections on the homepage

Every section is extra HTML, extra CSS, and sometimes extra JS. A homepage with 15 sections will always be slower than the same theme with 6 sections, no matter how well the theme is coded.

Common offenders are large embedded Instagram feeds, full-bleed video backgrounds stacked two or three at a time, and product grids that render 40+ products above the fold.

4. Custom code you or a previous developer added

If custom CSS was pasted into the Custom CSS field, or custom JS added to theme.liquid, that code is now part of your site’s critical path. It will not have the performance guardrails the theme provides.

5. Shopify’s own platform code

A growing portion of a modern Shopify page is code Shopify injects — customer accounts, checkout, consent banners, analytics, Shop Pay. This code is loaded by Shopify, not the theme, and merchants cannot disable it.

6. The visitor’s device and network

PageSpeed Insights simulates a mid-tier mobile phone on a slow 4G connection. A score of 60 on that simulation does not mean your real customers experience the site that way. Always cross-check with the “Field data” panel (bottom of the PageSpeed report) — that reflects real visitors over the last 28 days.

---

A merchant’s checklist for a higher score

Work through these in order. Most stores see their biggest gains from the first three.

1. Audit your apps. Uninstall anything you are not actively using. For apps you do need (reviews, email, chat), check whether a lighter alternative exists. An app you installed once and forgot about is still slowing every page.
2. Resize and compress your hero and banner images. Replace anything over 500 KB with a compressed version.
3. Reduce homepage sections. Aim for 5–7 sections above the fold. Move secondary content to dedicated pages linked from the navigation.
4. Turn on “Preload links” in Theme settings → General.
5. Remove unused custom CSS/JS. If you pasted code during a trial or short-term campaign, check whether it is still needed.
6. Make sure you are on the latest theme version. Each of our themes gets multiple performance improvements per year. Check the release notes and upgrade if you are more than one major version behind.
7. Run PageSpeed Insights on a real page, not just the homepage. A product page or collection page often reveals different issues.
8. Compare to the field data, not just the lab score. If field data is green, your real users are having a good experience even if the lab score looks middling.

---

What is not going to move the needle

We get these requests often; here is the honest answer.

• “Can you split the theme JS into smaller chunks?” The theme already only loads what each page needs. Further splitting creates more HTTP requests and usually makes the score worse, not better.
• “Can you preload every product image?” No — preloading many images competes for bandwidth and slows down the one image that actually matters for LCP.
• “Can you remove jQuery?” There is no jQuery in the theme to remove.
• “Can you inline all CSS?” Shopify limits theme file sizes; inlining the full CSS would blow past that limit and would break caching, which hurts repeat-visit performance.

---

When to open a support ticket

We are happy to investigate performance issues that are genuinely in theme scope. Please open a ticket if:

• You are on the latest version of the theme.
• You have tried the checklist above.
• You can point to a specific PageSpeed finding that names a theme file (e.g. app.js, responsive-image.liquid, a section CSS file).

Include your store URL, a collaborator request code, and a screenshot of the PageSpeed report. The more specific the issue, the faster we can help.

---

When to hire a performance specialist

If the diagnosis shows the problem is concentrated in apps, third-party scripts, or custom code added on top of the theme, a dedicated Shopify speed-optimisation agency will help you more than theme support can. They can audit your app stack, rewrite custom code, and implement store-specific optimisations that are out of scope for theme support.

---

Getting help

Still have a question? Open a ticket at fuelthemes.net/contact with your store URL, CR code, and the specific PageSpeed report or metric you are trying to improve.