Website Speed Optimisation: Technical Fixes That Work 2026

Website speed optimisation has evolved from a nice-to-have into a critical business requirement. In 2026, slow websites don’t just frustrate users—they actively damage your search rankings, conversion rates, and revenue. Google’s Core Web Vitals now directly influence rankings. Users expect pages to load in under two seconds. Yet most speed optimisation advice remains frustratingly superficial. “Optimise your images” and “use caching” only scratch the surface of what’s actually required.

The reality is that meaningful website speed optimisation requires technical intervention. It demands understanding how browsers render pages, how servers respond to requests, and how code execution impacts performance. A 0.1-second improvement in mobile load time can boost conversion rates by over 8%. Conversely, a several-second delay dramatically increases bounce rates. These aren’t marginal differences—they represent significant revenue impact.

At Rococo Digital, we’ve optimised hundreds of websites across WordPress, Shopify, and custom builds. We’ve seen which fixes deliver measurable improvements and which create negligible impact. This guide shares the technical interventions that actually move the needle. Not generic advice you’ve read elsewhere, but specific, implementable fixes based on real-world development experience.

Whether you’re a developer seeking advanced techniques, a marketing director wanting to understand technical requirements, or a business owner frustrated by slow site performance, this comprehensive guide provides actionable solutions. We’ll cover Core Web Vitals optimisation, server-side improvements, front-end performance techniques, and platform-specific strategies for WordPress and Shopify.

Table of Contents

Understanding Website Performance Metrics

Before optimising, you must understand what you’re measuring and why it matters.

Key Performance Metrics

Multiple metrics contribute to overall performance assessment:

Time to First Byte (TTFB) Measures server response time:

Time from request to first byte received
Indicates server and backend efficiency
Target: Under 200 milliseconds
Affected by hosting, database, server-side code

First Contentful Paint (FCP) When first content appears:

Time until any content renders
User perceives page is loading
Target: Under 1.8 seconds
Affected by render-blocking resources

Largest Contentful Paint (LCP) When main content loads:

Core Web Vital metric
Measures perceived load speed
Target: Under 2.5 seconds
Affected by images, fonts, render-blocking resources

First Input Delay (FID) Responsiveness to interaction:

Core Web Vital metric
Time from first interaction to response
Target: Under 100 milliseconds
Affected by JavaScript execution

Cumulative Layout Shift (CLS) Visual stability measurement:

Core Web Vital metric
Quantifies unexpected layout shifts
Target: Under 0.1
Affected by images without dimensions, dynamic content

Total Blocking Time (TBT) Main thread blocking duration:

Sum of blocking time between FCP and TTI
Lab metric correlating with FID
Affected by long JavaScript tasks

Why These Metrics Matter

Performance impacts multiple business outcomes:

Search Rankings Google uses Core Web Vitals as ranking signals:

Pages passing all three CWV metrics rank better
Mobile performance particularly important
Competitive advantage in close ranking situations
Part of broader page experience signals

User Experience Speed directly affects user satisfaction:

53% of mobile users abandon sites taking over 3 seconds
Each second of delay increases bounce rate
Fast sites feel more trustworthy
Speed affects brand perception

Conversion Rates Performance directly impacts revenue:

0.1-second improvement can boost conversions 8%+
Slow checkout abandonment increases dramatically
Mobile conversions particularly affected
Returning visitors expect consistent speed

According to Google’s research, sites meeting Core Web Vitals thresholds see significantly better user engagement metrics.

Measuring Your Current Performance

Establish baselines before optimising:

Google PageSpeed Insights

Tests both mobile and desktop
Provides Core Web Vitals data
Offers specific recommendations
Uses real-world and lab data

Google Search Console

Core Web Vitals report
Shows site-wide performance
Identifies problematic URL groups
Tracks improvements over time

GTmetrix

Detailed waterfall analysis
Historical tracking
Multiple test locations
Video playback of loading

WebPageTest

Advanced testing options
Multiple browsers and locations
Filmstrip view
Connection throttling options

Chrome DevTools

Real-time performance analysis
Network waterfall
Coverage analysis
Lighthouse audits

For businesses seeking professional web development, performance optimisation should be foundational to every project.

Core Web Vitals Deep Dive

Core Web Vitals require specific technical interventions.

Largest Contentful Paint (LCP) Optimisation

LCP measures when the largest content element becomes visible.

Common LCP Elements:

Hero images
Header background images
Large text blocks
Video poster images
SVG elements

Technical Fixes for LCP:

1. Preload Critical Resources Tell browsers to fetch important resources early:

html

