Design patterns

Contents

Overview

Design patterns in the context of Low Resource Optimisation (LRO) refer to commonly used interface and architectural approaches that minimise resource consumption while maintaining usability.

Modern web systems often rely on complex JavaScript frameworks, high-resolution media, and interactive components. These elements increase page weight, network requests, and rendering complexity. Users with slow connections, unstable networks, or limited device capability may experience delayed page loads, broken functionality, or excessive data usage.

Low-resource design patterns address these issues by structuring pages so that essential content loads first, heavy resources load progressively, and optional features remain accessible only when needed.

Patterns such as lazy loading, static entry pages, simplified navigation, and fallback modes ensure that applications remain usable even under constrained conditions.

Within the LRO framework, design patterns serve as practical implementation strategies that developers and designers can apply consistently across systems.

Key idea in the LRO context

In low-resource environments, the most effective systems prioritise delivering value quickly while reducing unnecessary computation and network requests.

Design patterns in LRO aim to ensure that:

  • Essential information loads immediately
  • Heavy resources are delayed or optional
  • Interfaces remain usable without advanced scripts
  • Systems degrade gracefully under poor connectivity
  • Interaction patterns remain predictable and lightweight

Applying these patterns improves performance, accessibility, and reliability across diverse environments.

Why this matters for LRO

User impact

Users in constrained environments often encounter difficulties accessing heavy web applications.

Common challenges include:

  • Slow internet connections: Large pages take significant time to load
  • High-latency networks: Interactive features respond slowly
  • Limited data plans: Heavy media consumes excessive data
  • Low-end devices: Complex interfaces cause performance issues

Applying efficient design patterns ensures that these users can still access essential information and complete tasks.

Risks if ignored

Without efficient design patterns, digital systems may exhibit several problems.

  • Delayed content visibility: Users must wait for large scripts or assets
  • Excessive network usage: Unnecessary downloads increase bandwidth consumption
  • Interaction failures: Heavy client-side scripts fail on slower devices
  • Reduced accessibility: Users abandon services due to poor performance

Low-resource design patterns mitigate these risks by prioritising efficiency and resilience.

Common problems

Heavy page architecture

Many web applications load large numbers of resources before displaying content.

Common causes include:

  • Large JavaScript bundles: Frameworks and libraries increase page size
  • High-resolution media: Images and videos require large downloads
  • Multiple third-party integrations: Analytics and plugins add network requests
  • Inefficient layout rendering: Complex design structures slow rendering

These issues significantly impact performance on slower networks.

Inefficient interaction models

Certain interaction patterns unnecessarily increase resource usage.

Examples include:

  • Infinite scroll with heavy datasets: Loads large volumes of data
  • Auto-playing media: Consumes bandwidth without user interaction
  • Complex animations: Increase rendering and processing cost

Design patterns that reduce these inefficiencies are essential for low-resource optimisation.

Design principles involved

Effective low-resource design patterns rely on several core principles.

  • Progressive delivery
    Content should appear as soon as possible
  • Minimal resource usage
    Only necessary assets should be loaded
  • User-controlled interaction
    Users should decide when heavy features activate
  • Predictable navigation
    Interfaces should be simple and consistent
  • Graceful fallback
    Systems should remain functional without advanced features

These principles ensure that digital systems remain usable across diverse environments.

Strategy options

Summary-first pages

Summary-first pages present key information at the top of the page before detailed content loads.

This pattern ensures that users quickly understand the main message without waiting for the entire page to load.

Typical structure includes:

  • Title and summary section
  • Key highlights or bullet points
  • Expandable sections for detailed information

This pattern is especially useful for research reports, articles, and dashboards.

Benefits

  • Faster information access
  • Reduced initial page load
  • Improved readability

Lazy visualisation

Lazy visualisation delays the loading of heavy charts, maps, or visual elements until the user requests them.

Visualisations often require large datasets and rendering libraries. Loading them only when necessary reduces initial page weight.

Example behaviour

  • Charts load when users scroll to them
  • Maps load after user interaction
  • Visual dashboards load modules incrementally

Lazy loading is widely used to improve performance by deferring the loading of non-critical resources. Cloudflare

Lightweight headers

