Anti-patterns

Contents

Overview

Anti-patterns refer to commonly used approaches in software design and web development that appear effective but create significant performance and scalability problems when systems operate under constrained conditions.

In modern digital systems, designers and developers often prioritise visual sophistication, complex interactions, and heavy client-side frameworks. While these features may improve perceived modernity or functionality, they frequently increase computational load, bandwidth consumption, and latency.

In low-resource environments such as slow internet connections, unstable networks, limited device capabilities, or expensive mobile data plans, these practices can significantly degrade usability.

Anti-patterns in the context of Low Resource Optimisation (LRO) represent design choices that lead to excessive resource consumption, inefficient data transfer, and poor interaction performance.

Understanding and avoiding these anti-patterns is essential for building systems that remain accessible and efficient across diverse network and device conditions.

Key idea in the LRO context

Within the LRO framework, anti-patterns highlight practices that developers should avoid when designing for constrained environments.

These patterns often lead to:

  • Excessive network traffic
  • Long loading times
  • High memory consumption
  • Poor accessibility on slower devices
  • Unpredictable interaction behaviour

By identifying these problematic approaches, developers can replace them with more efficient design strategies that prioritise resilience and performance.

Why this matters for low-resource users

User impact

Users in low-resource environments face significant challenges when interacting with heavy web applications.

Examples include:

  • Slow connections - Large pages take excessive time to load
  • Unstable networks - Dynamic applications may fail to initialise
  • Low-end devices - Heavy scripts consume memory and processing power
  • Limited data plans - High data usage results in increased costs
  • Anti-patterns intensify these issues by unnecessarily increasing resource demands.

Risks if ignored

When systems rely heavily on inefficient design patterns, several consequences may occur.

  • Reduced accessibility: Users cannot access essential information
  • High abandonment rates: Users leave pages before content loads
  • Frequent interaction failures: Scripts and APIs fail under unstable connections
  • Poor scalability: Systems struggle to handle increased usage

Avoiding anti-patterns improves both performance and reliability.

Common problems

Overly complex architectures

Many modern applications rely on complex client-side architectures that require significant resources to operate.

Examples include:

  • Large JavaScript bundles - Framework-heavy applications increase page weight
  • Multiple asynchronous dependencies - Numerous external requests slow down page rendering
  • Unnecessary real-time updates - Continuous API polling consumes bandwidth

Inefficient data delivery

Poor data management patterns may overload networks or devices.

Examples include:

  • Large unfiltered API responses - Entire datasets sent to clients unnecessarily
  • Repeated network requests - Inefficient query handling
  • Excessive data synchronisation - Continuous background updates

These inefficiencies significantly reduce performance in constrained environments.

Design principles involved

Understanding anti-patterns helps reinforce several key design principles.

  • Resource efficiency
    Systems should minimise unnecessary data transfer
  • Progressive enhancement
    Applications should function without heavy frameworks
  • Scalability
    Systems must remain responsive under varying loads
  • User-centric performance
    Interfaces should prioritise accessibility and speed

Avoiding anti-patterns ensures these principles are upheld.

Strategy options

SPA-only architectures

Single Page Applications (SPAs) rely heavily on client-side JavaScript to dynamically render content.

While SPAs provide fluid user experiences, they often require large JavaScript bundles and complex initialisation processes.

In low-resource environments, this architecture can cause significant delays before content appears.

Common issues include:

  • Large initial script downloads
  • Delayed first contentful paint
  • Heavy client-side processing

Hybrid approaches, such as server-rendered pages or progressive web apps, can reduce these problems.

Heavy 3D by default

Modern design trends increasingly incorporate 3D graphics, WebGL animations, and immersive visual experiences.

While visually impressive, these features significantly increase computational and bandwidth requirements.

Common issues include:

  • Large asset downloads
  • High GPU usage
  • Increased memory consumption

3D features should be optional rather than enabled by default, particularly for users with limited device capability.

Infinite scrolling

Infinite scrolling automatically loads additional content as users scroll down a page.