<link rel="preload" href="/hero-image.webp" as="image" type="image/webp">
<link rel="preload" href="/critical-font.woff2" as="font" type="font/woff2" crossorigin>

2. Optimise Server Response Time Reduce TTFB to improve LCP:

Upgrade hosting infrastructure
Implement server-side caching
Optimise database queries
Use a CDN for static assets

3. Remove Render-Blocking Resources Prevent CSS and JavaScript from blocking rendering:

html

<!-- Defer non-critical JavaScript -->
<script src="script.js" defer></script>

<!-- Async for independent scripts -->
<script src="analytics.js" async></script>

<!-- Preload critical CSS, lazy load non-critical -->
<link rel="preload" href="critical.css" as="style">
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

4. Optimise Images for LCP Ensure hero images load quickly:

Use modern formats (WebP, AVIF)
Implement responsive images
Compress appropriately
Set explicit dimensions
Consider inline critical images

5. Eliminate Layout Shifts Before LCP Shifts before LCP delay measurement:

Reserve space for dynamic content
Set dimensions on all media
Avoid inserting content above existing content

First Input Delay (FID) Optimisation

FID measures responsiveness to user interaction.

What Causes Poor FID:

Long JavaScript tasks
Heavy main thread work
Large JavaScript bundles
Inefficient event handlers

Technical Fixes for FID:

1. Break Up Long Tasks Split JavaScript execution into smaller chunks:

javascript

// Bad: Long blocking task
function processLargeArray(items) {
  items.forEach(item => heavyProcessing(item));
}

// Good: Chunked processing
function processLargeArrayChunked(items) {
  const chunk = 100;
  let index = 0;
  
  function processChunk() {
    const end = Math.min(index + chunk, items.length);
    for (let i = index; i < end; i++) {
      heavyProcessing(items[i]);
    }
    index = end;
    if (index < items.length) {
      setTimeout(processChunk, 0);
    }
  }
  processChunk();
}

2. Use Web Workers for Heavy Computation Move intensive work off the main thread:

javascript

// Main thread
const worker = new Worker('heavy-task.js');
worker.postMessage(data);
worker.onmessage = (e) => handleResult(e.data);

// heavy-task.js (Web Worker)
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

3. Defer Non-Critical JavaScript Load JavaScript without blocking:

html

<!-- Defer parsing until HTML is complete -->
<script src="app.js" defer></script>

<!-- Load asynchronously -->
<script src="widget.js" async></script>

4. Reduce JavaScript Bundle Size Smaller bundles execute faster:

Code splitting
Tree shaking
Remove unused dependencies
Lazy load non-critical features

5. Optimise Event Handlers Ensure handlers execute quickly:

javascript

// Bad: Heavy handler
button.addEventListener('click', () => {
  heavyComputation();
  updateUI();
});

// Good: Deferred heavy work
button.addEventListener('click', () => {
  updateUI(); // Immediate visual feedback
  requestIdleCallback(() => heavyComputation());
});

Cumulative Layout Shift (CLS) Optimisation

CLS measures visual stability during page load.

Common Causes of Layout Shifts:

Images without dimensions
Ads and embeds without reserved space
Dynamically injected content
Web fonts causing FOIT/FOUT
Animations triggering layout

Technical Fixes for CLS:

1. Always Set Image Dimensions Reserve space before images load:

html

<!-- Always include width and height -->
<img src="photo.jpg" width="800" height="600" alt="Description">

<!-- Or use aspect-ratio in CSS -->
<style>
  .image-container {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
</style>

2. Reserve Space for Embeds Prevent embeds from causing shifts:

css

.video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

3. Avoid Inserting Content Above Existing Content New content should appear below viewport or push nothing:

javascript

// Bad: Inserting at top
container.prepend(newElement);

// Good: Inserting at bottom or in reserved space
container.append(newElement);
// Or insert in pre-allocated space
reservedSpace.replaceWith(newElement);

4. Optimise Font Loading Prevent font-swap shifts:

css

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: optional; /* Prevents layout shift */
}

5. Use Transform for Animations Transform doesn’t trigger layout:

css

/* Bad: Causes layout shift */
.animate {
  left: 0;
  transition: left 0.3s;
}
.animate:hover {
  left: 100px;
}

/* Good: No layout shift */
.animate {
  transform: translateX(0);
  transition: transform 0.3s;
}
.animate:hover {
  transform: translateX(100px);
}

Server-Side Optimisation

Server performance fundamentally impacts website speed.

Hosting Infrastructure

Your hosting choice determines baseline performance:

Shared Hosting Limitations:

Resources shared with other sites
Inconsistent performance
Limited configuration options
Often slow TTFB

VPS and Cloud Hosting Benefits:

Dedicated resources
Scalable performance
Better configuration control
Consistent response times

Managed WordPress Hosting:

WordPress-optimised infrastructure
Built-in caching
Automatic optimisations
Expert support

Hosting Recommendations by Site Type:

Brochure sites: Quality shared or managed hosting
E-commerce: VPS or managed cloud hosting
High-traffic sites: Dedicated or cloud infrastructure
Enterprise: Custom cloud architecture

Server Response Optimisation

Reduce Time to First Byte (TTFB):

Enable Server-Side Caching Cache rendered pages:

apache

# Apache - Enable mod_cache
<IfModule mod_cache.c>
  CacheEnable disk /
  CacheRoot /var/cache/apache2/mod_cache_disk
  CacheDirLevels 2
  CacheDirLength 1
</IfModule>

nginx

# Nginx - FastCGI caching
fastcgi_cache_path /var/cache/nginx levels=1:2 keys_zone=CACHE:100m inactive=60m;
fastcgi_cache_key "$scheme$request_method$host$request_uri";

location ~ \.php$ {
  fastcgi_cache CACHE;
  fastcgi_cache_valid 200 60m;
}

Optimise PHP Configuration For WordPress and PHP sites:

ini

; php.ini optimisations
opcache.enable=1
opcache.memory_consumption=256
opcache.interned_strings_buffer=16
opcache.max_accelerated_files=10000
opcache.revalidate_freq=60
opcache.fast_shutdown=1

Enable HTTP/2 or HTTP/3 Modern protocols improve performance:

Multiplexed connections
Header compression
Server push capabilities
Reduced latency

Implement Gzip/Brotli Compression Compress text-based resources:

nginx

# Nginx Brotli configuration
brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml;
brotli_comp_level 6;

apache

# Apache mod_deflate
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json
</IfModule>

Database Optimisation

Database queries often cause slow response times:

Query Optimisation:

Add indexes to frequently queried columns
Avoid SELECT * queries
Use query caching
Optimise JOIN operations
Remove unnecessary queries

Database Maintenance:

Regular table optimisation
Remove transient data
Clean up revisions
Archive old data
Monitor slow queries

Connection Pooling:

Reuse database connections
Reduce connection overhead
Configure pool size appropriately

For businesses needing expert web development, server-side optimisation should be part of every project scope.

Image Optimisation Beyond Basics

Images typically represent the largest page weight. Proper optimisation is essential.

Modern Image Formats

Move beyond JPEG and PNG:

WebP

25-35% smaller than JPEG at equivalent quality
Supports transparency (unlike JPEG)
Wide browser support (95%+)
Recommended for most use cases

AVIF

50% smaller than JPEG
Better quality at lower file sizes
Growing browser support
Best for photographic content

Implementation with Fallbacks:

html

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

Responsive Images

Serve appropriately sized images:

srcset for Resolution Switching:

html

<img 
  srcset="image-400.webp 400w,
          image-800.webp 800w,
          image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  src="image-800.webp"
  alt="Description"
  width="800"
  height="600"
>

Art Direction with picture:

html

<picture>
  <source media="(max-width: 600px)" srcset="mobile-crop.webp">
  <source media="(max-width: 1200px)" srcset="tablet-crop.webp">
  <img src="desktop.webp" alt="Description">
</picture>

Lazy Loading Implementation

Defer off-screen images:

Native Lazy Loading:

html

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600">

JavaScript Enhancement for Better Control:

javascript

// Intersection Observer for advanced lazy loading
const lazyImages = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      imageObserver.unobserve(img);
    }
  });
}, {
  rootMargin: '50px 0px' // Load slightly before viewport
});

lazyImages.forEach(img => imageObserver.observe(img));

Critical Images Exception: Don’t lazy load above-the-fold images:

html

<!-- Hero image - load immediately -->
<img src="hero.webp" alt="Hero" fetchpriority="high">

<!-- Below fold - lazy load -->
<img src="product.webp" loading="lazy" alt="Product">

Image Compression Best Practices

Compress without visible quality loss:

Quality Settings:

JPEG: 80-85% quality for most images
WebP: 80-85% quality
AVIF: 60-70% quality (better compression)
PNG: Use only for graphics requiring transparency

Automated Compression Pipeline:

javascript

// Example using Sharp (Node.js)
const sharp = require('sharp');

