# Performance Optimisation Reference
> Expert guidance for optimising Shopify store performance including theme speed, asset optimisation, and Core Web Vitals.
- Skill: `tools-only/performance-optimisation-reference` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/performance-optimisation-reference`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/performance-optimisation-reference/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-29
- Page: https://skillmd.com/skills/tools-only/performance-optimisation-reference
---
# Performance Optimisation Reference
Expert guidance for optimising Shopify store performance including theme speed, asset optimisation, and Core Web Vitals.
## Core Capabilities
### 1. Image Optimisation
Images are typically the largest assets - optimise aggressively.
**Use Shopify CDN Image Sizing:**
```liquid
{# ❌ Don't load full-size images #}
{# ✅ Use img_url filter with appropriate size #}
```
**Responsive Images:**
```liquid
```
**Modern Image Formats:**
```liquid
{# WebP for modern browsers #}
{# Fallback to JPEG #}
```
**Lazy Loading:**
```liquid
{# Native lazy loading #}
{# Eager load above-the-fold images #}
{% if forloop.index <= 3 %}
{% else %}
{% endif %}
```
**Preload Critical Images:**
```liquid
{# In for hero images #}
```
### 2. JavaScript Optimisation
Reduce JS payload and execution time.
**Defer Non-Critical JavaScript:**
```html
{# ❌ Blocking JavaScript #}
{# ✅ Deferred JavaScript #}
{# ✅ Async for independent scripts #}
```
**Inline Critical JavaScript:**
```liquid
{# Inline small, critical scripts #}
```
**Code Splitting:**
```javascript
// Load features only when needed
async function loadCart() {
const { Cart } = await import('./cart.js');
return new Cart();
}
// Load on interaction
document.querySelector('.cart-icon').addEventListener('click', async () => {
const cart = await loadCart();
cart.open();
}, { once: true });
```
**Remove Unused JavaScript:**
```javascript
// ❌ Don't load libraries you don't use
// Example: Don't include entire jQuery if you only need a few functions
// ✅ Use native alternatives
// Instead of: $('.selector').hide()
// Use: document.querySelector('.selector').style.display = 'none';
// Instead of: $.ajax()
// Use: fetch()
```
**Minify JavaScript:**
```bash
# Use build tools to minify
npm install terser --save-dev
# Minify
terser theme.js -o theme.min.js -c -m
```
### 3. CSS Optimisation
Optimise stylesheets for faster rendering.
**Critical CSS:**
```liquid
{# Inline critical above-the-fold CSS in #}
{# Load full CSS deferred #}
```
**Remove Unused CSS:**
```bash
# Use PurgeCSS to remove unused styles
npm install @fullhuman/postcss-purgecss --save-dev
# Configure in postcss.config.js
module.exports = {
plugins: [
require('@fullhuman/postcss-purgecss')({
content: ['./**/*.liquid'],
defaultExtractor: content => content.match(/[\w-/:]+(? tags instead */
```
```liquid
```
### 4. Font Optimisation
Optimise web fonts for faster text rendering.
**Font Loading:**
```liquid
{# Preload fonts #}
{# Font face with font-display #}
```
**System Font Stack:**
```css
/* Use system fonts for instant rendering */
body {
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
}
```
**Subset Fonts:**
```css
/* Load only required characters */
@font-face {
font-family: 'CustomFont';
src: url('font-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}
```
### 5. Liquid Template Optimisation
Optimise Liquid rendering for faster server response.
**Cache Expensive Operations:**
```liquid
{# ❌ Repeated calculations #}
{% for i in (1..10) %}
{{ collection.products.size }} {# Calculated 10 times #}
{% endfor %}
{# ✅ Cache result #}
{% assign product_count = collection.products.size %}
{% for i in (1..10) %}
{{ product_count }}
{% endfor %}
```
**Use limit and offset:**
```liquid
{# ❌ Iterate full array and break #}
{% for product in collection.products %}
{% if forloop.index > 5 %}{% break %}{% endif %}
{{ product.title }}
{% endfor %}
{# ✅ Use limit #}
{% for product in collection.products limit: 5 %}
{{ product.title }}
{% endfor %}
```
**Avoid Nested Loops:**
```liquid
{# ❌ O(n²) complexity #}
{% for product in collection.products %}
{% for variant in product.variants %}
{# Expensive nested loop #}
{% endfor %}
{% endfor %}
{# ✅ Flatten or preprocess #}
{% assign all_variants = collection.products | map: 'variants' | flatten %}
{% for variant in all_variants limit: 50 %}
{{ variant.title }}
{% endfor %}
```
**Prefer render over include:**
```liquid
{# ❌ include (slower, shared scope) #}
{% include 'product-card' %}
{# ✅ render (faster, isolated scope) #}
{% render 'product-card', product: product %}
```
**Use section-specific stylesheets:**
```liquid
{# Scope CSS to section for better caching #}
{% stylesheet %}
.my-section { /* ... */ }
{% endstylesheet %}
{# Scope JavaScript to section #}
{% javascript %}
class MySection { /* ... */ }
{% endjavascript %}
```
### 6. Third-Party Script Optimisation
Minimise impact of external scripts.
**Defer Third-Party Scripts:**
```liquid
{# ❌ Blocking third-party script #}
{# ✅ Async or defer #}
{# ✅ Load on user interaction #}
```
**Use Facade Pattern:**
```html
{# Show placeholder instead of embedding heavy iframe #}
```
### 7. Caching Strategies
Leverage browser and CDN caching.
**Asset Versioning:**
```liquid
{# Shopify auto-versions assets #}
{# Outputs: /cdn/.../theme.css?v=12345678 #}
```
**Long Cache Headers:**
```liquid
{# Shopify CDN sets appropriate cache headers #}
{# CSS/JS: 1 year #}
{# Images: 1 year #}
```
**Service Worker (Advanced):**
```javascript
// sw.js - Cache static assets
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/cdn/.../theme.css',
'/cdn/.../theme.js',
'/cdn/.../logo.png',
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
```
### 8. Core Web Vitals Optimisation
Improve Google's Core Web Vitals metrics.
**Largest Contentful Paint (LCP):**
```liquid
{# Optimise largest element load time #}
{# 1. Preload hero image #}
{# 2. Use priority hint #}
{# 3. Optimise server response time (use Shopify CDN) #}
{# 4. Remove render-blocking resources #}
```
**Interaction to Next Paint (INP):**
```javascript
// 1. Reduce JavaScript execution time
// 2. Break up long tasks
function processItems(items) {
// ❌ Long task
items.forEach(item => processItem(item));
// ✅ Break into smaller chunks
async function processInChunks() {
for (let i = 0; i < items.length; i++) {
processItem(items[i]);
// Yield to main thread every 50 items
if (i % 50 === 0) {
await new Promise(resolve => setTimeout(resolve, 0));
}
}
}
processInChunks();
}
// 3. Use requestIdleCallback
requestIdleCallback(() => {
// Non-critical work
});
```
**Cumulative Layout Shift (CLS):**
```liquid
{# 1. Always set width and height on images #}
{# 2. Reserve space for dynamic content #}
{# Content loads here #}
{# 3. Use aspect-ratio for responsive images #}
```
### 9. Performance Monitoring
Track performance metrics.
**Measure Core Web Vitals:**
```javascript
// Load web-vitals library
import { getCLS, getINP, getLCP } from 'web-vitals';
function sendToAnalytics({ name, value, id }) {
// Send to analytics
gtag('event', name, {
event_category: 'Web Vitals',
event_label: id,
value: Math.round(name === 'CLS' ? value * 1000 : value),
});
}
getCLS(sendToAnalytics);
getINP(sendToAnalytics);
getLCP(sendToAnalytics);
```
**Performance Observer:**
```javascript
// Monitor long tasks
const observer = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
console.warn('Long task detected:', entry.duration, 'ms');
}
});
observer.observe({ entryTypes: ['longtask'] });
```
## Performance Checklist
**Images:**
- [ ] Use `img_url` filter with appropriate sizes
- [ ] Implement responsive images with `srcset`
- [ ] Add `loading="lazy"` to below-fold images
- [ ] Set explicit `width` and `height` attributes
- [ ] Preload critical hero images
- [ ] Use modern formats (WebP)
**JavaScript:**
- [ ] Defer or async all non-critical scripts
- [ ] Minify and bundle JavaScript
- [ ] Code-split large bundles
- [ ] Remove unused code
- [ ] Lazy load features on interaction
**CSS:**
- [ ] Inline critical CSS
- [ ] Defer non-critical CSS
- [ ] Remove unused styles
- [ ] Minify stylesheets
- [ ] Avoid `@import`
**Fonts:**
- [ ] Preload critical fonts
- [ ] Use `font-display: swap`
- [ ] Consider system font stack
- [ ] Subset fonts when possible
**Third-Party:**
- [ ] Audit all third-party scripts
- [ ] Load scripts async or on interaction
- [ ] Use facade pattern for heavy embeds
- [ ] Monitor third-party impact
**Liquid:**
- [ ] Cache expensive calculations
- [ ] Use `limit` instead of manual breaks
- [ ] Prefer `render` over `include`
- [ ] Avoid nested loops
**Core Web Vitals:**
- [ ] LCP < 2.5s
- [ ] INP < 200ms
- [ ] CLS < 0.1
## Best Practices
1. **Test on real devices** - Mobile 3G performance matters
2. **Use Lighthouse** for performance audits
3. **Monitor Core Web Vitals** in production
4. **Optimise above-the-fold** content first
5. **Lazy load everything else** below the fold
6. **Minimise main thread work** for better interactivity
7. **Use Shopify CDN** for all assets
8. **Version assets** for effective caching
9. **Compress images** before uploading
10. **Regular performance audits** to catch regressions