System design and optimisation

Contents

Overview

Performance and efficiency engineering focuses on designing and implementing systems that maximise output while minimising resource consumption. In low-resource environments, this involves reducing data transfer, improving response times, and ensuring efficient use of device and network capabilities.

Modern web systems often prioritise feature richness and scalability, but without careful optimisation, they can become resource-intensive. This results in slow load times, high bandwidth usage, and poor responsiveness, especially for users on constrained networks.

This topic provides a structured approach to engineering systems that are:

  • Fast and responsive
  • Bandwidth-efficient
  • Scalable under varying conditions
  • Resilient to network instability

Key idea in an LRO context

Performance in low-resource environments is not just about speed but about efficiency per unit of resource.

Core idea: Deliver maximum value with minimum data, processing, and network overhead.

This involves balancing three key system factors:

  • Latency (response time)
  • Throughput (amount of data processed)
  • Bandwidth (data transfer capacity)

Efficient systems optimise across all three dimensions rather than focusing on one.

Why this matters for LRO

User impact

Performance inefficiencies are amplified in constrained environments:

  • Slow page loads – Large assets take longer to download
  • High data consumption – Users incur higher costs on limited data plans
  • Delayed interactions – Latency affects responsiveness
  • Device strain – Heavy processing impacts low-end devices

System impact

Inefficient systems also affect backend performance:

  • Increased server load – Redundant requests and large payloads
  • Reduced scalability – Systems fail under high traffic
  • Higher operational costs – More bandwidth and infrastructure required

Core Engineering Principles

  • Efficiency over excess – Systems should avoid unnecessary processing, data transfer, and rendering
  • Minimise round trips – Reducing the number of network requests significantly improves performance
  • Reuse over recompute – Caching and storage strategies should prevent repeated work
  • Adapt to constraints – Systems should dynamically adjust behaviour based on network and device conditions

Strategies

Website technical optimisations

Technical optimisations improve how efficiently a website is delivered and rendered.

Key practices:

  • Minimise HTTP requests
  • Use efficient file formats
  • Enable compression (e.g., Gzip, Brotli)
  • Optimise server response times

Asset optimisation

Assets such as images, scripts, and stylesheets contribute significantly to page weight.

Key practices:

  • Compress images and use modern formats (WebP, AVIF)
  • Minify CSS and JavaScript
  • Remove unused code
  • Use responsive images

Caching strategies

Caching stores previously loaded resources so they can be reused without repeated downloads.

Types of caching:

  • Browser caching
  • CDN caching
  • Server-side caching

Key practices:

  • Cache static assets aggressively
  • Use cache headers effectively
  • Implement cache invalidation strategies

Storage management

Efficient use of local storage reduces dependency on network requests.

Key practices:

  • Store frequently accessed data locally
  • Use IndexedDB or local storage for offline access
  • Manage storage limits carefully

Payload minimisation

Reducing the amount of data transferred between the client and the server is critical.

Key practices:

  • Send only the required data
  • Use efficient data formats (JSON over XML)
  • Implement data compression
  • Avoid redundant fields in API responses

Bandwidth-aware design

Applications should adapt their behaviour based on the available bandwidth.

Key practices:

  • Detect network conditions
  • Adjust image quality dynamically
  • Disable non-essential features on slow networks
  • Limit background data usage

Content delivery optimisation

Content delivery strategies improve how data is distributed globally.

Key practices:

  • Use Content Delivery Networks (CDNs)
  • Serve content from the nearest location
  • Optimise DNS resolution

Implementation Guidance

Engineering workflow

  1. Analyse performance baseline – Measure current system performance using tools and metrics
  2. Identify bottlenecks – Locate areas with high latency, large payloads, or excessive requests
  3. Apply targeted optimisations – Focus on high-impact improvements such as caching and compression
  4. Validate improvements – Test under real-world conditions, including slow networks and low-end devices

Real-world Patterns

  • CDN-backed websites – Use distributed servers to deliver content efficiently
  • Mobile-first applications – Optimised for low bandwidth and limited device capability
  • Offline-first apps – Use local storage and caching to minimise network dependency

Do / Don't

Do

  • Optimise assets and reduce payload size
  • Implement caching strategies
  • Monitor performance continuously
  • Use efficient API design
  • Adapt to network conditions

Don't

  • Send unnecessary data
  • Ignore repeat visit optimisation
  • Overload pages with large assets
  • Depend on constant network connectivity
  • Skip performance monitoring

Checklist

Metrics and Evaluation

Key metrics

  • Page load time
  • Time to first byte (TTFB)
  • Total page size
  • Number of requests
  • API response time
  • Cache hit rate

Tools

  • Google Lighthouse
  • WebPageTest
  • PageSpeed Insights

Further Reading



How can we improve this article?

Your feedback will help improve the framework and its documentation and will only be visible to the development team.