async function optimiseImage(input, output) {
  await sharp(input)
    .resize(1200, null, { withoutEnlargement: true })
    .webp({ quality: 82 })
    .toFile(output);
}

WordPress Implementation:

Use plugins like ShortPixel or Imagify
Enable WebP conversion
Set appropriate compression levels
Implement lazy loading

Shopify Implementation:

Shopify auto-converts to WebP
Use appropriate image sizes in theme
Implement responsive images in Liquid
Consider image CDN for further optimisation

CSS and JavaScript Optimisation

Code efficiency dramatically impacts performance.

Critical CSS Extraction

Inline CSS required for above-the-fold content:

Why Critical CSS Matters:

External CSS blocks rendering
Users see blank page while CSS loads
Critical CSS enables faster First Paint
Remaining CSS loads asynchronously

Implementation:

html

<head>
  <!-- Inline critical CSS -->
  <style>
    /* Only styles needed for above-the-fold content */
    header { ... }
    .hero { ... }
    nav { ... }
  </style>
  
  <!-- Async load remaining CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

Tools for Critical CSS Extraction:

Critical (npm package)
Penthouse
CriticalCSS
PurgeCSS (for unused CSS removal)

JavaScript Optimisation Strategies

Reduce JavaScript impact on performance:

Code Splitting: Load only what’s needed:

javascript

// Dynamic import for route-based splitting
const ProductPage = lazy(() => import('./ProductPage'));

// Load on interaction
button.addEventListener('click', async () => {
  const { heavyFeature } = await import('./heavyFeature');
  heavyFeature();
});

Tree Shaking: Remove unused code:

javascript

// Bad: Imports entire library
import _ from 'lodash';

// Good: Imports only what's needed
import { debounce } from 'lodash-es';

Minification and Compression: Reduce file sizes:

javascript

// Webpack configuration
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: true,
          mangle: true,
        },
      }),
    ],
  },
};

Render-Blocking Resource Management

Prevent resources from blocking rendering:

Script Loading Strategies:

html

<!-- Default: Blocks parsing and rendering -->
<script src="blocking.js"></script>

<!-- Defer: Executes after HTML parsing, before DOMContentLoaded -->
<script src="deferred.js" defer></script>

<!-- Async: Downloads in parallel, executes immediately when ready -->
<script src="async.js" async></script>

<!-- Module: Deferred by default -->
<script type="module" src="module.js"></script>

When to Use Each:

defer: For scripts that need DOM access but aren’t critical
async: For independent scripts (analytics, ads)
module: For ES6 modules
inline: For tiny critical scripts

CSS Loading Strategies:

html

<!-- Critical CSS inline -->
<style>/* critical styles */</style>

<!-- Non-critical CSS with low priority -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

<!-- Preload important CSS -->
<link rel="preload" href="important.css" as="style">

Font Loading Strategies

Web fonts significantly impact performance and CLS.

Font Loading Best Practices

Optimise font delivery:

Use font-display Property:

css

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Shows fallback immediately, swaps when loaded */
}

font-display Values:

auto: Browser default (usually block)
block: Brief invisible period, then swap
swap: Immediate fallback, swap when ready
fallback: Brief block, swap if loaded quickly
optional: Brief block, may not swap (best for CLS)

Preload Critical Fonts:

html

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

Reducing Font File Sizes

Minimise font payload:

Subset Fonts: Include only characters you need:

css

/* Latin subset only */
@font-face {
  font-family: 'CustomFont';
  src: url('font-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F;
}

Variable Fonts: One file for multiple weights/styles:

css

@font-face {
  font-family: 'VariableFont';
  src: url('variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
}

/* Use any weight */
.light { font-weight: 300; }
.bold { font-weight: 700; }

System Font Stacks

Consider system fonts for performance:

css

/* Modern system font stack */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
               Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

Benefits:

Zero download time
No FOUT or FOIT
Familiar to users
Excellent performance

According to web.dev guidelines, proper font loading strategies prevent layout shifts and improve perceived performance.

Caching Strategies That Work

Effective caching dramatically improves repeat visit performance.

Browser Caching Configuration

Set appropriate cache headers:

Static Asset Caching:

nginx

# Nginx configuration
location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff2)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

apache

# Apache .htaccess
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

Cache-Control Headers:

max-age: How long to cache (seconds)
public: Can be cached by any cache
private: Only browser can cache
immutable: Content won’t change
no-cache: Must revalidate before using
no-store: Don’t cache at all

Cache Busting Strategies

Update cached resources when needed:

Filename Versioning:

html

<!-- Hash-based versioning -->
<link rel="stylesheet" href="styles.a1b2c3d4.css">
<script src="app.e5f6g7h8.js"></script>

Query String Versioning:

html

<!-- Query parameter versioning -->
<link rel="stylesheet" href="styles.css?v=1.2.3">

Build Tool Implementation:

javascript

// Webpack content hash
output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js',
}