While convenient in some contexts, it can create performance and usability issues.

Problems include:

  • Continuous data loading
  • Difficulty navigating large datasets
  • Increased memory usage

Pagination often provides a more efficient alternative for managing large collections of data.

No pagination

Displaying large datasets without pagination can overwhelm both users and devices.

Problems include:

  • Large API responses
  • Slow page rendering
  • High memory consumption

Pagination divides data into smaller segments that load more efficiently.

Unbounded API calls

Applications sometimes make excessive API requests without proper control mechanisms.

Examples include:

  • Repeated polling for updates
  • Multiple redundant requests
  • Unfiltered data queries

These practices significantly increase network traffic and server load.

Solutions include:

  • Request batching
  • Caching strategies
  • Rate limiting

Efficient API design ensures that only necessary data is transferred.

Example of controlling excessive API requests.

let lastRequest = 0;

function fetchData() {
	const now = Date.now();
	if (now - lastRequest > 5000) {
		lastRequest = now;
		fetch('/api/data');
	}
}

This simple mechanism prevents unnecessary repeated requests.

Overuse of real-time updates

Real-time data synchronisation can be valuable in certain applications, but may lead to unnecessary resource consumption.

Examples include:

  • Continuous server polling
  • Real-time updates for non-critical information

Reducing update frequency or switching to event-based updates can improve efficiency.

Heavy UI animations

Complex animations increase both processing load and rendering time.

Common problems include:

  • Increased CPU usage
  • Reduced frame rates on slower devices

Minimal animations or static alternatives often provide better performance.

Excessive third-party dependencies

Many websites include multiple external services such as analytics, advertising networks, or social media widgets.

Problems include:

  • Additional network requests
  • Increased page weight
  • Dependency failures

Minimising third-party integrations improves reliability and performance.

Large unoptimised database queries

Poor query design can result in excessive data being transferred.

Examples include:

  • Fetching entire tables instead of filtered data
  • Inefficient query structures

Optimised queries reduce both server load and network traffic.

Implementation guidance

Audit system architecture

Identify areas where resource usage is unnecessarily high.

Examples include:

  • Large script bundles
  • Excessive API calls
  • Heavy visual assets
  • Replace inefficient patterns
  • Introduce efficient alternatives such as pagination, caching, and lazy loading
  • Implement performance monitoring
  • Track metrics such as network requests and resource consumption
  • Test under constrained conditions
  • Simulate slow network environments to evaluate system behaviour

Real-world examples

Heavy single-page applications

Many modern websites rely entirely on large JavaScript frameworks, which delays content rendering on slower devices.

Social media infinite scroll

Infinite scrolling feeds continuously load content, consuming large amounts of data and memory.

Large analytics dashboards

Dashboards often load massive datasets without pagination, significantly slowing performance.

Do / Don't

Do

  • Use pagination for large datasets
  • Limit API requests
  • Optimise database queries
  • Use progressive loading strategies
  • Provide fallback modes for advanced features

Don't

  • Depend entirely on large SPA frameworks
  • Enable heavy 3D graphics by default
  • Load unlimited data through infinite scrolling
  • Fetch unnecessary API data
  • Overload pages with third-party scripts

Checklist (quick review)

Metrics and tools

Key metrics

  • Total page weight
  • Number of API requests
  • Script execution time
  • Memory usage
  • User interaction latency

Useful tools

  • Google Lighthouse
  • WebPageTest
  • PageSpeed Insights

Related topics

  • Design patterns
  • Page and interaction design principles
  • Progressive enhancement
  • Graceful degradation
  • Network optimisation strategies

Key takeaways

Anti-patterns highlight design approaches that significantly reduce system performance and accessibility in low-resource environments.

By recognising practices such as SPA-only architectures, heavy 3D rendering, infinite scrolling, and unbounded API calls, developers can avoid inefficient implementations and adopt more resource-efficient alternatives.

Avoiding these anti-patterns ensures that digital systems remain accessible, performant, and scalable across diverse network conditions.

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