Headers appear on every page and are frequently rendered first. Heavy headers significantly affect page load time.

Efficient header design includes:

  • Minimal images or graphics
  • Simple navigation menus
  • Avoidance of large scripts

Lightweight headers ensure that navigation becomes available quickly.

Benefits

  • Faster rendering
  • Reduced repeated downloads
  • Improved usability

Static entry pages

Static entry pages deliver pre-rendered content that loads quickly without server processing.

Static websites contain fixed HTML files that can be served directly from servers or content delivery networks.

Advantages include:

  • Faster loading times
  • Reduced server processing
  • Lower bandwidth consumption

Static entry pages are particularly useful as landing pages or informational pages.

Fallback modes

Fallback modes ensure that systems continue functioning when advanced features fail.

Examples include:

  • Script fallback: Content remains accessible when JavaScript fails
  • Image fallback: Alternative text or placeholders displayed
  • Feature fallback: Simplified versions of complex components

Fallback modes improve resilience in unstable environments.

Simplified navigation patterns

Navigation usability strongly affects page efficiency.

Effective navigation patterns include:

  • Clear hierarchical menus
  • Limited navigation depth
  • Predictable link structures

Good navigation usability reduces unnecessary page loads and improves discoverability. Usability Geek

Progressive content loading

Progressive loading ensures that essential content appears before secondary elements.

Examples include:

  • Text content loads before images
  • Core scripts load before enhancements
  • Media loads only after page interaction

This pattern improves perceived performance.

Localisation-aware design

Localisation affects page performance because translated content may require additional assets and fonts.

Optimised localisation strategies include:

  • Using efficient font loading
  • Minimising region-specific resources
  • Serving localised content through content delivery networks

These strategies reduce delays for international users.

Sustainable and low-impact design

Sustainable design focuses on reducing the environmental impact of web systems.

Strategies include:

  • Minimising page weight
  • Reducing server requests
  • Using efficient caching

Reducing data transfer not only improves performance but also lowers energy consumption.

Implementation guidance

Identify heavy components

Audit pages to determine which components consume the most resources.

Examples include:

  • Media assets
  • Large scripts
  • Interactive visualisations
  • Prioritise critical content
  • Ensure essential information loads first
  • Apply progressive loading patterns
  • Load optional resources only when required
  • Provide fallback mechanisms
  • Ensure features continue functioning under limited connectivity
  • Test under constrained conditions
  • Simulate slow network environments to verify usability

Code example (lazy loading images)

Example of lazy loading to delay non-critical image downloads. 

<img src="chart.png" loading="lazy" alt="Data visualisation">

Lazy loading ensures that images are downloaded only when users scroll to them.

Real-world examples

  • Wikipedia - Wikipedia pages prioritise text content and simple layouts, enabling fast loading even on slow networks.
  • BBC News - BBC websites provide simplified mobile versions that reduce page weight and prioritise content.
  • Static documentation websites - Many technical documentation platforms use static site generators to deliver content quickly.

Do / Don't

Do

  • Use summary-first layouts
  • Load heavy visualisations lazily
  • Design lightweight navigation and headers
  • Provide fallback mechanisms
  • Use static pages where possible

Don't

  • Load heavy media automatically
  • Depend entirely on large JavaScript frameworks
  • Render complex visualisations immediately
  • Overload navigation structures
  • Ignore performance impacts of layout design

Checklist (quick review)

Metrics and tools

Key metrics

  • Page weight
  • Time to first contentful paint
  • Number of network requests
  • Script execution time
  • User interaction latency

Useful tools

  • Google Lighthouse
  • WebPageTest
  • PageSpeed Insights

Related LRO topics

  • Page and interaction design principles
  • Data transparency and user control
  • Progressive enhancement
  • Graceful degradation
  • Network optimisation strategies

Key takeaways

Design patterns provide practical methods for implementing low-resource optimisation strategies.

By structuring pages around summary-first layouts, lazy loading, lightweight navigation, static entry points, and fallback modes, developers can ensure that applications remain accessible and efficient across a wide range of network conditions.

Applying these patterns improves performance, reduces bandwidth usage, and ensures that digital systems remain usable even in constrained environments.

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.

Back to top