Service Worker Caching

Advanced caching for offline and performance:

javascript

// Basic service worker caching
const CACHE_NAME = 'site-cache-v1';
const CACHED_URLS = [
  '/',
  '/styles.css',
  '/app.js',
  '/images/logo.svg'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(CACHED_URLS))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Content Delivery Networks

CDNs improve performance for geographically distributed users.

How CDNs Improve Performance

CDNs provide multiple benefits:

Reduced Latency:

Content served from nearest edge location
Shorter physical distance to user
Faster response times

Distributed Load:

Traffic spread across multiple servers
Origin server protected
Better handling of traffic spikes

Built-in Optimisations:

Automatic compression
Image optimisation
Minification
HTTP/2 and HTTP/3

CDN Implementation

Choose and configure appropriate CDN:

Popular CDN Options:

Cloudflare (excellent free tier)
AWS CloudFront
Fastly
Bunny CDN
KeyCDN

Basic Cloudflare Setup:

Add site to Cloudflare
Update nameservers
Configure caching rules
Enable optimisations (minification, Brotli)
Set up page rules

CDN Best Practices:

Cache static assets aggressively
Use appropriate cache TTLs
Purge cache when deploying
Monitor cache hit rates
Configure proper origin headers

CDN for Dynamic Content

CDNs can accelerate dynamic content too:

Edge Caching:

Cache HTML at edge
Short TTLs for dynamic pages
Bypass for authenticated users

Argo Smart Routing (Cloudflare):

Optimised routing paths
Reduced latency for dynamic requests
Improved reliability

For businesses seeking comprehensive website development, CDN configuration should be standard practice.

WordPress-Specific Optimisations

WordPress sites require platform-specific interventions.

Essential WordPress Performance Plugins

Caching Plugins:

WP Rocket (premium, comprehensive)
W3 Total Cache (free, powerful)
LiteSpeed Cache (for LiteSpeed servers)
WP Super Cache (simple, effective)

Image Optimisation:

ShortPixel (compression + WebP)
Imagify (easy to use)
EWWW Image Optimizer
Smush

Database Optimisation:

WP-Optimize
Advanced Database Cleaner
WP-Sweep

WordPress Code Optimisations

Beyond plugins, code-level improvements:

Disable Unused Features:

php

// functions.php

// Disable emojis
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

// Disable embeds
remove_action('wp_head', 'wp_oembed_add_discovery_links');

// Remove jQuery Migrate (if not needed)
add_action('wp_default_scripts', function($scripts) {
  if (!is_admin() && isset($scripts->registered['jquery'])) {
    $scripts->registered['jquery']->deps = array_diff(
      $scripts->registered['jquery']->deps, 
      ['jquery-migrate']
    );
  }
});

// Disable Gutenberg block CSS (if using Classic Editor)
add_action('wp_enqueue_scripts', function() {
  wp_dequeue_style('wp-block-library');
  wp_dequeue_style('wp-block-library-theme');
});

Optimise WooCommerce:

php

// Disable WooCommerce scripts on non-shop pages
add_action('wp_enqueue_scripts', function() {
  if (!is_woocommerce() && !is_cart() && !is_checkout()) {
    wp_dequeue_style('woocommerce-general');
    wp_dequeue_style('woocommerce-layout');
    wp_dequeue_script('wc-add-to-cart');
    wp_dequeue_script('woocommerce');
  }
}, 99);

WordPress Hosting Optimisation

Hosting significantly impacts WordPress performance:

Recommended Configuration:

PHP 8.1+ (significant performance improvement)
OPcache enabled
MySQL/MariaDB optimised
Redis or Memcached for object caching
SSD storage

Object Caching:

php

// wp-config.php for Redis
define('WP_REDIS_HOST', '127.0.0.1');
define('WP_REDIS_PORT', 6379);
define('WP_CACHE', true);

Shopify Performance Techniques

Shopify’s hosted platform requires different optimisation approaches.

Theme Performance Optimisation

Reduce Liquid Render Time:

liquid

{% comment %} Bad: Multiple queries {% endcomment %}
{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

{% comment %} Good: Limit iterations {% endcomment %}
{% for product in collection.products limit: 12 %}
  {{ product.title }}
{% endfor %}

Optimise Section Loading:

liquid

{% comment %} Lazy load non-critical sections {% endcomment %}
<div class="lazy-section" data-section-id="{{ section.id }}">
  {% if request.design_mode %}
    {% render 'heavy-section' %}
  {% endif %}
</div>

<script>
  // Load section on scroll
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // Fetch and render section
      }
    });
  });
</script>

Shopify-Specific Best Practices

App Management:

Audit installed apps regularly
Remove unused apps completely
Check app script impact
Prefer native Shopify features

Image Optimisation:

liquid

{% comment %} Use Shopify's image CDN optimally {% endcomment %}
<img 
  srcset="{{ product.featured_image | image_url: width: 400 }} 400w,
          {{ product.featured_image | image_url: width: 800 }} 800w,
          {{ product.featured_image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="{{ product.featured_image | image_url: width: 800 }}"
  alt="{{ product.featured_image.alt }}"
  loading="lazy"
  width="{{ product.featured_image.width }}"
  height="{{ product.featured_image.height }}"
>

Critical CSS in Shopify:

liquid

{% comment %} Inline critical CSS {% endcomment %}
<style>
  {% render 'critical-css' %}
</style>

{% comment %} Defer main stylesheet {% endcomment %}
<link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

For businesses needing Shopify development expertise, performance optimisation is essential for e-commerce success.

Third-Party Script Management

Third-party scripts often cause significant performance issues.

Auditing Third-Party Impact

Identify problematic scripts:

Chrome DevTools Analysis:

Open Network tab
Filter by third-party domain
Note blocking time and size
Check Coverage tab for unused code

Common Culprits:

Analytics platforms
Chat widgets
Social media embeds
Marketing tags
Advertising scripts
Customer review widgets

Optimising Third-Party Loading

Reduce third-party impact:

Defer Non-Critical Scripts:

html

<!-- Load chat widget after page load -->
<script>
  window.addEventListener('load', function() {
    setTimeout(function() {
      // Load chat widget
      var script = document.createElement('script');
      script.src = 'https://chat-widget.com/widget.js';
      document.body.appendChild(script);
    }, 3000);
  });
</script>

Load on Interaction:

javascript

// Load video embed only when user interacts
const videoContainer = document.querySelector('.video-facade');
videoContainer.addEventListener('click', () => {
  const iframe = document.createElement('iframe');
  iframe.src = videoContainer.dataset.src;
  videoContainer.replaceWith(iframe);
}, { once: true });

Self-Host When Possible:

Download and host analytics scripts
Self-host fonts instead of Google Fonts
Copy required functionality locally

Tag Manager Best Practices

If using Google Tag Manager:

Optimise GTM Loading:

html

<!-- Defer GTM for non-critical tracking -->
<script>
  window.addEventListener('load', function() {
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXX');
  });
</script>

GTM Container Optimisation:

Remove unused tags
Use trigger conditions wisely
Consolidate similar tags
Audit container regularly
Use built-in consent mode

Mobile Performance Optimisation

Mobile performance requires specific attention.

Mobile-First Performance

Optimise for mobile constraints:

Network Considerations:

Mobile networks are slower and less reliable
Data costs matter to users
Latency is higher than desktop
Connection quality varies

Device Considerations:

Less processing power
Limited memory
Battery consumption matters
Smaller screens need less data

Mobile-Specific Techniques

Responsive Image Delivery: Serve smaller images to mobile:

html

<picture>
  <source media="(max-width: 600px)" srcset="mobile.webp">
  <source media="(max-width: 1200px)" srcset="tablet.webp">
  <img src="desktop.webp" alt="Description">
</picture>

Reduced JavaScript for Mobile:

javascript

// Load features conditionally
if (window.innerWidth > 768) {
  import('./desktop-features.js');
}

Touch Optimisation:

Remove hover-dependent features
Increase tap targets
Eliminate click delays

css

/* Remove 300ms tap delay */
touch-action: manipulation;

AMP and Mobile Alternatives

Consider mobile-specific solutions:

AMP (Accelerated Mobile Pages):

Extremely fast mobile pages
Restricted functionality
Good for content sites
Google caches and serves

Progressive Web Apps:

App-like experience
Offline capability
Push notifications
Home screen installation

Database and Backend Optimisation

Backend efficiency impacts all page loads.

Database Query Optimisation

Efficient queries reduce response time:

Index Optimisation:

sql

-- Add index for frequently queried columns
CREATE INDEX idx_posts_date ON wp_posts(post_date);
CREATE INDEX idx_postmeta_key ON wp_postmeta(meta_key);

Query Analysis:

sql

-- Identify slow queries
SHOW FULL PROCESSLIST;
EXPLAIN SELECT * FROM wp_posts WHERE post_status = 'publish';

Common WordPress Query Issues:

Meta queries without indexes
Too many post revisions
Autoloaded options bloat
Transient accumulation

Database Maintenance

Regular maintenance prevents degradation:

WordPress Database Cleanup:

sql

-- Remove revisions
DELETE FROM wp_posts WHERE post_type = 'revision';

-- Remove auto-drafts
DELETE FROM wp_posts WHERE post_status = 'auto-draft';

-- Clean orphaned postmeta
DELETE pm FROM wp_postmeta pm
LEFT JOIN wp_posts p ON pm.post_id = p.ID
WHERE p.ID IS NULL;

-- Optimise tables
OPTIMIZE TABLE wp_posts, wp_postmeta, wp_options;

Automated Maintenance:

Schedule regular cleanup
Monitor database size
Set revision limits
Clean transients automatically

Performance Testing and Monitoring

Continuous monitoring ensures sustained performance.

Testing Tools and Methods

Lab Testing:

Controlled environment
Consistent conditions
Detailed diagnostics
Before/after comparisons

Field Testing:

Real user data
Actual conditions
Geographic variation
Device diversity

Essential Testing Tools:

Tool	Type	Best For
PageSpeed Insights	Lab + Field	Quick overview
WebPageTest	Lab	Deep analysis
GTmetrix	Lab	Historical tracking
Chrome DevTools	Lab	Development
Search Console	Field	Site-wide trends

Continuous Monitoring

Set up ongoing performance tracking:

Real User Monitoring (RUM):

Track actual user experiences
Identify regional issues
Understand device impact
Monitor over time

Synthetic Monitoring:

Regular automated tests
Consistent baselines
Alert on degradation
Track deployments

Alerting Setup:

Set performance thresholds
Alert on regressions
Monitor key pages
Track Core Web Vitals

Performance Budgets

Set and enforce limits:

Budget Examples:

Total page weight: Under 1.5MB
JavaScript: Under 300KB
Images: Under 500KB
LCP: Under 2.5 seconds
Total blocking time: Under 300ms

Enforcement:

javascript

// Webpack performance hints
performance: {
  maxAssetSize: 250000,
  maxEntrypointSize: 400000,
  hints: 'error'
}

Common Speed Mistakes to Avoid

Learn from frequent errors:

Over-Reliance on Plugins

Plugins can cause more problems than they solve:

The Problem:

Each plugin adds code and database queries
Plugin conflicts cause issues
Quality varies dramatically
Maintenance burden increases

The Solution:

Audit plugins quarterly
Remove unused plugins
Choose quality over quantity
Consider custom code for simple features

Ignoring Mobile Performance

Desktop-focused optimisation misses majority of users:

The Problem:

Mobile traffic often exceeds 60%
Mobile networks are slower
Mobile devices less powerful
Google uses mobile-first indexing

The Solution:

Test mobile first
Optimise for mobile constraints
Consider mobile-specific solutions
Monitor mobile metrics separately

Forgetting About Third-Party Scripts

Third parties often cause the worst performance issues:

The Problem:

You don’t control third-party code
Scripts may change without notice
Blocking scripts halt rendering
Multiple scripts compound problems

The Solution:

Audit third-party impact regularly
Load non-critical scripts asynchronously
Set performance budgets for third parties
Consider alternatives or removal

Neglecting Ongoing Monitoring

Performance degrades over time:

The Problem:

New content adds weight
Plugin updates change performance
Third parties evolve
Team members add scripts

The Solution:

Continuous monitoring
Regular audits
Performance budgets
Team education

Practical Implementation Roadmap

Systematic approach to website speed optimisation:

Week 1: Audit and Quick Wins

Day 1-2: Performance Audit

Run PageSpeed Insights on key pages
Check Core Web Vitals in Search Console
Analyse with WebPageTest
Document baseline metrics

Day 3-4: Quick Wins

Enable compression (Gzip/Brotli)
Optimise largest images
Remove unused plugins
Enable basic caching

Day 5: Monitoring Setup

Configure Search Console alerts
Set up regular testing schedule
Document baseline metrics
Create performance dashboard

Week 2: Core Optimisations

Server and Hosting:

Review hosting adequacy
Configure server-side caching
Enable HTTP/2
Set up CDN

Images:

Convert to WebP format
Implement responsive images
Add lazy loading
Set dimensions on all images

Week 3: Code Optimisation

CSS:

Extract and inline critical CSS
Defer non-critical CSS
Remove unused CSS
Minify and compress

JavaScript:

Defer non-critical scripts
Remove unused JavaScript
Code split where possible
Optimise third-party loading

Week 4: Advanced Optimisation

Fonts:

Optimise font loading
Subset fonts
Preload critical fonts
Consider system fonts

Fine-Tuning:

Address remaining Core Web Vitals issues
Optimise specific problematic pages
Implement advanced caching
Test and iterate

Ongoing Maintenance

Weekly:

Review key metrics
Address any regressions
Monitor third-party impact

Monthly:

Comprehensive performance audit
Test new optimisation opportunities
Review and remove unnecessary resources

Quarterly:

Full technical audit
Evaluate new tools and techniques
Update optimisation strategies

Working with professional web developers ensures systematic implementation and ongoing performance maintenance.

Conclusion: Speed as Competitive Advantage

Website speed optimisation isn’t a one-time project—it’s an ongoing commitment to user experience and business performance. In 2026, speed directly impacts search rankings, user satisfaction, and conversion rates. The technical fixes outlined in this guide provide a comprehensive roadmap for meaningful performance improvements.

The Business Impact

Speed optimisation delivers measurable returns:

SEO Benefits:

Core Web Vitals influence rankings
Better user signals improve visibility
Competitive advantage in close rankings
Mobile-first indexing rewards speed

Conversion Impact:

0.1-second improvements boost conversions 8%+
Reduced bounce rates
Higher user satisfaction
Increased trust and credibility

Cost Efficiency:

Reduced bandwidth costs
Lower hosting requirements
Better resource utilisation
Improved ROI on traffic

Your Next Steps

Start optimising today:

Immediate Actions:

Audit current performance
Identify top opportunities
Implement quick wins
Set up monitoring

Strategic Initiatives:

Plan systematic optimisation
Allocate development resources
Establish performance budgets
Create ongoing processes

The technical fixes that actually work require expertise, time, and systematic implementation. Generic advice only gets you so far. Real performance improvements demand understanding how browsers render pages, how servers respond to requests, and how code execution impacts user experience.

Whether you’re tackling website speed optimisation internally or seeking expert web development support, the investments you make in performance will compound over time. Every visitor benefits. Every conversion improves. Every ranking strengthens.

Fast websites win. Slow websites lose customers, rankings, and revenue. The choice is clear—the only question is when you’ll start.

Website Speed Optimisation: The Technical Fixes That Actually Work

Understanding Website Performance Metrics

Key Performance Metrics

Why These Metrics Matter

Measuring Your Current Performance

Core Web Vitals Deep Dive

Largest Contentful Paint (LCP) Optimisation

First Input Delay (FID) Optimisation

Cumulative Layout Shift (CLS) Optimisation

Server-Side Optimisation

Hosting Infrastructure

Server Response Optimisation

Database Optimisation

Image Optimisation Beyond Basics

Modern Image Formats

Responsive Images

Lazy Loading Implementation

Image Compression Best Practices

CSS and JavaScript Optimisation

Critical CSS Extraction

JavaScript Optimisation Strategies

Render-Blocking Resource Management

Font Loading Strategies

Font Loading Best Practices

Reducing Font File Sizes

System Font Stacks

Caching Strategies That Work

Browser Caching Configuration

Cache Busting Strategies

Service Worker Caching

Content Delivery Networks

How CDNs Improve Performance

CDN Implementation

CDN for Dynamic Content

WordPress-Specific Optimisations

Essential WordPress Performance Plugins

WordPress Code Optimisations

WordPress Hosting Optimisation

Shopify Performance Techniques

Theme Performance Optimisation

Shopify-Specific Best Practices

Third-Party Script Management

Auditing Third-Party Impact

Optimising Third-Party Loading

Tag Manager Best Practices

Mobile Performance Optimisation

Mobile-First Performance

Mobile-Specific Techniques

AMP and Mobile Alternatives

Database and Backend Optimisation

Database Query Optimisation

Database Maintenance

Performance Testing and Monitoring

Testing Tools and Methods

Continuous Monitoring

Performance Budgets

Common Speed Mistakes to Avoid

Over-Reliance on Plugins

Ignoring Mobile Performance

Forgetting About Third-Party Scripts

Neglecting Ongoing Monitoring

Practical Implementation Roadmap

Week 1: Audit and Quick Wins

Week 2: Core Optimisations

Week 3: Code Optimisation

Week 4: Advanced Optimisation

Ongoing Maintenance

Conclusion: Speed as Competitive Advantage

The Business Impact

Your Next Steps